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

2025-11-27 07:14:31 +00:00
parent 00d0861014
commit 0055a25420
17 changed files with 218 additions and 45 deletions
--- a/app/ACF/Dynamic.php
+++ b/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 }
 }

--- a/app/Admin/Blocks.php
+++ b/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 ) );
    }
--- a/app/setup.php
+++ b/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.
 *
--- a/resources/acf/group_block_content.json
+++ b/resources/acf/group_block_content.json
@@ -1,6 +1,6 @@
 {
-    "key": "group_block_content",
-    "title": "Block: Content",
+    "key": "group_block_editor",
+    "title": "Block: Editor",
    "fields": [
        {
            "key": "field_67659ad8dc795",
@@ -92,7 +92,7 @@
            {
                "param": "block",
                "operator": "==",
-                "value": "acf\/badegg-content"
+                "value": "acf\/badegg-editor"
            }
        ]
    ],
--- a/resources/acf/group_clone_background_settings.json
+++ b/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",
-                "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"
+                "black": "<i class=\"fas fa-circle\" style=\"color: #000000\"><\/i> Black"
            },
            "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
 }
--- a/resources/acf/group_post_social.json
+++ b/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
 }
--- a/resources/css/editor.scss
+++ b/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);
+  }
+}
--- a/resources/css/global/_typography.scss
+++ b/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;
--- a/resources/js/app.js
+++ b/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();
-});
+LazyLoad();
+blocks();
+Header();
--- a/resources/js/blocks.js
+++ b/resources/js/blocks.js
@@ -1,6 +1,6 @@
-import BadExample from "./blocks/BadExample";
+// import BadExample from "./blocks/BadExample";

 export default function()
 {
-  BadExample();
+  // BadExample();
 }
--- a/resources/js/blocks/BadExample.js
+++ b/resources/js/blocks/BadExample.js
@@ -1,4 +0,0 @@
-export default function BadExample()
-{
-
-}
--- a/resources/js/editor.js
+++ b/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
+  );
+
 });
--- a/resources/js/lib/isInsideBlock.js
+++ b/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);
+}
--- a/resources/views/blocks/Content/Content.blade.php
+++ b/resources/views/blocks/Content/Content.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>

--- a/resources/views/blocks/Content/Content.jpg
+++ b/resources/views/blocks/Content/Content.jpg
--- a/resources/views/blocks/Content/Content.php
+++ b/resources/views/blocks/Content/Content.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',
-            'title'             => __('Content'),
-            'description'       => __('Wordpress blocks inside a wrapper'),
+            'name'              => 'badegg-editor',
+            'title'             => __('Text Editor'),
+            '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 [
--- a/resources/views/blocks/Content/Content.scss
+++ b/resources/views/blocks/Content/Content.scss