@wordpress/block-library 7.17.0 → 7.19.0

package/build-module/group/edit.js

@@ -3,25 +3,79 @@ import { createElement, Fragment } from "@wordpress/element";
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { InnerBlocks, useBlockProps, InspectorControls, useInnerBlocksProps, useSetting, store as blockEditorStore } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-const htmlElementMessages = {
-  header: __('The <header> element should represent introductory content, typically a group of introductory or navigational aids.'),
-  main: __('The <main> element should be used for the primary content of your document only. '),
-  section: __("The <section> element should represent a standalone portion of the document that can't be better represented by another element."),
-  article: __('The <article> element should represent a self contained, syndicatable portion of the document.'),
-  aside: __("The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."),
-  footer: __('The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).')
-};
+import { useCallback } from '@wordpress/element';
+/**
+ * Internal dependencies
+ */
+
+import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
+/**
+ * Render inspector controls for the Group block.
+ *
+ * @param {Object}   props                 Component props.
+ * @param {string}   props.tagName         The HTML tag name.
+ * @param {Function} props.onSelectTagName onChange function for the SelectControl.
+ *
+ * @return {JSX.Element}                The control group.
+ */
+
+function GroupEditControls(_ref) {
+  let {
+    tagName,
+    onSelectTagName
+  } = _ref;
+  const htmlElementMessages = {
+    header: __('The <header> element should represent introductory content, typically a group of introductory or navigational aids.'),
+    main: __('The <main> element should be used for the primary content of your document only. '),
+    section: __("The <section> element should represent a standalone portion of the document that can't be better represented by another element."),
+    article: __('The <article> element should represent a self-contained, syndicatable portion of the document.'),
+    aside: __("The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."),
+    footer: __('The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).')
+  };
+  return createElement(InspectorControls, {
+    __experimentalGroup: "advanced"
+  }, createElement(SelectControl, {
+    label: __('HTML element'),
+    options: [{
+      label: __('Default (<div>)'),
+      value: 'div'
+    }, {
+      label: '<header>',
+      value: 'header'
+    }, {
+      label: '<main>',
+      value: 'main'
+    }, {
+      label: '<section>',
+      value: 'section'
+    }, {
+      label: '<article>',
+      value: 'article'
+    }, {
+      label: '<aside>',
+      value: 'aside'
+    }, {
+      label: '<footer>',
+      value: 'footer'
+    }],
+    value: tagName,
+    onChange: onSelectTagName,
+    help: htmlElementMessages[tagName]
+  }));
+}
 
-function GroupEdit(_ref) {
+function GroupEdit(_ref2) {
   let {
     attributes,
+    name,
     setAttributes,
-    clientId
-  } = _ref;
+    clientId,
+    __unstableLayoutClassNames: layoutClassNames
+  } = _ref2;
   const {
     hasInnerBlocks,
     themeSupportsLayout
@@ -38,12 +92,13 @@ function GroupEdit(_ref) {
       themeSupportsLayout: (_getSettings = getSettings()) === null || _getSettings === void 0 ? void 0 : _getSettings.supportsLayout
     };
   }, [clientId]);
-  const defaultLayout = useSetting('layout') || {};
   const {
     tagName: TagName = 'div',
     templateLock,
     layout = {}
-  } = attributes;
+  } = attributes; // Layout settings.
+
+  const defaultLayout = useSetting('layout') || {};
   const usedLayout = !(layout !== null && layout !== void 0 && layout.type) ? { ...defaultLayout,
     ...layout,
     type: 'default'
@@ -53,47 +108,45 @@ function GroupEdit(_ref) {
   const {
     type = 'default'
   } = usedLayout;
-  const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
-  const blockProps = useBlockProps();
+  const layoutSupportEnabled = themeSupportsLayout || type === 'flex'; // Hooks.
+
+  const blockProps = useBlockProps({
+    className: !layoutSupportEnabled ? layoutClassNames : null
+  });
+  const [showPlaceholder, setShowPlaceholder] = useShouldShowPlaceHolder({
+    attributes,
+    usedLayoutType: usedLayout === null || usedLayout === void 0 ? void 0 : usedLayout.type,
+    hasInnerBlocks
+  });
   const innerBlocksProps = useInnerBlocksProps(layoutSupportEnabled ? blockProps : {
     className: 'wp-block-group__inner-container'
   }, {
     templateLock,
     renderAppender: hasInnerBlocks ? undefined : InnerBlocks.ButtonBlockAppender,
-    __experimentalLayout: layoutSupportEnabled ? usedLayout : undefined
+    __experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
+    __unstableDisableLayoutClassNames: !layoutSupportEnabled
   });
-  return createElement(Fragment, null, createElement(InspectorControls, {
-    __experimentalGroup: "advanced"
-  }, createElement(SelectControl, {
-    label: __('HTML element'),
-    options: [{
-      label: __('Default (<div>)'),
-      value: 'div'
-    }, {
-      label: '<header>',
-      value: 'header'
-    }, {
-      label: '<main>',
-      value: 'main'
-    }, {
-      label: '<section>',
-      value: 'section'
-    }, {
-      label: '<article>',
-      value: 'article'
-    }, {
-      label: '<aside>',
-      value: 'aside'
-    }, {
-      label: '<footer>',
-      value: 'footer'
-    }],
-    value: TagName,
-    onChange: value => setAttributes({
+  const {
+    selectBlock
+  } = useDispatch(blockEditorStore);
+  const updateSelection = useCallback(newClientId => selectBlock(newClientId, -1), [selectBlock]);
+
+  const selectVariation = nextVariation => {
+    setAttributes(nextVariation.attributes);
+    updateSelection(clientId);
+    setShowPlaceholder(false);
+  };
+
+  return createElement(Fragment, null, createElement(GroupEditControls, {
+    tagName: TagName,
+    onSelectTagName: value => setAttributes({
       tagName: value
-    }),
-    help: htmlElementMessages[TagName]
-  })), layoutSupportEnabled && createElement(TagName, innerBlocksProps), !layoutSupportEnabled && createElement(TagName, blockProps, createElement("div", innerBlocksProps)));
+    })
+  }), showPlaceholder && createElement(GroupPlaceHolder, {
+    clientId: clientId,
+    name: name,
+    onSelect: selectVariation
+  }), layoutSupportEnabled && !showPlaceholder && createElement(TagName, innerBlocksProps), !layoutSupportEnabled && !showPlaceholder && createElement(TagName, blockProps, createElement("div", innerBlocksProps)));
 }
 
 export default GroupEdit;

package/build-module/group/edit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/group/edit.js"],"names":["useSelect","InnerBlocks","useBlockProps","InspectorControls","useInnerBlocksProps","useSetting","store","blockEditorStore","SelectControl","__","htmlElementMessages","header","main","section","article","aside","footer","GroupEdit","attributes","setAttributes","clientId","hasInnerBlocks","themeSupportsLayout","select","getBlock","getSettings","block","innerBlocks","length","supportsLayout","defaultLayout","tagName","TagName","templateLock","layout","usedLayout","type","layoutSupportEnabled","blockProps","innerBlocksProps","className","renderAppender","undefined","ButtonBlockAppender","__experimentalLayout","label","value"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\n\nimport {\n\tInnerBlocks,\n\tuseBlockProps,\n\tInspectorControls,\n\tuseInnerBlocksProps,\n\tuseSetting,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { SelectControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nconst htmlElementMessages = {\n\theader: __(\n\t\t'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'\n\t),\n\tmain: __(\n\t\t'The <main> element should be used for the primary content of your document only. '\n\t),\n\tsection: __(\n\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t),\n\tarticle: __(\n\t\t'The <article> element should represent a self contained, syndicatable portion of the document.'\n\t),\n\taside: __(\n\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t),\n\tfooter: __(\n\t\t'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'\n\t),\n};\n\nfunction GroupEdit( { attributes, setAttributes, clientId } ) {\n\tconst { hasInnerBlocks, themeSupportsLayout } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock, getSettings } = select( blockEditorStore );\n\t\t\tconst block = getBlock( clientId );\n\t\t\treturn {\n\t\t\t\thasInnerBlocks: !! ( block && block.innerBlocks.length ),\n\t\t\t\tthemeSupportsLayout: getSettings()?.supportsLayout,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst defaultLayout = useSetting( 'layout' ) || {};\n\tconst { tagName: TagName = 'div', templateLock, layout = {} } = attributes;\n\tconst usedLayout = ! layout?.type\n\t\t? { ...defaultLayout, ...layout, type: 'default' }\n\t\t: { ...defaultLayout, ...layout };\n\tconst { type = 'default' } = usedLayout;\n\tconst layoutSupportEnabled = themeSupportsLayout || type === 'flex';\n\n\tconst blockProps = useBlockProps();\n\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\tlayoutSupportEnabled\n\t\t\t? blockProps\n\t\t\t: { className: 'wp-block-group__inner-container' },\n\t\t{\n\t\t\ttemplateLock,\n\t\t\trenderAppender: hasInnerBlocks\n\t\t\t\t? undefined\n\t\t\t\t: InnerBlocks.ButtonBlockAppender,\n\t\t\t__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,\n\t\t}\n\t);\n\n\treturn (\n\t\t<>\n\t\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t\t<SelectControl\n\t\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\t\toptions={ [\n\t\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t\t{ label: '<header>', value: 'header' },\n\t\t\t\t\t\t{ label: '<main>', value: 'main' },\n\t\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t\t{ label: '<article>', value: 'article' },\n\t\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t\t{ label: '<footer>', value: 'footer' },\n\t\t\t\t\t] }\n\t\t\t\t\tvalue={ TagName }\n\t\t\t\t\tonChange={ ( value ) =>\n\t\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t\t}\n\t\t\t\t\thelp={ htmlElementMessages[ TagName ] }\n\t\t\t\t/>\n\t\t\t</InspectorControls>\n\t\t\t{ layoutSupportEnabled && <TagName { ...innerBlocksProps } /> }\n\t\t\t{ /* Ideally this is not needed but it's there for backward compatibility reason\n\t\t\t\tto keep this div for themes that might rely on its presence */ }\n\t\t\t{ ! layoutSupportEnabled && (\n\t\t\t\t<TagName { ...blockProps }>\n\t\t\t\t\t<div { ...innerBlocksProps } />\n\t\t\t\t</TagName>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default GroupEdit;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/group/edit.js"],"names":["useDispatch","useSelect","InnerBlocks","useBlockProps","InspectorControls","useInnerBlocksProps","useSetting","store","blockEditorStore","SelectControl","__","useCallback","GroupPlaceHolder","useShouldShowPlaceHolder","GroupEditControls","tagName","onSelectTagName","htmlElementMessages","header","main","section","article","aside","footer","label","value","GroupEdit","attributes","name","setAttributes","clientId","__unstableLayoutClassNames","layoutClassNames","hasInnerBlocks","themeSupportsLayout","select","getBlock","getSettings","block","innerBlocks","length","supportsLayout","TagName","templateLock","layout","defaultLayout","usedLayout","type","layoutSupportEnabled","blockProps","className","showPlaceholder","setShowPlaceholder","usedLayoutType","innerBlocksProps","renderAppender","undefined","ButtonBlockAppender","__experimentalLayout","__unstableDisableLayoutClassNames","selectBlock","updateSelection","newClientId","selectVariation","nextVariation"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport {\n\tInnerBlocks,\n\tuseBlockProps,\n\tInspectorControls,\n\tuseInnerBlocksProps,\n\tuseSetting,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport { SelectControl } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';\n\n/**\n * Render inspector controls for the Group block.\n *\n * @param {Object}   props                 Component props.\n * @param {string}   props.tagName         The HTML tag name.\n * @param {Function} props.onSelectTagName onChange function for the SelectControl.\n *\n * @return {JSX.Element}                The control group.\n */\nfunction GroupEditControls( { tagName, onSelectTagName } ) {\n\tconst htmlElementMessages = {\n\t\theader: __(\n\t\t\t'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'\n\t\t),\n\t\tmain: __(\n\t\t\t'The <main> element should be used for the primary content of your document only. '\n\t\t),\n\t\tsection: __(\n\t\t\t\"The <section> element should represent a standalone portion of the document that can't be better represented by another element.\"\n\t\t),\n\t\tarticle: __(\n\t\t\t'The <article> element should represent a self-contained, syndicatable portion of the document.'\n\t\t),\n\t\taside: __(\n\t\t\t\"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content.\"\n\t\t),\n\t\tfooter: __(\n\t\t\t'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'\n\t\t),\n\t};\n\treturn (\n\t\t<InspectorControls __experimentalGroup=\"advanced\">\n\t\t\t<SelectControl\n\t\t\t\tlabel={ __( 'HTML element' ) }\n\t\t\t\toptions={ [\n\t\t\t\t\t{ label: __( 'Default (<div>)' ), value: 'div' },\n\t\t\t\t\t{ label: '<header>', value: 'header' },\n\t\t\t\t\t{ label: '<main>', value: 'main' },\n\t\t\t\t\t{ label: '<section>', value: 'section' },\n\t\t\t\t\t{ label: '<article>', value: 'article' },\n\t\t\t\t\t{ label: '<aside>', value: 'aside' },\n\t\t\t\t\t{ label: '<footer>', value: 'footer' },\n\t\t\t\t] }\n\t\t\t\tvalue={ tagName }\n\t\t\t\tonChange={ onSelectTagName }\n\t\t\t\thelp={ htmlElementMessages[ tagName ] }\n\t\t\t/>\n\t\t</InspectorControls>\n\t);\n}\n\nfunction GroupEdit( {\n\tattributes,\n\tname,\n\tsetAttributes,\n\tclientId,\n\t__unstableLayoutClassNames: layoutClassNames,\n} ) {\n\tconst { hasInnerBlocks, themeSupportsLayout } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock, getSettings } = select( blockEditorStore );\n\t\t\tconst block = getBlock( clientId );\n\t\t\treturn {\n\t\t\t\thasInnerBlocks: !! ( block && block.innerBlocks.length ),\n\t\t\t\tthemeSupportsLayout: getSettings()?.supportsLayout,\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\n\tconst { tagName: TagName = 'div', templateLock, layout = {} } = attributes;\n\n\t// Layout settings.\n\tconst defaultLayout = useSetting( 'layout' ) || {};\n\tconst usedLayout = ! layout?.type\n\t\t? { ...defaultLayout, ...layout, type: 'default' }\n\t\t: { ...defaultLayout, ...layout };\n\tconst { type = 'default' } = usedLayout;\n\tconst layoutSupportEnabled = themeSupportsLayout || type === 'flex';\n\n\t// Hooks.\n\tconst blockProps = useBlockProps( {\n\t\tclassName: ! layoutSupportEnabled ? layoutClassNames : null,\n\t} );\n\tconst [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {\n\t\tattributes,\n\t\tusedLayoutType: usedLayout?.type,\n\t\thasInnerBlocks,\n\t} );\n\tconst innerBlocksProps = useInnerBlocksProps(\n\t\tlayoutSupportEnabled\n\t\t\t? blockProps\n\t\t\t: { className: 'wp-block-group__inner-container' },\n\t\t{\n\t\t\ttemplateLock,\n\t\t\trenderAppender: hasInnerBlocks\n\t\t\t\t? undefined\n\t\t\t\t: InnerBlocks.ButtonBlockAppender,\n\t\t\t__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,\n\t\t\t__unstableDisableLayoutClassNames: ! layoutSupportEnabled,\n\t\t}\n\t);\n\n\tconst { selectBlock } = useDispatch( blockEditorStore );\n\tconst updateSelection = useCallback(\n\t\t( newClientId ) => selectBlock( newClientId, -1 ),\n\t\t[ selectBlock ]\n\t);\n\tconst selectVariation = ( nextVariation ) => {\n\t\tsetAttributes( nextVariation.attributes );\n\t\tupdateSelection( clientId );\n\t\tsetShowPlaceholder( false );\n\t};\n\n\treturn (\n\t\t<>\n\t\t\t<GroupEditControls\n\t\t\t\ttagName={ TagName }\n\t\t\t\tonSelectTagName={ ( value ) =>\n\t\t\t\t\tsetAttributes( { tagName: value } )\n\t\t\t\t}\n\t\t\t/>\n\t\t\t{ showPlaceholder && (\n\t\t\t\t<GroupPlaceHolder\n\t\t\t\t\tclientId={ clientId }\n\t\t\t\t\tname={ name }\n\t\t\t\t\tonSelect={ selectVariation }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\t{ layoutSupportEnabled && ! showPlaceholder && (\n\t\t\t\t<TagName { ...innerBlocksProps } />\n\t\t\t) }\n\t\t\t{ /* Ideally this is not needed but it's there for backward compatibility reason\n\t\t\t\tto keep this div for themes that might rely on its presence */ }\n\t\t\t{ ! layoutSupportEnabled && ! showPlaceholder && (\n\t\t\t\t<TagName { ...blockProps }>\n\t\t\t\t\t<div { ...innerBlocksProps } />\n\t\t\t\t</TagName>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\nexport default GroupEdit;\n"]}

package/build-module/group/index.js

@@ -53,6 +53,9 @@ const metadata = {
         blockGap: true
       }
     },
+    dimensions: {
+      minHeight: true
+    },
     __experimentalBorder: {
       color: true,
       radius: true,

package/build-module/group/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/group/index.js"],"names":["__","group","icon","initBlock","deprecated","edit","save","transforms","variations","name","metadata","settings","example","attributes","style","color","text","background","innerBlocks","customTextColor","fontSize","content","init"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAK,IAAIC,IAAlB,QAA8B,kBAA9B;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,qBAAtB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAWC,QAAjB;AAEA,SAASA,QAAT,EAAmBD,IAAnB;AAEA,OAAO,MAAME,QAAQ,GAAG;AACvBT,EAAAA,IADuB;AAEvBU,EAAAA,OAAO,EAAE;AACRC,IAAAA,UAAU,EAAE;AACXC,MAAAA,KAAK,EAAE;AACNC,QAAAA,KAAK,EAAE;AACNC,UAAAA,IAAI,EAAE,SADA;AAENC,UAAAA,UAAU,EAAE;AAFN;AADD;AADI,KADJ;AASRC,IAAAA,WAAW,EAAE,CACZ;AACCT,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,MAAF;AAHA;AAFb,KADY,EASZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,MAAF;AAHA;AAFb,KATY,EAiBZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,QAAF;AAHA;AAFb,KAjBY,EAyBZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,OAAF;AAHA;AAFb,KAzBY,EAiCZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,OAAF;AAHA;AAFb,KAjCY,EAyCZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,MAAF;AAHA;AAFb,KAzCY;AATL,GAFc;AA8DvBO,EAAAA,UA9DuB;AA+DvBF,EAAAA,IA/DuB;AAgEvBC,EAAAA,IAhEuB;AAiEvBF,EAAAA,UAjEuB;AAkEvBI,EAAAA;AAlEuB,CAAjB;AAqEP,OAAO,MAAMc,IAAI,GAAG,MAAMnB,SAAS,CAAE;AAAEM,EAAAA,IAAF;AAAQC,EAAAA,QAAR;AAAkBC,EAAAA;AAAlB,CAAF,CAA5B","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { group as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport deprecated from './deprecated';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\nimport variations from './variations';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tattributes: {\n\t\t\tstyle: {\n\t\t\t\tcolor: {\n\t\t\t\t\ttext: '#000000',\n\t\t\t\t\tbackground: '#ffffff',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tinnerBlocks: [\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#cf2e2e',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'One.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#ff6900',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Two.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#fcb900',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Three.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#00d084',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Four.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#0693e3',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Five.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#9b51e0',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Six.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t},\n\ttransforms,\n\tedit,\n\tsave,\n\tdeprecated,\n\tvariations,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/group/index.js"],"names":["__","group","icon","initBlock","deprecated","edit","save","transforms","variations","name","metadata","settings","example","attributes","style","color","text","background","innerBlocks","customTextColor","fontSize","content","init"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAK,IAAIC,IAAlB,QAA8B,kBAA9B;AAEA;AACA;AACA;;AACA,OAAOC,SAAP,MAAsB,qBAAtB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,IAAP,MAAiB,QAAjB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAEA,OAAOC,IAAP,MAAiB,QAAjB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAEA,MAAM;AAAEC,EAAAA;AAAF,IAAWC,QAAjB;AAEA,SAASA,QAAT,EAAmBD,IAAnB;AAEA,OAAO,MAAME,QAAQ,GAAG;AACvBT,EAAAA,IADuB;AAEvBU,EAAAA,OAAO,EAAE;AACRC,IAAAA,UAAU,EAAE;AACXC,MAAAA,KAAK,EAAE;AACNC,QAAAA,KAAK,EAAE;AACNC,UAAAA,IAAI,EAAE,SADA;AAENC,UAAAA,UAAU,EAAE;AAFN;AADD;AADI,KADJ;AASRC,IAAAA,WAAW,EAAE,CACZ;AACCT,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,MAAF;AAHA;AAFb,KADY,EASZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,MAAF;AAHA;AAFb,KATY,EAiBZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,QAAF;AAHA;AAFb,KAjBY,EAyBZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,OAAF;AAHA;AAFb,KAzBY,EAiCZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,OAAF;AAHA;AAFb,KAjCY,EAyCZ;AACCS,MAAAA,IAAI,EAAE,gBADP;AAECI,MAAAA,UAAU,EAAE;AACXM,QAAAA,eAAe,EAAE,SADN;AAEXC,QAAAA,QAAQ,EAAE,OAFC;AAGXC,QAAAA,OAAO,EAAErB,EAAE,CAAE,MAAF;AAHA;AAFb,KAzCY;AATL,GAFc;AA8DvBO,EAAAA,UA9DuB;AA+DvBF,EAAAA,IA/DuB;AAgEvBC,EAAAA,IAhEuB;AAiEvBF,EAAAA,UAjEuB;AAkEvBI,EAAAA;AAlEuB,CAAjB;AAqEP,OAAO,MAAMc,IAAI,GAAG,MAAMnB,SAAS,CAAE;AAAEM,EAAAA,IAAF;AAAQC,EAAAA,QAAR;AAAkBC,EAAAA;AAAlB,CAAF,CAA5B","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { group as icon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport initBlock from '../utils/init-block';\nimport deprecated from './deprecated';\nimport edit from './edit';\nimport metadata from './block.json';\nimport save from './save';\nimport transforms from './transforms';\nimport variations from './variations';\n\nconst { name } = metadata;\n\nexport { metadata, name };\n\nexport const settings = {\n\ticon,\n\texample: {\n\t\tattributes: {\n\t\t\tstyle: {\n\t\t\t\tcolor: {\n\t\t\t\t\ttext: '#000000',\n\t\t\t\t\tbackground: '#ffffff',\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\t\tinnerBlocks: [\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#cf2e2e',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'One.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#ff6900',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Two.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#fcb900',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Three.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#00d084',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Four.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#0693e3',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Five.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: 'core/paragraph',\n\t\t\t\tattributes: {\n\t\t\t\t\tcustomTextColor: '#9b51e0',\n\t\t\t\t\tfontSize: 'large',\n\t\t\t\t\tcontent: __( 'Six.' ),\n\t\t\t\t},\n\t\t\t},\n\t\t],\n\t},\n\ttransforms,\n\tedit,\n\tsave,\n\tdeprecated,\n\tvariations,\n};\n\nexport const init = () => initBlock( { name, metadata, settings } );\n"]}

package/build-module/group/placeholder.js

@@ -0,0 +1,154 @@
+import { createElement } from "@wordpress/element";
+
+/**
+ * WordPress dependencies
+ */
+import { useSelect } from '@wordpress/data';
+import { useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
+import { Path, SVG, Button, Placeholder } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+/**
+ * Returns a custom variation icon.
+ *
+ * @param {string} name The block variation name.
+ *
+ * @return {JSX.Element} The SVG element.
+ */
+
+const getGroupPlaceholderIcons = function () {
+  let name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'group';
+  const icons = {
+    group: createElement(SVG, {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "44",
+      height: "32",
+      viewBox: "0 0 44 32"
+    }, createElement(Path, {
+      d: "M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z" // style="fill:#ccc"
+
+    })),
+    'group-row': createElement(SVG, {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "44",
+      height: "32",
+      viewBox: "0 0 44 32"
+    }, createElement(Path, {
+      d: "M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z" // style="fill:#ccc"
+
+    })),
+    'group-stack': createElement(SVG, {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "44",
+      height: "32",
+      viewBox: "0 0 44 32"
+    }, createElement(Path, {
+      d: "M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z" // style="fill:#ccc"
+
+    }))
+  };
+  return icons === null || icons === void 0 ? void 0 : icons[name];
+};
+/**
+ * A custom hook to tell the Group block whether to show the variation placeholder.
+ *
+ * @param {Object}  props                  Arguments to pass to hook.
+ * @param {Object}  [props.attributes]     The block's attributes.
+ * @param {string}  [props.usedLayoutType] The block's current layout type.
+ * @param {boolean} [props.hasInnerBlocks] Whether the block has inner blocks.
+ *
+ * @return {[boolean, Function]} A state value and setter function.
+ */
+
+
+export function useShouldShowPlaceHolder(_ref) {
+  let {
+    attributes = {
+      style: undefined,
+      backgroundColor: undefined,
+      textColor: undefined,
+      fontSize: undefined
+    },
+    usedLayoutType = '',
+    hasInnerBlocks = false
+  } = _ref;
+  const {
+    style,
+    backgroundColor,
+    textColor,
+    fontSize
+  } = attributes;
+  /*
+   * Shows the placeholder when no known styles are set,
+   * or when a non-default layout has been selected.
+   * Should the Group block support more style presets in the
+   * future, e.g., attributes.spacingSize, we can add them to the
+   * condition.
+   */
+
+  const [showPlaceholder, setShowPlaceholder] = useState(!hasInnerBlocks && !backgroundColor && !fontSize && !textColor && !style && usedLayoutType !== 'flex');
+  useEffect(() => {
+    if (!!hasInnerBlocks || !!backgroundColor || !!fontSize || !!textColor || !!style || usedLayoutType === 'flex') {
+      setShowPlaceholder(false);
+    }
+  }, [backgroundColor, fontSize, textColor, style, usedLayoutType, hasInnerBlocks]);
+  return [showPlaceholder, setShowPlaceholder];
+}
+/**
+ * Display group variations if none is selected.
+ *
+ * @param {Object}   props          Component props.
+ * @param {string}   props.name     The block's name.
+ * @param {Function} props.onSelect Function to set block's attributes.
+ *
+ * @return {JSX.Element}                The placeholder.
+ */
+
+function GroupPlaceHolder(_ref2) {
+  let {
+    name,
+    onSelect
+  } = _ref2;
+  const {
+    defaultVariation,
+    variations
+  } = useSelect(select => {
+    const {
+      getBlockVariations,
+      getDefaultBlockVariation
+    } = select(blocksStore);
+    return {
+      defaultVariation: getDefaultBlockVariation(name, 'block'),
+      variations: getBlockVariations(name, 'block') || []
+    };
+  }, [name]);
+  const blockProps = useBlockProps({
+    className: 'wp-block-group__placeholder'
+  });
+
+  const selectVariation = function () {
+    let nextVariation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultVariation;
+    return onSelect(nextVariation);
+  };
+
+  return createElement("div", blockProps, createElement(Placeholder, {
+    instructions: __('Group blocks together. Select a layout:')
+  }, createElement("ul", {
+    role: "list",
+    className: "wp-block-group-placeholder__variations",
+    "aria-label": __('Block variations')
+  }, variations.map(variation => createElement("li", {
+    key: variation.name
+  }, createElement(Button, {
+    variant: "tertiary",
+    icon: getGroupPlaceholderIcons(variation.name),
+    iconSize: 44,
+    onClick: () => selectVariation(variation),
+    className: "wp-block-group-placeholder__variation-button",
+    label: `${variation.title}: ${variation.description}`
+  }))))));
+}
+
+export default GroupPlaceHolder;
+//# sourceMappingURL=placeholder.js.map

package/build-module/group/placeholder.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["@wordpress/block-library/src/group/placeholder.js"],"names":["useSelect","useBlockProps","__","store","blocksStore","Path","SVG","Button","Placeholder","useState","useEffect","getGroupPlaceholderIcons","name","icons","group","useShouldShowPlaceHolder","attributes","style","undefined","backgroundColor","textColor","fontSize","usedLayoutType","hasInnerBlocks","showPlaceholder","setShowPlaceholder","GroupPlaceHolder","onSelect","defaultVariation","variations","select","getBlockVariations","getDefaultBlockVariation","blockProps","className","selectVariation","nextVariation","map","variation","title","description"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { useBlockProps } from '@wordpress/block-editor';\nimport { __ } from '@wordpress/i18n';\nimport { store as blocksStore } from '@wordpress/blocks';\nimport { Path, SVG, Button, Placeholder } from '@wordpress/components';\nimport { useState, useEffect } from '@wordpress/element';\n\n/**\n * Returns a custom variation icon.\n *\n * @param {string} name The block variation name.\n *\n * @return {JSX.Element} The SVG element.\n */\nconst getGroupPlaceholderIcons = ( name = 'group' ) => {\n\tconst icons = {\n\t\tgroup: (\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"44\"\n\t\t\t\theight=\"32\"\n\t\t\t\tviewBox=\"0 0 44 32\"\n\t\t\t>\n\t\t\t\t<Path\n\t\t\t\t\td=\"M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z\"\n\t\t\t\t\t// style=\"fill:#ccc\"\n\t\t\t\t/>\n\t\t\t</SVG>\n\t\t),\n\t\t'group-row': (\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"44\"\n\t\t\t\theight=\"32\"\n\t\t\t\tviewBox=\"0 0 44 32\"\n\t\t\t>\n\t\t\t\t<Path\n\t\t\t\t\td=\"M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z\"\n\t\t\t\t\t// style=\"fill:#ccc\"\n\t\t\t\t/>\n\t\t\t</SVG>\n\t\t),\n\t\t'group-stack': (\n\t\t\t<SVG\n\t\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\t\twidth=\"44\"\n\t\t\t\theight=\"32\"\n\t\t\t\tviewBox=\"0 0 44 32\"\n\t\t\t>\n\t\t\t\t<Path\n\t\t\t\t\td=\"M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z\"\n\t\t\t\t\t// style=\"fill:#ccc\"\n\t\t\t\t/>\n\t\t\t</SVG>\n\t\t),\n\t};\n\treturn icons?.[ name ];\n};\n\n/**\n * A custom hook to tell the Group block whether to show the variation placeholder.\n *\n * @param {Object}  props                  Arguments to pass to hook.\n * @param {Object}  [props.attributes]     The block's attributes.\n * @param {string}  [props.usedLayoutType] The block's current layout type.\n * @param {boolean} [props.hasInnerBlocks] Whether the block has inner blocks.\n *\n * @return {[boolean, Function]} A state value and setter function.\n */\nexport function useShouldShowPlaceHolder( {\n\tattributes = {\n\t\tstyle: undefined,\n\t\tbackgroundColor: undefined,\n\t\ttextColor: undefined,\n\t\tfontSize: undefined,\n\t},\n\tusedLayoutType = '',\n\thasInnerBlocks = false,\n} ) {\n\tconst { style, backgroundColor, textColor, fontSize } = attributes;\n\t/*\n\t * Shows the placeholder when no known styles are set,\n\t * or when a non-default layout has been selected.\n\t * Should the Group block support more style presets in the\n\t * future, e.g., attributes.spacingSize, we can add them to the\n\t * condition.\n\t */\n\tconst [ showPlaceholder, setShowPlaceholder ] = useState(\n\t\t! hasInnerBlocks &&\n\t\t\t! backgroundColor &&\n\t\t\t! fontSize &&\n\t\t\t! textColor &&\n\t\t\t! style &&\n\t\t\tusedLayoutType !== 'flex'\n\t);\n\n\tuseEffect( () => {\n\t\tif (\n\t\t\t!! hasInnerBlocks ||\n\t\t\t!! backgroundColor ||\n\t\t\t!! fontSize ||\n\t\t\t!! textColor ||\n\t\t\t!! style ||\n\t\t\tusedLayoutType === 'flex'\n\t\t) {\n\t\t\tsetShowPlaceholder( false );\n\t\t}\n\t}, [\n\t\tbackgroundColor,\n\t\tfontSize,\n\t\ttextColor,\n\t\tstyle,\n\t\tusedLayoutType,\n\t\thasInnerBlocks,\n\t] );\n\n\treturn [ showPlaceholder, setShowPlaceholder ];\n}\n\n/**\n * Display group variations if none is selected.\n *\n * @param {Object}   props          Component props.\n * @param {string}   props.name     The block's name.\n * @param {Function} props.onSelect Function to set block's attributes.\n *\n * @return {JSX.Element}                The placeholder.\n */\nfunction GroupPlaceHolder( { name, onSelect } ) {\n\tconst { defaultVariation, variations } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlockVariations, getDefaultBlockVariation } =\n\t\t\t\tselect( blocksStore );\n\t\t\treturn {\n\t\t\t\tdefaultVariation: getDefaultBlockVariation( name, 'block' ),\n\t\t\t\tvariations: getBlockVariations( name, 'block' ) || [],\n\t\t\t};\n\t\t},\n\t\t[ name ]\n\t);\n\tconst blockProps = useBlockProps( {\n\t\tclassName: 'wp-block-group__placeholder',\n\t} );\n\tconst selectVariation = ( nextVariation = defaultVariation ) =>\n\t\tonSelect( nextVariation );\n\n\treturn (\n\t\t<div { ...blockProps }>\n\t\t\t<Placeholder\n\t\t\t\tinstructions={ __( 'Group blocks together. Select a layout:' ) }\n\t\t\t>\n\t\t\t\t{ /*\n\t\t\t\t * Taken from BlockVariationPicker component.\n\t\t\t\t * Disable reason: The `list` ARIA role is redundant but\n\t\t\t\t * Safari+VoiceOver won't announce the list otherwise.\n\t\t\t\t */\n\t\t\t\t/* eslint-disable jsx-a11y/no-redundant-roles */ }\n\t\t\t\t<ul\n\t\t\t\t\trole=\"list\"\n\t\t\t\t\tclassName=\"wp-block-group-placeholder__variations\"\n\t\t\t\t\taria-label={ __( 'Block variations' ) }\n\t\t\t\t>\n\t\t\t\t\t{ variations.map( ( variation ) => (\n\t\t\t\t\t\t<li key={ variation.name }>\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\ticon={ getGroupPlaceholderIcons(\n\t\t\t\t\t\t\t\t\tvariation.name\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\ticonSize={ 44 }\n\t\t\t\t\t\t\t\tonClick={ () => selectVariation( variation ) }\n\t\t\t\t\t\t\t\tclassName=\"wp-block-group-placeholder__variation-button\"\n\t\t\t\t\t\t\t\tlabel={ `${ variation.title }: ${ variation.description }` }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t) ) }\n\t\t\t\t</ul>\n\t\t\t\t{ /* eslint-enable jsx-a11y/no-redundant-roles */ }\n\t\t\t</Placeholder>\n\t\t</div>\n\t);\n}\n\nexport default GroupPlaceHolder;\n"]}

package/build-module/group/variations.js

@@ -13,7 +13,7 @@ const variations = [{
     }
   },
   isDefault: true,
-  scope: ['inserter', 'transform'],
+  scope: ['block', 'inserter', 'transform'],
   isActive: blockAttributes => {
     var _blockAttributes$layo, _blockAttributes$layo2, _blockAttributes$layo3;
 
@@ -30,7 +30,7 @@ const variations = [{
       flexWrap: 'nowrap'
     }
   },
-  scope: ['inserter', 'transform'],
+  scope: ['block', 'inserter', 'transform'],
   isActive: blockAttributes => {
     var _blockAttributes$layo4, _blockAttributes$layo5, _blockAttributes$layo6;
 
@@ -47,7 +47,7 @@ const variations = [{
       orientation: 'vertical'
     }
   },
-  scope: ['inserter', 'transform'],
+  scope: ['block', 'inserter', 'transform'],
   isActive: blockAttributes => {
     var _blockAttributes$layo7, _blockAttributes$layo8;
 

package/build-module/group/variations.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/block-library/src/group/variations.js"],"names":["__","_x","group","row","stack","variations","name","title","description","attributes","layout","type","isDefault","scope","isActive","blockAttributes","icon","flexWrap","orientation"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,EAAaC,EAAb,QAAuB,iBAAvB;AACA,SAASC,KAAT,EAAgBC,GAAhB,EAAqBC,KAArB,QAAkC,kBAAlC;AAEA,MAAMC,UAAU,GAAG,CAClB;AACCC,EAAAA,IAAI,EAAE,OADP;AAECC,EAAAA,KAAK,EAAEP,EAAE,CAAE,OAAF,CAFV;AAGCQ,EAAAA,WAAW,EAAER,EAAE,CAAE,+BAAF,CAHhB;AAICS,EAAAA,UAAU,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAV,GAJb;AAKCC,EAAAA,SAAS,EAAE,IALZ;AAMCC,EAAAA,KAAK,EAAE,CAAE,UAAF,EAAc,WAAd,CANR;AAOCC,EAAAA,QAAQ,EAAIC,eAAF;AAAA;;AAAA,WACT,CAAEA,eAAe,CAACL,MAAlB,IACA,2BAAEK,eAAe,CAACL,MAAlB,kDAAE,sBAAwBC,IAA1B,CADA,IAEA,2BAAAI,eAAe,CAACL,MAAhB,kFAAwBC,IAAxB,MAAiC,SAFjC,IAGA,2BAAAI,eAAe,CAACL,MAAhB,kFAAwBC,IAAxB,MAAiC,aAJxB;AAAA,GAPX;AAYCK,EAAAA,IAAI,EAAEd;AAZP,CADkB,EAelB;AACCI,EAAAA,IAAI,EAAE,WADP;AAECC,EAAAA,KAAK,EAAEN,EAAE,CAAE,KAAF,EAAS,wBAAT,CAFV;AAGCO,EAAAA,WAAW,EAAER,EAAE,CAAE,8BAAF,CAHhB;AAICS,EAAAA,UAAU,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,IAAI,EAAE,MAAR;AAAgBM,MAAAA,QAAQ,EAAE;AAA1B;AAAV,GAJb;AAKCJ,EAAAA,KAAK,EAAE,CAAE,UAAF,EAAc,WAAd,CALR;AAMCC,EAAAA,QAAQ,EAAIC,eAAF;AAAA;;AAAA,WACT,2BAAAA,eAAe,CAACL,MAAhB,kFAAwBC,IAAxB,MAAiC,MAAjC,KACE,4BAAEI,eAAe,CAACL,MAAlB,mDAAE,uBAAwBQ,WAA1B,KACD,2BAAAH,eAAe,CAACL,MAAhB,kFAAwBQ,WAAxB,MAAwC,YAFzC,CADS;AAAA,GANX;AAUCF,EAAAA,IAAI,EAAEb;AAVP,CAfkB,EA2BlB;AACCG,EAAAA,IAAI,EAAE,aADP;AAECC,EAAAA,KAAK,EAAEP,EAAE,CAAE,OAAF,CAFV;AAGCQ,EAAAA,WAAW,EAAER,EAAE,CAAE,4BAAF,CAHhB;AAICS,EAAAA,UAAU,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,IAAI,EAAE,MAAR;AAAgBO,MAAAA,WAAW,EAAE;AAA7B;AAAV,GAJb;AAKCL,EAAAA,KAAK,EAAE,CAAE,UAAF,EAAc,WAAd,CALR;AAMCC,EAAAA,QAAQ,EAAIC,eAAF;AAAA;;AAAA,WACT,2BAAAA,eAAe,CAACL,MAAhB,kFAAwBC,IAAxB,MAAiC,MAAjC,IACA,2BAAAI,eAAe,CAACL,MAAhB,kFAAwBQ,WAAxB,MAAwC,UAF/B;AAAA,GANX;AASCF,EAAAA,IAAI,EAAEZ;AATP,CA3BkB,CAAnB;AAwCA,eAAeC,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { group, row, stack } from '@wordpress/icons';\n\nconst variations = [\n\t{\n\t\tname: 'group',\n\t\ttitle: __( 'Group' ),\n\t\tdescription: __( 'Gather blocks in a container.' ),\n\t\tattributes: { layout: { type: 'constrained' } },\n\t\tisDefault: true,\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\t! blockAttributes.layout ||\n\t\t\t! blockAttributes.layout?.type ||\n\t\t\tblockAttributes.layout?.type === 'default' ||\n\t\t\tblockAttributes.layout?.type === 'constrained',\n\t\ticon: group,\n\t},\n\t{\n\t\tname: 'group-row',\n\t\ttitle: _x( 'Row', 'single horizontal line' ),\n\t\tdescription: __( 'Arrange blocks horizontally.' ),\n\t\tattributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\tblockAttributes.layout?.type === 'flex' &&\n\t\t\t( ! blockAttributes.layout?.orientation ||\n\t\t\t\tblockAttributes.layout?.orientation === 'horizontal' ),\n\t\ticon: row,\n\t},\n\t{\n\t\tname: 'group-stack',\n\t\ttitle: __( 'Stack' ),\n\t\tdescription: __( 'Arrange blocks vertically.' ),\n\t\tattributes: { layout: { type: 'flex', orientation: 'vertical' } },\n\t\tscope: [ 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\tblockAttributes.layout?.type === 'flex' &&\n\t\t\tblockAttributes.layout?.orientation === 'vertical',\n\t\ticon: stack,\n\t},\n];\n\nexport default variations;\n"]}
+{"version":3,"sources":["@wordpress/block-library/src/group/variations.js"],"names":["__","_x","group","row","stack","variations","name","title","description","attributes","layout","type","isDefault","scope","isActive","blockAttributes","icon","flexWrap","orientation"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,EAAT,EAAaC,EAAb,QAAuB,iBAAvB;AACA,SAASC,KAAT,EAAgBC,GAAhB,EAAqBC,KAArB,QAAkC,kBAAlC;AAEA,MAAMC,UAAU,GAAG,CAClB;AACCC,EAAAA,IAAI,EAAE,OADP;AAECC,EAAAA,KAAK,EAAEP,EAAE,CAAE,OAAF,CAFV;AAGCQ,EAAAA,WAAW,EAAER,EAAE,CAAE,+BAAF,CAHhB;AAICS,EAAAA,UAAU,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,IAAI,EAAE;AAAR;AAAV,GAJb;AAKCC,EAAAA,SAAS,EAAE,IALZ;AAMCC,EAAAA,KAAK,EAAE,CAAE,OAAF,EAAW,UAAX,EAAuB,WAAvB,CANR;AAOCC,EAAAA,QAAQ,EAAIC,eAAF;AAAA;;AAAA,WACT,CAAEA,eAAe,CAACL,MAAlB,IACA,2BAAEK,eAAe,CAACL,MAAlB,kDAAE,sBAAwBC,IAA1B,CADA,IAEA,2BAAAI,eAAe,CAACL,MAAhB,kFAAwBC,IAAxB,MAAiC,SAFjC,IAGA,2BAAAI,eAAe,CAACL,MAAhB,kFAAwBC,IAAxB,MAAiC,aAJxB;AAAA,GAPX;AAYCK,EAAAA,IAAI,EAAEd;AAZP,CADkB,EAelB;AACCI,EAAAA,IAAI,EAAE,WADP;AAECC,EAAAA,KAAK,EAAEN,EAAE,CAAE,KAAF,EAAS,wBAAT,CAFV;AAGCO,EAAAA,WAAW,EAAER,EAAE,CAAE,8BAAF,CAHhB;AAICS,EAAAA,UAAU,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,IAAI,EAAE,MAAR;AAAgBM,MAAAA,QAAQ,EAAE;AAA1B;AAAV,GAJb;AAKCJ,EAAAA,KAAK,EAAE,CAAE,OAAF,EAAW,UAAX,EAAuB,WAAvB,CALR;AAMCC,EAAAA,QAAQ,EAAIC,eAAF;AAAA;;AAAA,WACT,2BAAAA,eAAe,CAACL,MAAhB,kFAAwBC,IAAxB,MAAiC,MAAjC,KACE,4BAAEI,eAAe,CAACL,MAAlB,mDAAE,uBAAwBQ,WAA1B,KACD,2BAAAH,eAAe,CAACL,MAAhB,kFAAwBQ,WAAxB,MAAwC,YAFzC,CADS;AAAA,GANX;AAUCF,EAAAA,IAAI,EAAEb;AAVP,CAfkB,EA2BlB;AACCG,EAAAA,IAAI,EAAE,aADP;AAECC,EAAAA,KAAK,EAAEP,EAAE,CAAE,OAAF,CAFV;AAGCQ,EAAAA,WAAW,EAAER,EAAE,CAAE,4BAAF,CAHhB;AAICS,EAAAA,UAAU,EAAE;AAAEC,IAAAA,MAAM,EAAE;AAAEC,MAAAA,IAAI,EAAE,MAAR;AAAgBO,MAAAA,WAAW,EAAE;AAA7B;AAAV,GAJb;AAKCL,EAAAA,KAAK,EAAE,CAAE,OAAF,EAAW,UAAX,EAAuB,WAAvB,CALR;AAMCC,EAAAA,QAAQ,EAAIC,eAAF;AAAA;;AAAA,WACT,2BAAAA,eAAe,CAACL,MAAhB,kFAAwBC,IAAxB,MAAiC,MAAjC,IACA,2BAAAI,eAAe,CAACL,MAAhB,kFAAwBQ,WAAxB,MAAwC,UAF/B;AAAA,GANX;AASCF,EAAAA,IAAI,EAAEZ;AATP,CA3BkB,CAAnB;AAwCA,eAAeC,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __, _x } from '@wordpress/i18n';\nimport { group, row, stack } from '@wordpress/icons';\n\nconst variations = [\n\t{\n\t\tname: 'group',\n\t\ttitle: __( 'Group' ),\n\t\tdescription: __( 'Gather blocks in a container.' ),\n\t\tattributes: { layout: { type: 'constrained' } },\n\t\tisDefault: true,\n\t\tscope: [ 'block', 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\t! blockAttributes.layout ||\n\t\t\t! blockAttributes.layout?.type ||\n\t\t\tblockAttributes.layout?.type === 'default' ||\n\t\t\tblockAttributes.layout?.type === 'constrained',\n\t\ticon: group,\n\t},\n\t{\n\t\tname: 'group-row',\n\t\ttitle: _x( 'Row', 'single horizontal line' ),\n\t\tdescription: __( 'Arrange blocks horizontally.' ),\n\t\tattributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },\n\t\tscope: [ 'block', 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\tblockAttributes.layout?.type === 'flex' &&\n\t\t\t( ! blockAttributes.layout?.orientation ||\n\t\t\t\tblockAttributes.layout?.orientation === 'horizontal' ),\n\t\ticon: row,\n\t},\n\t{\n\t\tname: 'group-stack',\n\t\ttitle: __( 'Stack' ),\n\t\tdescription: __( 'Arrange blocks vertically.' ),\n\t\tattributes: { layout: { type: 'flex', orientation: 'vertical' } },\n\t\tscope: [ 'block', 'inserter', 'transform' ],\n\t\tisActive: ( blockAttributes ) =>\n\t\t\tblockAttributes.layout?.type === 'flex' &&\n\t\t\tblockAttributes.layout?.orientation === 'vertical',\n\t\ticon: stack,\n\t},\n];\n\nexport default variations;\n"]}

package/build-module/image/edit.native.js

@@ -784,7 +784,7 @@ export class ImageEdit extends Component {
     }))), createElement(BlockCaption, {
       clientId: this.props.clientId,
       isSelected: this.state.isCaptionSelected,
-      accessible: true,
+      accessible: !this.state.isCaptionSelected,
       accessibilityLabelCreator: this.accessibilityLabelCreator,
       onFocus: this.onFocusCaption,
       onBlur: this.props.onBlur // Always assign onBlur as props.