article block: resolve parent/inner focus toggle issue

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 className={ sectionClassNames(attributes, 'wp-block-badegg-article').join(' ') }>
         <div { ...blockProps }>
-        <div className={ containerClassNames(attributes, [ 'wysiwyg' ]).join(' ') }>
           <InnerBlocks.Content />
         </div>