article block: resolve parent/inner focus toggle issue

app/blocks.php

@@ -282,6 +282,7 @@ function core_image_modified($content, $block)
     // get image data
     $imageID = @$block['attrs']['id'];
     $lazy = wp_get_attachment_image_src($imageID, 'lazy');
+    $specifiedSize = @wp_get_attachment_image_src($imageID, $block['sizeSlug']);
     $large = wp_get_attachment_image_src($imageID, '2048x2048');
 
     // create lightbox link node
@@ -305,6 +306,11 @@ function core_image_modified($content, $block)
         $image->setAttribute('data-srcset', $srcset);
         $image->setAttribute('class', $class . ' lazy');
 
+        if($specifiedSize) {
+            $image->setAttribute('width', $specifiedSize[1]);
+            $image->setAttribute('height', $specifiedSize[2]);
+        }
+
         // clone lightbox link
         $linkClone = $link->cloneNode();
 
@@ -319,5 +325,4 @@ function core_image_modified($content, $block)
     }
 
     return $dom->saveHTML($figures[0]);
-
 }

resources/js/blocks/lib/classNames.js

@@ -5,7 +5,7 @@ export function containerClassNames(attributes, extraClasses = [])
     'container',
   ];
 
-  if('container_width' in attributes)
+  if('container_width' in attributes && !['', '0'].includes(attributes.container_width))
     classNames.push(`container-${attributes.container_width}`);
 
   if('alignment' in attributes)

resources/views/blocks/article/editor.scss

@@ -1,8 +1,31 @@
 @use "../../../css/global/variables/spacing";
 
 .wp-block-badegg-article {
+  position: relative;
+
   .wp-block-pullquote {
     padding: 0;
     margin: spacing.$innerLarge auto;
   }
+
+  .badegg-article-select-parent {
+    appearance: none;
+    display: block;
+    position: absolute;
+    inset: 0;
+    background: transparent;
+    border: none;
+  }
+
+  .block-editor-block-list {
+    &__layout {
+      > *:first-child {
+        margin-top: 0;
+      }
+
+      > *:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
 }

resources/views/blocks/article/index.jsx

@@ -15,18 +15,28 @@ import BackgroundImage from '../../../js/blocks/components/BackgroundImage';
 import BlockSettings from '../../../js/blocks/components/BlockSettings';
 
 registerBlockType(metadata.name, {
-  edit({ attributes, setAttributes }) {
+  edit({ attributes, setAttributes, clientId }) {
     const blockProps = useBlockProps();
-    blockProps.className = sectionClassNames(attributes, blockProps.className).join(' ');
+
+    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
 
     return (
-      <div { ...blockProps }>
+      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
         <BlockSettings
           attributes={ attributes }
           setAttributes={ setAttributes }
         />
 
-        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
+        <button
+          className="badegg-article-select-parent"
+          onClick={() => {
+            wp.data.dispatch('core/block-editor').selectBlock(clientId);
+          }}
+        >
+          <span className="visually-hidden">Select Block</span>
+        </button>
+
+        <div { ...blockProps }>
           <InnerBlocks
             allowedBlocks={ allowedBlocks }
             defaultBlock={
@@ -47,11 +57,11 @@ registerBlockType(metadata.name, {
   },
   save({ attributes }) {
     const blockProps = useBlockProps.save();
-    blockProps.className = sectionClassNames(attributes, blockProps.className ).join(' ');
+    blockProps.className = containerClassNames(attributes, [ 'wysiwyg' ]).join(' ');
 
     return (
-      <div { ...blockProps }>
-        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
+      <div className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
+        <div { ...blockProps }>
           <InnerBlocks.Content />
         </div>