base article block styles

app/blocks.php

@@ -6,30 +6,83 @@
 
 namespace App\Blocks;
 
-add_filter('block_type_metadata', function($metadata){
+/**
+ * Disable block styles in frontend
+ */
+add_filter( 'should_load_separate_core_block_assets', '__return_false', 99 );
+add_filter( 'wp_img_tag_add_auto_sizes', '__return_false' );
+add_action( 'init', __NAMESPACE__ . '\\remove_action_block_inline' );
+add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\\disable_frontend_inline_css', 20 );
+add_action( 'template_redirect', __NAMESPACE__ . '\\delete_block_support_inline_css' );
+
+/**
+ * block editor back end tweaks
+ *  - Disable all core blocks except what we need as inner blocks
+ *  - resources/js/editor.js handles hiding the inner blocks at the top level
+ */
+add_action( 'allowed_block_types_all', __NAMESPACE__ . '\\list_allowed', 100, 2 );
+add_action( 'admin_init', __NAMESPACE__ . '\\admin_block_cleanup' );
+add_filter( 'block_type_metadata', __NAMESPACE__ . '\\unset_core_supports' );
+
+/**
+ * Custom blocks
+ */
+add_filter( 'block_categories_all' , __NAMESPACE__ . '\\add_categories' );
+add_filter( 'badegg_block_types_allow', __NAMESPACE__ . '\\allowed_list' );
+add_action( 'init', __NAMESPACE__ . '\\auto_register' );
+
+
+function remove_action_block_inline()
+{
+    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
+    remove_action( 'wp_enqueue_scripts', 'wp_enqueue_block_support_styles');
+    remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
+    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
+}
+
+function admin_block_cleanup()
+{
+    remove_action( 'enqueue_block_editor_assets', 'wp_enqueue_editor_block_directory_assets' );
+}
+
+function disable_frontend_inline_css()
+{
+    wp_dequeue_style( 'wp-block-library' );
+    wp_dequeue_style( 'wp-block-library-theme' );
+    wp_dequeue_style( 'classic-theme-styles' );
+}
+
+function delete_block_support_inline_css ()
+{
+	ob_start( function ( $html ) {
+		return preg_replace(
+			'#<style id=[\'"]core-block-supports-inline-css[\'"][^>]*>.*?</style>#s',
+			'',
+			$html
+		);
+	} );
+}
+
+function unset_core_supports($metadata){
     $name = $metadata['name'];
 
     if (str_starts_with($name, 'core/') ) {
         unset($metadata['supports']['color']);
         unset($metadata['supports']['typography']);
+        unset($metadata['supports']['border']);
     }
 
     return $metadata;
-});
+}
 
-// Disable all core blocks except what we need as inner blocks
-// resources/js/editor.js handles hiding the inner blocks at the top level
-add_action('allowed_block_types_all', __NAMESPACE__ . '\\list_allowed', 100, 2);
 
-// add blocks to the allowed list via filter
-add_filter('badegg_block_types_allow', function($allowed){
+function allowed_list($allowed){
     return array_merge($allowed, [
         // 'core/categories',
     ]);
-});
+}
 
-// Add the badegg block category
-add_filter( 'block_categories_all' , function ( $categories ) {
+function add_categories( $categories ) {
 
         // Adding a new category.
         $categories = array_merge([
@@ -40,10 +93,9 @@ add_filter( 'block_categories_all' , function ( $categories ) {
         ], $categories);
 
         return $categories;
-});
+}
 
-// Auto register WP blocks
-add_action('init', function () {
+function auto_register() {
     $blocks = glob(get_theme_file_path('resources/views/blocks/*/block.json'));
 
     foreach ($blocks as $block_json) {
@@ -120,7 +172,7 @@ add_action('init', function () {
 
         register_block_type($block_json, $props);
     }
-});
+}
 
 function list_inner()
 {

app/setup.php

@@ -168,9 +168,8 @@ function cors() {
 }
 
 add_action('after_setup_theme', function(){
-  $image_srcset = new Utilities\ImageSrcset;
-  $image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
-  add_image_size('lazy', 50, 50);
-  add_image_size('hero', 1920, 1080, true);
+    $image_srcset = new Utilities\ImageSrcset;
+    $image_srcset->add(['name' => 'hero', 'width' => 1920, 'height' => 1080]);
+    add_image_size('lazy', 50, 50);
+    add_image_size('hero', 1920, 1080, true);
 });
-

resources/css/global/_typography.scss

@@ -129,7 +129,7 @@ ol {
 }
 
 hr {
-  margin: 1.5em auto 2em;
+  margin: 2em auto;
   height: 0;
   border: 0 solid colours.$grey-light;
   border-width: spacing.$borderThin 0 0;

resources/css/global/framework/_spacing.scss

@@ -26,6 +26,11 @@
   }
 }
 
+figure {
+  margin: 0;
+  padding: 0;
+}
+
 .container {
   width: calc(100% - spacing.$innerMedium * 2);
   margin: auto;

resources/css/global/variables/_spacing.scss

@@ -30,6 +30,11 @@ $innerSmall:            1.000em;
 $innerSmaller:          0.750em;
 $innerSmallest:         0.500em;
 
+$gap:                   1em;
+$gapSmall:              0.5em;
+$gapMedium:             1em;
+$gapLarge:              2em;
+
 $borderRadiusLargeer:   1.500em;
 $borderRadiusLarge:     1.000em;
 $borderRadius:          1.000em;

resources/js/blocks/components/BackgroundImage.jsx

@@ -21,6 +21,7 @@ export default function BackgroundImage({
   background_position = 'center',
   background_fixed = false,
   background_opacity = 70,
+  disableLazyBG = false,
 }) {
 
   if (background_url) {
@@ -37,7 +38,7 @@ export default function BackgroundImage({
       style: styles,
     };
 
-    if(background_lazy) {
+    if(background_lazy && !disableLazyBG) {
       attributes['data-bg'] = background_url;
       attributes.style.backgroundImage = `url(${background_url_lazy})`;
       attributes.className += ' lazy-bg';

resources/js/blocks/components/BlockSettings.jsx

@@ -150,33 +150,38 @@ export default function BlockSettings({ attributes, setAttributes }) {
                   slug = selected.slug;
                 }
 
-                setAttributes( {
+                let colourAttributes = {
                   background_colour: slug,
                   background_hex: hex,
-                });
+                };
+
+                if(!slug || [0, '0', 'white', 'black'].includes(slug)) {
+                  colourAttributes.background_tint = '0';
+                }
+
+                setAttributes( colourAttributes );
 
               } }
             />
 
             { 'background_colour' in attributes && attributes.background_colour && ![0, '0', 'white', 'black'].includes(attributes.background_colour) ? (
-              <>
-                <SelectControl
-                  label={ __("Tint", "badegg") }
-                  value={ background_tint }
-                  options={ configOptions.tints }
-                  onChange={ (value) => setAttributes({ background_tint: value }) }
-                  __next40pxDefaultSize={ true }
-                  __nextHasNoMarginBottom={ true }
-                />
-                <ToggleControl
-                  label={ __('Text Contrast', 'badegg') }
-                  checked={ background_contrast }
-                  onChange={(value) => setAttributes({ background_contrast: value }) }
-                  __nextHasNoMarginBottom
-                />
-              </>
+              <SelectControl
+                label={ __("Tint", "badegg") }
+                value={ background_tint }
+                options={ configOptions.tints }
+                onChange={ (value) => setAttributes({ background_tint: value }) }
+                __next40pxDefaultSize={ true }
+                __nextHasNoMarginBottom={ true }
+              />
             ) : null }
 
+            <ToggleControl
+              label={ __('Text Contrast', 'badegg') }
+              checked={ background_contrast }
+              onChange={(value) => setAttributes({ background_contrast: value }) }
+              __nextHasNoMarginBottom
+            />
+
             { background_image != 0 && (
               <>
                 <ToggleControl

resources/js/blocks/lib/classNames.js

@@ -29,7 +29,7 @@ export function sectionClassNames(attributes, defaultClasses = '', extraClasses
   if('padding_bottom'in attributes && !attributes.padding_bottom)
     classNames.push('section-zero-bottom');
 
-  if('background_colour' in attributes && attributes.background_colour) {
+  if('background_hex' in attributes && attributes.background_hex) {
     let bg = `bg-${ attributes.background_colour }`;
 
     if(

resources/js/editor.js

@@ -17,4 +17,11 @@ domReady(() => {
       'badegg/restrict-parent-blocks',
       restrictEditorParentBlocks
   );
+
+  // find blocks styles
+  wp.blocks.getBlockTypes().forEach((block) => {
+      if (_.isArray(block['styles'])) {
+          console.log('editor.js ' + block.name, _.pluck(block['styles'], 'name'));
+      }
+  });
 });

resources/json/block-core-whitelist.json

@@ -2,8 +2,6 @@
   "core/separator",
   "core/spacer",
 
-  "core/cover",
-  "core/file",
   "core/gallery",
   "core/image",
   "core/media-text",
@@ -18,9 +16,8 @@
   "core/list-item",
   "core/missing",
   "core/paragraph",
-  "core/preformatted",
-  "core/pullquote",
   "core/quote",
+  "core/pullquote",
   "core/table",
   "core/verse"
 ]

resources/json/block-parents.json

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

resources/views/blocks/article/index.jsx

@@ -47,7 +47,7 @@ registerBlockType(metadata.name, {
   },
   save({ attributes }) {
     const blockProps = useBlockProps.save();
-    blockProps.className = sectionClassNames(attributes, blockProps.className, [ 'wysiwyg' ] ).join(' ');
+    blockProps.className = sectionClassNames(attributes, blockProps.className ).join(' ');
 
     return (
       <div { ...blockProps }>

resources/views/blocks/article/style.scss

@@ -0,0 +1,139 @@
+
+@use "sass:math";
+@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;
+  container-type: inline-size;
+
+  figure {
+    img {
+      display: block;
+    }
+  }
+
+  .wp-block {
+    &-image,
+    &-audio,
+    &-media-text,
+    &-quote,
+    &-pullquote {
+      margin: spacing.$innerMedium auto;
+    }
+  }
+
+  .is-layout-flex {
+    display: flex;
+    flex-wrap: wrap;
+    gap: spacing.$gap;
+  }
+
+  @for $i from 2 through 8 {
+    .columns-#{$i} > * { width: calc(math.div(1, $i) * 100% - (spacing.$gap - math.div(spacing.$gap, $i))); }
+  }
+
+  .wp-block-image {
+    &.is-style-rounded {
+      img {
+        border-radius: 9999px;
+      }
+    }
+
+    @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) {
+      .alignleft {
+        float: left;
+        margin-right: spacing.$innerMedium;
+      }
+
+      .alignright {
+        float: right;
+        margin-left: spacing.$innerMedium;
+      }
+    }
+  }
+
+  .is-image-fill-element,
+  .is-cropped {
+    figure {
+      display: flex;
+      flex-direction: column;
+      margin: 0;
+
+      img {
+        flex: 1 0 0%;
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+        aspect-ratio: 1;
+      }
+    }
+  }
+
+  .wp-block-media-text {
+    display: grid;
+    gap: spacing.$innerMedium;
+
+    @container BadEggArticle (max-width: #{breakpoints.$screen-xs-max}) {
+      display: block;
+    }
+  }
+
+  blockquote {
+    text-align: center;
+    font-size: 1.25em;
+    padding: 0;
+    margin: spacing.$innerLarge auto;
+
+    p {
+      font-family: serif;
+      font-style: italic;
+      margin: 0 0 0.25em;
+    }
+
+    cite {
+      font-size: 0.6em;
+      font-family: fonts.$font;
+      font-style: normal;
+    }
+
+    &:not(.is-style-plain) {
+      position: relative;
+      padding: 1em 0;
+      margin: 2em auto;
+
+      * {
+        position: relative;
+        z-index: 3;
+      }
+
+      &::before,
+      &::after {
+        position: absolute;
+        z-index: 2;
+        left: calc(50% - 0.5em);
+        display: block;
+        text-align: center;
+        font-size: 1.5em;
+        width: 1em;
+      }
+
+      &::before {
+        content: '\201C';
+        top: -0.25em;
+      }
+
+      &::after {
+        content: '\201D';
+        bottom: -1em;
+      }
+    }
+
+    @container BadEggArticle (min-width: #{breakpoints.$screen-sm}) {
+      font-size: 1.5em;
+    }
+  }
+}
+