new text editor block that contains core blocks as inner blocks and prevents them from being used at top level

app/ACF/Dynamic.php

@@ -15,6 +15,7 @@ class Dynamic
         add_filter('acf/load_field/name=fontawesome_regular',   [ $this, 'load_fontawesome_regular_icons' ]);
         add_filter('acf/load_field/name=fontawesome_solid',     [ $this, 'load_fontawesome_solid_icons'   ]);
         add_filter('acf/load_field/name=fontawesome_brands',    [ $this, 'load_fontawesome_brand_icons'   ]);
+        add_action('acf/input/admin_footer',                    [$this, 'colour_ui'] );
     }
 
     public function load_colours( $field )
@@ -98,5 +99,43 @@ class Dynamic
 
         return $choices;
     }
+
+    public function colour_ui()
+    { ?>
+
+        <script type="text/javascript">
+            console.log("Script loaded from sage/app/ACF/Dynamic.php");
+
+            (function($) {
+
+                function my_custom_escaping_method( original_value){
+                    return original_value;
+                }
+
+                acf.add_filter('select2_escape_markup', function( escaped_value, original_value, $select, settings, field, instance ){
+                    console.log(field.data('name'));
+
+                    const whitelist = [
+                        'colour',
+                        'bg_colour',
+                        'angle_colour',
+                        'fontawesome_brands',
+                    ];
+
+                    // do something to the original_value to override the default escaping, then return it.
+                    // this value should still have some kind of escaping for security, but you may wish to allow specific HTML.
+                    if (whitelist.includes(field.data( 'name' ))) {
+                        return my_custom_escaping_method( original_value );
+                    }
+
+                    // return
+                    return escaped_value;
+                });
+
+            })(jQuery);
+
+        </script>
+
+    <?php }
 }
 

app/Admin/Blocks.php

@@ -1,7 +1,7 @@
 <?php
 
 namespace App\Admin;
-use Blocks\Content;
+use Blocks\Editor;
 
 class Blocks
 {
@@ -146,9 +146,9 @@ class Blocks
             'core/social-links',
         ];
 
-        $Content = new Content\Content();
+        $Editor = new Editor\Editor();
 
-        $blacklist = array_diff($blacklist, $Content->inner_blocks());
+        $blacklist = array_diff($blacklist, $Editor->inner_blocks());
 
         return array_values( array_diff( $blocks, $blacklist ) );
     }

app/setup.php

@@ -46,6 +46,16 @@ add_filter('admin_head', function () {
     ])->toHtml();
 });
 
+add_action( 'enqueue_block_editor_assets', function(){
+    wp_enqueue_script(
+        'restrict-core-blocks',
+        Vite::asset('resources/js/admin/block-restrictions.js'),
+        array( 'wp-blocks', 'wp-dom-ready', 'wp-edit-blocks', 'wp-hooks' ),
+        'v1.0.0',
+        true
+    );
+});
+
 /**
  * Use the generated theme.json file.
  *

resources/acf/group_block_editor.json

@@ -1,6 +1,6 @@
 {
-    "key": "group_block_content",
+    "key": "group_block_editor",
-    "title": "Block: Content",
+    "title": "Block: Editor",
     "fields": [
         {
             "key": "field_67659ad8dc795",
@@ -92,7 +92,7 @@
             {
                 "param": "block",
                 "operator": "==",
-                "value": "acf\/badegg-content"
+                "value": "acf\/badegg-editor"
             }
         ]
     ],

resources/acf/group_clone_background_settings.json

@@ -4,7 +4,7 @@
     "fields": [
         {
             "key": "field_67325dd23234e",
-            "label": "Background Colour",
+            "label": "Colour",
             "name": "bg_colour",
             "aria-label": "",
             "type": "select",
@@ -17,17 +17,8 @@
                 "id": ""
             },
             "choices": {
-                "primary": "<i class=\"fas fa-circle\" style=\"color: #002448\"><\/i> Prussian Blue",
-                "secondary": "<i class=\"fas fa-circle\" style=\"color: #fc533e\"><\/i> Sunset Orange",
-                "tertiary": "<i class=\"fas fa-circle\" style=\"color: #fdd400\"><\/i> Gold",
-                "quaternary": "<i class=\"fas fa-circle\" style=\"color: #7d89d1\"><\/i> Moody Blue",
-                "quinary": "<i class=\"fas fa-circle\" style=\"color: #ffdab4\"><\/i> Frangipani",
                 "0": "<i class=\"fas fa-circle\" style=\"color: #FFFFFF\"><\/i> White",
-                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black",
+                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black"
-                "quaternary-white": "<i class=\"fas fa-circle text-gradient text-gradient-quaternary-white\"><\/i> Moody Blue to White",
-                "quinary-white": "<i class=\"fas fa-circle text-gradient text-gradient-quinary-white\"><\/i> Frangipani to White",
-                "white-quaternary": "<i class=\"fas fa-circle text-gradient text-gradient-white-quaternary\"><\/i> White to Moody Blue",
-                "white-quinary": "<i class=\"fas fa-circle text-gradient text-gradient-white-quinary\"><\/i> White to Frangipani"
             },
             "default_value": 0,
             "return_format": "value",
@@ -42,7 +33,7 @@
         },
         {
             "key": "field_67325e213234f",
-            "label": "Background Tint",
+            "label": "Tint",
             "name": "bg_tint",
             "aria-label": "",
             "type": "select",
@@ -122,5 +113,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1748194684
+    "modified": 1764224358
 }

resources/acf/group_post_social.json

@@ -492,7 +492,9 @@
             "allow_null": 0,
             "ui": 1,
             "ajax": 0,
-            "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
         },
         {
             "key": "field_664c65c653f1c",
@@ -530,5 +532,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1734711372
+    "modified": 1764224435
 }

resources/css/editor.scss

@@ -0,0 +1,53 @@
+@use "./app";
+
+.editor-styles-wrapper {
+  padding: 1em;
+  background: transparent;
+}
+
+.editor-visual-editor {
+  .wp-block {
+    max-width: none;
+  }
+
+  .block-list-appender {
+    width: 350px;
+    max-width: 90%;
+    margin: 1em auto;
+    background: white;
+  }
+
+  &__post-title-wrapper {
+    padding: 1rem;
+    margin: 0 0 3rem !important;
+    background: white;
+    box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
+  }
+
+  .wp-block-post-title {
+    position: relative;
+    padding: 0.5rem;
+    border: 1px solid rgba(black, 0.3);
+    margin: 0;
+
+    &::before {
+      content: 'Page Title';
+      position: absolute;
+      top: -0.5rem;
+      left: 0.5rem;
+      color: rgba(black, 0.3);
+      font-size: 0.8rem;
+      display: block;
+      padding: 0 0.5rem;
+      margin: 0;
+      background: white;
+      line-height: 1;
+      font-weight: 400;
+    }
+  }
+
+  .wp-block-post-content {
+    // background: white;
+    // box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
+  }
+}

resources/css/global/_typography.scss

@@ -63,7 +63,7 @@ p,
 li,
 td,
 label {
-  color: colours.$grey;
+  color: colours.$grey-dark;
   font-family: fonts.$font;
   font-weight: 400;
   line-height: 1.5em;

resources/js/app.js

@@ -3,16 +3,10 @@ import.meta.glob([
   '../fonts/**',
 ]);
 
-import domReady from '@wordpress/dom-ready';
 import blocks from './blocks.js';
 import Header from './sections/header.js';
 import LazyLoad from './lib/Lazy.js';
 
-/**
- * Application entrypoint
- */
-domReady(async () => {
 LazyLoad();
 blocks();
 Header();
-});

resources/js/blocks.js

@@ -1,6 +1,6 @@
-import BadExample from "./blocks/BadExample";
+// import BadExample from "./blocks/BadExample";
 
 export default function()
 {
-  BadExample();
+  // BadExample();
 }

resources/js/blocks/BadExample.js

@@ -1,4 +0,0 @@
-export default function BadExample()
-{
-
-}

resources/js/editor.js

@@ -1,5 +1,52 @@
 import domReady from '@wordpress/dom-ready';
 
 domReady(() => {
-  //
+
+  const restrictEditorParentBlocks = (settings, name) => {
+    const TEXT_EDITOR_BLOCKS = [
+      // Design
+      'core/separator',
+      'core/spacer',
+
+      // Media
+      'core/cover',
+      'core/file',
+      'core/gallery',
+      'core/image',
+      'core/media-text',
+      'core/audio',
+      'core/video',
+
+      // Text
+      'core/footnotes',
+      'core/heading',
+      'core/list',
+      'core/code',
+      'core/details',
+      'core/freeform',
+      'core/list-item',
+      'core/missing',
+      'core/paragraph',
+      'core/preformatted',
+      'core/pullquote',
+      'core/quote',
+      'core/table',
+      'core/verse',
+    ];
+
+    if (TEXT_EDITOR_BLOCKS.includes(name)) {
+      settings.parent = ['acf/badegg-editor']
+    }
+
+    // console.log(settings, name)
+
+    return settings
+  }
+
+  wp.hooks.addFilter(
+      'blocks.registerBlockType',
+      'your-project-name/restrict-parent-blocks',
+      restrictEditorParentBlocks
+  );
+
 });

resources/js/lib/isInsideBlock.js

@@ -0,0 +1,12 @@
+export default function isInsideMyACFBlock(blockName)
+{
+  const editor = wp.data.select('core/block-editor');
+  const selectedId = editor.getSelectedBlockClientId();
+
+  if (!selectedId) return false;
+
+  const parents = editor.getBlockParents(selectedId);
+  const parentNames = parents.map(id => editor.getBlockName(id));
+
+  return parentNames.includes(blockName);
+}

resources/views/blocks/Editor/Editor.blade.php

@@ -11,7 +11,10 @@
 
   <div class="section-{{ $block['name'] }}-inner">
     <div class="container{{ @$data['container_width'] ?  ' container-' . $data['container_width'] : '' }} block-content wysiwyg">
-      <InnerBlocks allowedBlocks="{!! esc_attr( wp_json_encode( $data['allowed_blocks'] ) ) !!}" />
+      <InnerBlocks
+        allowedBlocks="{!! esc_attr( wp_json_encode( $data['allowed_blocks'] ) ) !!}"
+        template="{!! esc_attr( wp_json_encode( $data['template'] ) ) !!}"
+      />
     </div>
   </div>
 

resources/views/blocks/Editor/Editor.php

@@ -1,10 +1,10 @@
 <?php
 
-namespace Blocks\Content;
+namespace Blocks\Editor;
 use App\Utilities;
 use App\ACF;
 
-class Content
+class Editor
 {
     public function __construct()
     {
@@ -14,12 +14,12 @@ class Content
     public function init()
     {
         acf_register_block_type([
-            'name'              => 'badegg/content',
+            'name'              => 'badegg-editor',
-            'title'             => __('Content'),
+            'title'             => __('Text Editor'),
-            'description'       => __('Wordpress blocks inside a wrapper'),
+            'description'       => __('Long form text content with support for things like headings, lists, and images.'),
             'render_callback'   => [ $this, 'render'],
             'category'          => 'badegg',
-            'icon'              => 'columns',
+            'icon'              => 'media-document',
             'supports'          => [
                 'align' => false,
                 'jsx' => true,
@@ -67,6 +67,7 @@ class Content
           $data = array_merge($data, $block);
           $data['section_classes'] = $CssClasses->section($data);
           $data['allowed_blocks'] = $this->inner_blocks();
+          $data['template'] = $this->default_template();
           $data['block'] = $block;
 
           echo \Roots\view("blocks.$name.$name", [
@@ -75,6 +76,31 @@ class Content
           ])->render();
       }
 
+      public function default_template()
+      {
+        return [
+          [
+            'core/heading',
+            [
+              'level' => 1,
+              'placeholder' => 'Heading',
+            ],
+          ],
+          [
+            'core/paragraph',
+            [
+              'placeholder' => 'You can type your own text, change the heading level, or delete it altogether. You can also type over this text.',
+            ],
+          ],
+          [
+            'core/paragraph',
+            [
+              'placeholder' => 'To adjust block settings, click the Text Editor icon floating above this block to display them in the sidebar.',
+            ],
+          ],
+        ];
+      }
+
       public function inner_blocks()
       {
         return [