restrict core blocks to inner blocks of specified parent blocks. blocks blocks blocks

app/Admin/Blocks.php

@@ -1,155 +0,0 @@
-<?php
-
-namespace App\Admin;
-use Blocks\Editor;
-
-class Blocks
-{
-    public function __construct()
-    {
-        add_filter( 'block_categories_all' ,   [$this, 'categories']);
-        add_action('allowed_block_types_all', [$this, 'blacklist'], 100, 2);
-    }
-
-    public function categories( $categories )
-    {
-
-        // Adding a new category.
-        $categories = array_merge([
-            [
-                'slug'  => 'badegg',
-                'title' => __('Provided by Bad Egg Digital'),
-            ],
-        ], $categories);
-
-        return $categories;
-    }
-
-    public function blacklist()
-    {
-        // Reference:
-        // https://www.wpexplorer.com/how-to-remove-gutenberg-blocks/
-        // https://www.wpexplorer.com/wordpress-core-blocks-list/
-
-        // Existing blocks with Blade templates
-        // https://roots.io/acorn/docs/rendering-blade-views/#existing-blocks-with-blade-templates
-
-        $blocks = array_keys( \WP_Block_Type_Registry::get_instance()->get_all_registered() );
-
-        $blacklist = [
-            // Design
-            'core/button',
-            'core/comment-template',
-            'core/home-link',
-            'core/navigation-link',
-            'core/navigation-submenu',
-            'core/buttons',
-            'core/column',
-            'core/columns',
-            'core/group',
-            'core/more',
-            'core/nextpage',
-            'core/separator',
-            'core/spacer',
-            'core/text-columns',
-
-            // Embed
-            'core/embed',
-
-            // Media
-            'core/cover',
-            'core/file',
-            'core/gallery',
-            'core/image',
-            'core/media-text',
-            'core/audio',
-            'core/video',
-
-            // Reusable
-            'core/block',
-
-            // 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',
-
-            // Theme
-            'core/avatar',
-            'core/comment-author-name',
-            'core/comment-content',
-            'core/comment-date',
-            'core/comment-edit-link',
-            'core/comment-reply-link',
-            'core/comments',
-            'core/comments-pagination',
-            'core/comments-pagination-next',
-            'core/comments-pagination-numbers',
-            'core/comments-pagination-previous',
-            'core/comments-title',
-            'core/loginout',
-            'core/navigation',
-            'core/pattern',
-            'core/post-author',
-            'core/post-author-biography',
-            'core/post-author-name',
-            'core/post-comments-form',
-            'core/post-content',
-            'core/post-date',
-            'core/post-excerpt',
-            'core/post-featured-image',
-            'core/post-navigation-link',
-            'core/post-template',
-            'core/post-terms',
-            'core/post-title',
-            'core/query',
-            'core/query-no-results',
-            'core/query-pagination',
-            'core/query-pagination-next',
-            'core/query-pagination-numbers',
-            'core/query-pagination-previous',
-            'core/query-title',
-            'core/read-more',
-            'core/site-logo',
-            'core/site-tagline',
-            'core/site-title',
-            'core/template-part',
-            'core/term-description',
-            'core/post-comments',
-
-            // Widgets
-            'core/legacy-widget',
-            'core/widget-group',
-            'core/archives',
-            'core/calendar',
-            'core/categories',
-            'core/latest-comments',
-            'core/latest-posts',
-            'core/page-list',
-            'core/page-list-item',
-            'core/rss',
-            'core/search',
-            'core/shortcode',
-            'core/social-link',
-            'core/tag-cloud',
-            'core/html',
-            'core/social-links',
-        ];
-
-        $Editor = new Editor\Editor();
-
-        $blacklist = array_diff($blacklist, $Editor->inner_blocks());
-
-        return array_values( array_diff( $blocks, $blacklist ) );
-    }
-}

app/blocks.php

@@ -0,0 +1,82 @@
+<?php
+
+/**
+ * Theme Blocks.
+ */
+
+namespace App;
+
+add_filter( 'block_categories_all' , function ( $categories ) {
+
+        // Adding a new category.
+        $categories = array_merge([
+            [
+                'slug'  => 'badegg',
+                'title' => __('Provided by Bad Egg Digital'),
+            ],
+        ], $categories);
+
+        return $categories;
+});
+
+// add_action('init', function () {
+//     $blocks = glob(get_theme_file_path('resources/blocks/*/block.json'));
+
+//     foreach ($blocks as $block_json) {
+//         register_block_type($block_json, [
+//             'render_callback' => function ($attributes, $content, $block) {
+//                 $slug = basename($block->name);
+//                 $view = "blocks.{$slug}.render";
+
+//                 if (\Roots\view()->exists($view)) {
+//                     return \Roots\view($view, [
+//                         'attributes' => $attributes,
+//                         'content' => $content,
+//                         'block' => $block,
+//                     ]);
+//                 }
+
+//                 return $content;
+//             }
+//         ]);
+//     }
+// });
+
+add_action('allowed_block_types_all', function(){
+    $blocks = array_keys( \WP_Block_Type_Registry::get_instance()->get_all_registered() );
+    $blacklist = array_diff(block_blacklist(), block_whitelist());
+
+    return array_values( array_diff( $blocks, $blacklist ) );
+}, 100, 2);
+
+function block_blacklist()
+{
+    $file = file_get_contents(get_theme_file_path("resources/json/core-block-blacklist.json"));
+    $json = json_decode($file);
+
+    return $json;
+}
+
+function block_whitelist()
+{
+    $file = file_get_contents(get_theme_file_path("resources/json/core-block-whitelist.json"));
+    $json = json_decode($file);
+
+    return $json;
+}
+
+function block_all()
+{
+    $enabled_blocks = array_map(function($block) {
+        $name = $block->name;
+
+        return $block->name;
+
+    }, \WP_Block_Type_Registry::get_instance()->get_all_registered());
+
+    return array_values($enabled_blocks);
+}
+
+add_action('wp_footer', function(){
+    echo '<pre>',print_r(block_all()),'</pre>';
+});

app/setup.php

@@ -46,16 +46,6 @@ 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.
  *

functions.php

@@ -85,7 +85,7 @@ autoload_psr4_blocks();
 |
 */
 
-collect(['setup', 'filters'])
+collect(['setup', 'filters', 'blocks'])
     ->each(function ($file) {
         if (! locate_template($file = "app/{$file}.php", true, true)) {
             wp_die(

resources/acf/group_clone_block_settings.json

@@ -17,7 +17,7 @@
                 "id": ""
             },
             "open": 0,
-            "multi_expand": 0,
+            "multi_expand": 1,
             "endpoint": 0
         },
         {
@@ -55,19 +55,22 @@
                 "id": ""
             },
             "choices": {
-                "0": "Full Width",
+                "full": "Full Width",
                 "large": "Large",
                 "medium": "Medium",
                 "small": "Small",
                 "narrow": "Narrow"
             },
-            "default_value": 0,
+            "default_value": "medium",
             "return_format": "value",
             "multiple": 0,
             "allow_null": 0,
+            "allow_in_bindings": 1,
             "ui": 0,
             "ajax": 0,
-            "placeholder": ""
+            "placeholder": "",
+            "create_options": 0,
+            "save_options": 0
         },
         {
             "key": "field_67350eb62cdf9",
@@ -133,8 +136,8 @@
                 "class": "",
                 "id": ""
             },
-            "open": 0,
-            "multi_expand": 0,
+            "open": 1,
+            "multi_expand": 1,
             "endpoint": 0
         },
         {
@@ -159,28 +162,6 @@
             "prefix_label": 0,
             "prefix_name": 0
         },
-        {
-            "key": "field_67fff4d4ddbb7",
-            "label": "Angle",
-            "name": "angle",
-            "aria-label": "",
-            "type": "clone",
-            "instructions": "",
-            "required": 0,
-            "conditional_logic": 0,
-            "wrapper": {
-                "width": "",
-                "class": "",
-                "id": ""
-            },
-            "clone": [
-                "group_clone_angle"
-            ],
-            "display": "seamless",
-            "layout": "block",
-            "prefix_label": 1,
-            "prefix_name": 1
-        },
         {
             "key": "field_6828da67543fc",
             "label": "Settings (end)",
@@ -218,5 +199,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1747508044
+    "modified": 1764247227
 }

resources/css/app.scss

@@ -18,9 +18,6 @@
 @use "components/button";
 @use "components/card";
 
-// Blocks
-@use "blocks/BadExample";
-
 // Page Styles
 @use "views/page";
 

resources/css/editor.scss

@@ -1,4 +1,18 @@
-@use "./app";
+@use "app";
+@use "global/variables/colours";
+
+.block-editor-block-list__layout .block-editor-block-list__block:not([contenteditable=true]) {
+  &:hover:after {
+    content: '';
+    outline: 2px solid colours.$wpblue;
+    position: absolute;
+    inset: 0;
+  }
+
+  &:focus:after {
+    outline-style: dashed;
+  }
+}
 
 .editor-styles-wrapper {
   padding: 1em;
@@ -10,11 +24,14 @@
     max-width: none;
   }
 
+  .is-root-container > .wp-block:not(.block-list-appender) {
+    margin: 0;
+  }
+
   .block-list-appender {
     width: 350px;
     max-width: 90%;
     margin: 1em auto;
-    background: white;
   }
 
   &__post-title-wrapper {
@@ -45,9 +62,4 @@
       font-weight: 400;
     }
   }
-
-  .wp-block-post-content {
-    // background: white;
-    // box-shadow: 0 0.5rem 1rem rgba(black, 0.15);
-  }
 }

resources/css/global/variables/_colours.scss

@@ -1,5 +1,7 @@
 @use "sass:color";
 
+$wpblue: #2271b1;
+
 //== Status
 $success: #39b54a;
 $error: #be1e2d;

resources/js/app.js

@@ -3,10 +3,8 @@ import.meta.glob([
   '../fonts/**',
 ]);
 
-import blocks from './blocks.js';
-import Header from './sections/header.js';
+import Header from '../views/sections/header/header.js';
 import LazyLoad from './lib/Lazy.js';
 
 LazyLoad();
-blocks();
 Header();

resources/js/blocks.js

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

resources/json/core-block-blacklist.json

@@ -0,0 +1,102 @@
+[
+  "core/button",
+  "core/comment-template",
+  "core/home-link",
+  "core/navigation-link",
+  "core/navigation-submenu",
+  "core/buttons",
+  "core/column",
+  "core/columns",
+  "core/group",
+  "core/more",
+  "core/nextpage",
+  "core/separator",
+  "core/spacer",
+  "core/text-columns",
+
+  "core/embed",
+
+  "core/cover",
+  "core/file",
+  "core/gallery",
+  "core/image",
+  "core/media-text",
+  "core/audio",
+  "core/video",
+
+  "core/block",
+
+  "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",
+
+  "core/avatar",
+  "core/comment-author-name",
+  "core/comment-content",
+  "core/comment-date",
+  "core/comment-edit-link",
+  "core/comment-reply-link",
+  "core/comments",
+  "core/comments-pagination",
+  "core/comments-pagination-next",
+  "core/comments-pagination-numbers",
+  "core/comments-pagination-previous",
+  "core/comments-title",
+  "core/loginout",
+  "core/navigation",
+  "core/pattern",
+  "core/post-author",
+  "core/post-author-biography",
+  "core/post-author-name",
+  "core/post-comments-form",
+  "core/post-content",
+  "core/post-date",
+  "core/post-excerpt",
+  "core/post-featured-image",
+  "core/post-navigation-link",
+  "core/post-template",
+  "core/post-terms",
+  "core/post-title",
+  "core/query",
+  "core/query-no-results",
+  "core/query-pagination",
+  "core/query-pagination-next",
+  "core/query-pagination-numbers",
+  "core/query-pagination-previous",
+  "core/query-title",
+  "core/read-more",
+  "core/site-logo",
+  "core/site-tagline",
+  "core/site-title",
+  "core/template-part",
+  "core/term-description",
+  "core/post-comments",
+
+  "core/legacy-widget",
+  "core/widget-group",
+  "core/archives",
+  "core/calendar",
+  "core/categories",
+  "core/latest-comments",
+  "core/latest-posts",
+  "core/page-list",
+  "core/page-list-item",
+  "core/rss",
+  "core/search",
+  "core/shortcode",
+  "core/social-link",
+  "core/tag-cloud",
+  "core/html",
+  "core/social-links"
+]

resources/json/core-block-whitelist.json

@@ -0,0 +1,26 @@
+[
+  "core/separator",
+  "core/spacer",
+
+  "core/cover",
+  "core/file",
+  "core/gallery",
+  "core/image",
+  "core/media-text",
+  "core/audio",
+  "core/video",
+
+  "core/footnotes",
+  "core/heading",
+  "core/list",
+  "core/code",
+  "core/details",
+  "core/list-item",
+  "core/missing",
+  "core/paragraph",
+  "core/preformatted",
+  "core/pullquote",
+  "core/quote",
+  "core/table",
+  "core/verse"
+]

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

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

resources/views/blocks/Editor/Editor.php

@@ -6,132 +6,98 @@ use App\ACF;
 
 class Editor
 {
-    public function __construct()
-    {
-        add_action('acf/init', [$this, 'init']);
-    }
+  public function __construct()
+  {
+    add_action('acf/init', [$this, 'init']);
+  }
 
-    public function init()
-    {
-        acf_register_block_type([
-            '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'              => 'media-document',
-            'supports'          => [
-                'align' => false,
-                'jsx' => true,
-            ],
-            'example' => [
-                'attributes' => [
-                    'mode' => 'preview',
-                    'data' => [
-                      'inserter' => true,
-                    ],
-                ],
-            ],
-        ]);
-    }
-
-    public function render($block, $content = '', $is_preview = false)
-    {
-          $name = basename(__FILE__, '.php');
-          $themeURL = get_template_directory_uri();
-
-          if($is_preview && @$block['data']['inserter']):
-              echo '<img style="display: block; width: 100%" src="' . $themeURL . '/resources/views/blocks/' . $name . '/' . $name . '.jpg" />';
-              return;
-          endif;
-
-          $CssClasses = new Utilities\CssClasses;
-          $Colour     = new Utilities\Colour;
-          $CloneGroup = new ACF\CloneGroup;
-
-          $data = [];
-
-          $fields = [
-
-          ];
-
-          $fields = array_merge($fields, $CloneGroup->block_all());
-
-          foreach($fields as $field):
-              $data[$field] = get_field($field);
-          endforeach;
-
-          unset($block['data']);
-          $block['name'] = str_replace('acf/', '', $block['name']);
-
-          $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", [
-              'data' => $data,
-              'block' => $block,
-          ])->render();
-      }
-
-      public function default_template()
-      {
-        return [
-          [
-            'core/heading',
-            [
-              'level' => 1,
-              'placeholder' => 'Heading',
-            ],
+  public function init()
+  {
+      acf_register_block_type([
+          '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'              => 'media-document',
+          'supports'          => [
+              'align' => false,
+              'jsx' => true,
           ],
-          [
-            'core/paragraph',
-            [
-              'placeholder' => 'You can type your own text, change the heading level, or delete it altogether. You can also type over this text.',
-            ],
+          'example' => [
+              'attributes' => [
+                  'mode' => 'preview',
+                  'data' => [
+                    'inserter' => true,
+                  ],
+              ],
           ],
-          [
-            '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 [
-              // Design
-              'core/separator',
-              'core/spacer',
+  public function render($block, string $content = '', bool $is_preview = false, int $post_id = 0)
+  {
+    $name = basename(__FILE__, '.php');
+    $themeURL = get_template_directory_uri();
 
-              // Media
-              'core/cover',
-              'core/file',
-              'core/gallery',
-              'core/image',
-              'core/media-text',
-              'core/audio',
-              'core/video',
+    if($is_preview && @$block['data']['inserter']):
+      echo '<img style="display: block; width: 100%" src="' . $themeURL . '/resources/views/blocks/' . $name . '/' . $name . '.jpg" />';
+      return;
+    endif;
 
-              // 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',
-        ];
-      }
+    $CssClasses = new Utilities\CssClasses;
+    $Colour     = new Utilities\Colour;
+    $CloneGroup = new ACF\CloneGroup;
+
+    $data = [];
+
+    $fields = [
+
+    ];
+
+    $fields = array_merge($fields, $CloneGroup->block_all());
+
+    foreach($fields as $field):
+      $data[$field] = get_field($field);
+    endforeach;
+
+    unset($block['data']);
+    $block['name'] = str_replace('acf/', '', $block['name']);
+
+    $data = array_merge($data, $block);
+    $data['section_classes'] = $CssClasses->section($data);
+    $data['allowed_blocks'] = \App\block_whitelist();
+    $data['template'] = $this->default_template();
+    $data['block'] = $block;
+
+    echo \Roots\view("blocks.$name.$name", [
+      'data' => $data,
+      'block' => $block,
+    ])->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.',
+        ],
+      ],
+    ];
+  }
 }

resources/views/layouts/block.blade.php

@@ -29,7 +29,7 @@
       </div>
     @endif
 
-    <div class="container{{ @$data['container_width'] ?  ' container-' . $data['container_width'] : '' }} block-content">
+    <div class="container container-{{ @$data['container_width'] ? $data['container_width'] : 'medium' }} block-content">
       @yield('block-content')
     </div>
 

resources/views/sections/header/header.js

@@ -24,6 +24,8 @@ export default function Header() {
     const position = body.offsetTop;
     const header = document.querySelector(".site-header");
 
+    if(!header) return;
+
     if (scrolled > position + header.offsetHeight) {
       body.classList.add("scrolled");
     } else {