article block: more core block styles

app/blocks.php

@@ -31,6 +31,11 @@ add_filter( 'block_categories_all' , __NAMESPACE__ . '\\add_categories' );
 add_filter( 'badegg_block_types_allow', __NAMESPACE__ . '\\allowed_list' );
 add_action( 'init', __NAMESPACE__ . '\\auto_register' );
 
+/**
+ * Core Blocks
+ */
+add_filter( 'render_block_core/details', __NAMESPACE__ . '\\core_details_modified', 10, 2 );
+
 
 function remove_action_block_inline()
 {
@@ -251,3 +256,11 @@ function render_acf($block, $content = '', $is_preview = false, $post_id = 0, $w
         <?php echo ob_get_clean();
     }
 }
+
+function core_details_modified($content, $block)
+{
+    $content = str_replace('</summary>', '</summary><div class="wp-block-details__inner inner inner-zero-x wysiwyg">', $content);
+    $content = str_replace('</details>', '</div></details>', $content);
+
+    return $content;
+}

resources/css/components/_button.scss

@@ -1,4 +1,4 @@
-@use "../global/fonts";
+@use "../global/variables/fonts";
 @use "../global/variables/colours";
 
 button {

resources/css/components/_forms.scss

@@ -1,4 +1,4 @@
-@use "../global/fonts";
+@use "../global/variables/fonts";
 @use "../global/variables/breakpoints";
 @use "../global/variables/colours";
 

resources/css/global/_fonts.scss

@@ -1,6 +1,3 @@
-$font: "Ubuntu", Helvetica, Arial, sans-serif;
-$blockquote: serif;
-
 /*
  * Roots Fonts Setup
  * https://roots.io/sage/docs/fonts-setup/

resources/css/global/_typography.scss

@@ -1,4 +1,4 @@
-@use "fonts";
+@use "variables/fonts";
 @use "variables/breakpoints";
 @use "variables/colours";
 @use "variables/spacing";

resources/css/global/_variables.scss

@@ -1,3 +1,4 @@
+@use "variables/fonts";
 @use "variables/colours";
 @use "variables/breakpoints";
 @use "variables/spacing";

resources/css/global/framework/_normalise.scss

@@ -32,6 +32,11 @@ img {
   transition: all 300ms ease;
 }
 
+video {
+  max-width: 100%;
+  height: auto;
+}
+
 img.lazy,
 .lazy-bg,
 .lazy-loaded {

resources/css/global/variables/_fonts.scss

@@ -0,0 +1,2 @@
+$font: "Ubuntu", Helvetica, Arial, sans-serif;
+$blockquote: serif;

resources/js/editor.js

@@ -12,16 +12,20 @@ domReady(() => {
     return settings
   }
 
-  wp.hooks.addFilter(
+  const coreInnerBlocks = (settings, name) => {
-      'blocks.registerBlockType',
+    if (['core/media-text', 'core/details', 'core/quote'].includes(name)) {
-      'badegg/restrict-parent-blocks',
-      restrictEditorParentBlocks
-  );
 
-  // find blocks styles
+      settings.allowedBlocks = [
-  wp.blocks.getBlockTypes().forEach((block) => {
+        'core/paragraph',
-      if (_.isArray(block['styles'])) {
+        'core/heading',
-          console.log('editor.js ' + block.name, _.pluck(block['styles'], 'name'));
+        'core/list',
+      ];
     }
-  });
+
+    return settings;
+  }
+
+  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/restrict-parent-blocks', restrictEditorParentBlocks );
+  wp.hooks.addFilter( 'blocks.registerBlockType', 'badegg/core-inner-blocks', coreInnerBlocks );
+
 });

resources/json/block-core-whitelist.json

@@ -7,17 +7,16 @@
   "core/media-text",
   "core/audio",
   "core/video",
+  "core/embed",
 
   "core/footnotes",
   "core/heading",
   "core/list",
-  "core/code",
   "core/details",
   "core/list-item",
   "core/missing",
   "core/paragraph",
   "core/quote",
   "core/pullquote",
-  "core/table",
   "core/verse"
 ]

resources/json/block-parents.json

@@ -1,7 +1,4 @@
 [
-  "core/media-text",
-  "core/details",
-  "core/quote",
   "acf/badegg-editor",
   "badegg/article"
 ]

resources/views/blocks/article/css/_base.scss

@@ -3,7 +3,6 @@
 @use "../../../../css/global/variables/breakpoints";
 @use "../../../../css/global/variables/spacing";
 @use "../../../../css/global/variables/colours";
-@use "../../../../css/global/fonts";
 
 .wp-block-badegg-article {
   container-name: BadEggArticle;

resources/views/blocks/article/css/_details.scss

@@ -0,0 +1,17 @@
+@use "../../../../css/global/variables/colours";
+@use "../../../../css/global/variables/fonts";
+
+.wp-block-details {
+  summary {
+    font-family: fonts.$font;
+    font-weight: bold;
+  }
+
+  @media screen {
+    .knockout & {
+      summary {
+        color: colours.$white;
+      }
+    }
+  }
+}

resources/views/blocks/article/css/_embed.scss

@@ -0,0 +1,10 @@
+.wp-block-badegg-article {
+  .is-type-video {
+    iframe {
+      display: block;
+      width: 100%;
+      height: auto;
+      aspect-ratio: 16 / 9;
+    }
+  }
+}

resources/views/blocks/article/css/_quote.scss

@@ -1,7 +1,7 @@
 @use "../../../../css/global/variables/breakpoints";
 @use "../../../../css/global/variables/spacing";
 @use "../../../../css/global/variables/colours";
-@use "../../../../css/global/fonts";
+@use "../../../../css/global/variables/fonts";
 
 .wp-block-badegg-article {
   .wp-block-pullquote blockquote,

resources/views/blocks/article/css/_verse.scss

@@ -0,0 +1,14 @@
+@use "../../../../css/global/variables/colours";
+@use "../../../../css/global/variables/fonts";
+
+.wp-block-verse {
+  font-family: fonts.$font;
+  line-height: 2;
+  word-wrap: normal;
+
+  @media screen {
+    .knockout & {
+      color: colours.$white;
+    }
+  }
+}

resources/views/blocks/article/style.scss

@@ -1,8 +1,8 @@
-
-
 @use 'css/base';
 @use 'css/image';
 @use 'css/gallery';
 @use 'css/media-text';
 @use 'css/quote';
-
+@use 'css/embed';
+@use 'css/verse';
+@use 'css/details';