Started inlining hte wp-add-button macro

frontend/src/global_styles/content/user-content/_index.sass

@@ -5,9 +5,9 @@
 @import 'image'
 @import 'table'
 @import 'list'
+@import 'placeholder'
 @import 'toc'
 @import 'macros'
-@import 'placeholder'
 
 .op-uc-container
   --op-uc-heading-base: 1.8rem

frontend/src/global_styles/content/user-content/_macros.sass

@@ -2,3 +2,12 @@
   clear: both
   display: block
 
+.op-uc-wp-button
+  font: inherit
+  line-height: inherit
+
+  &.op-uc-placeholder
+    display: inline-block
+    padding: 0.2em 0.5em
+    margin: 0
+

frontend/src/global_styles/content/user-content/_toc.sass

@@ -5,7 +5,9 @@
   border: 1px solid #dadada
   float: right
   margin: 1rem 0rem 1rem 2rem
-  padding: 1.5rem 1.5rem 1.5rem 0rem
+
+  &:not(.op-uc-placeholder)
+    padding: 1.5rem 1.5rem 1.5rem 0rem
 
   &--list
     padding-left: 1rem

spec/features/wysiwyg/custom_css_classes_spec.rb

@@ -112,7 +112,7 @@ describe 'Wysiwyg paragraphs in lists behavior (Regression #28765)',
 
   it 'custom classes are placed correctly' do
     editor.in_editor do |container, editable|
-      expect(editable).to have_css('p.op-uc-p', count: 5)
+      expect(editable).to have_css('p.op-uc-p', count: 6)
       expect(editable).to have_css('h1.op-uc-h1', count: 1)
       expect(editable).to have_css('h2.op-uc-h2', count: 1)
       expect(editable).to have_css('h3.op-uc-h3', count: 1)