@wordpress/block-editor 12.9.1-next.5a1d1283.0 → 12.10.0

package/build-module/hooks/background.js

@@ -0,0 +1,244 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { isBlobURL } from '@wordpress/blob';
+import { getBlockSupport } from '@wordpress/blocks';
+import { __experimentalToolsPanelItem as ToolsPanelItem, Button, DropZone, FlexItem, MenuItem, __experimentalItemGroup as ItemGroup, __experimentalHStack as HStack, __experimentalTruncate as Truncate } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { Platform, useCallback } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { store as noticesStore } from '@wordpress/notices';
+import { getFilename } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import InspectorControls from '../components/inspector-controls';
+import MediaReplaceFlow from '../components/media-replace-flow';
+import MediaUpload from '../components/media-upload';
+import MediaUploadCheck from '../components/media-upload/check';
+import useSetting from '../components/use-setting';
+import { cleanEmptyObject } from './utils';
+import { store as blockEditorStore } from '../store';
+export const BACKGROUND_SUPPORT_KEY = 'background';
+export const IMAGE_BACKGROUND_TYPE = 'image';
+
+/**
+ * Checks if there is a current value in the background image block support
+ * attributes.
+ *
+ * @param {Object} props Block props.
+ * @return {boolean}     Whether or not the block has a background image value set.
+ */
+export function hasBackgroundImageValue(props) {
+  const hasValue = !!props.attributes.style?.background?.backgroundImage?.id || !!props.attributes.style?.background?.backgroundImage?.url;
+  return hasValue;
+}
+
+/**
+ * Determine whether there is block support for background.
+ *
+ * @param {string} blockName Block name.
+ * @param {string} feature   Background image feature to check for.
+ *
+ * @return {boolean} Whether there is support.
+ */
+export function hasBackgroundSupport(blockName, feature = 'any') {
+  if (Platform.OS !== 'web') {
+    return false;
+  }
+  const support = getBlockSupport(blockName, BACKGROUND_SUPPORT_KEY);
+  if (support === true) {
+    return true;
+  }
+  if (feature === 'any') {
+    return !!support?.backgroundImage;
+  }
+  return !!support?.[feature];
+}
+
+/**
+ * Resets the background image block support attributes. This can be used when disabling
+ * the background image controls for a block via a `ToolsPanel`.
+ *
+ * @param {Object} props               Block props.
+ * @param {Object} props.attributes    Block's attributes.
+ * @param {Object} props.setAttributes Function to set block's attributes.
+ */
+export function resetBackgroundImage({
+  attributes = {},
+  setAttributes
+}) {
+  const {
+    style = {}
+  } = attributes;
+  setAttributes({
+    style: cleanEmptyObject({
+      ...style,
+      background: {
+        ...style?.background,
+        backgroundImage: undefined
+      }
+    })
+  });
+}
+function InspectorImagePreview({
+  label,
+  url: imgUrl
+}) {
+  const imgLabel = label || getFilename(imgUrl);
+  return createElement(ItemGroup, {
+    as: "span"
+  }, createElement(HStack, {
+    justify: "flex-start",
+    as: "span"
+  }, createElement("img", {
+    src: imgUrl,
+    alt: ""
+  }), createElement(FlexItem, {
+    as: "span"
+  }, createElement(Truncate, {
+    numberOfLines: 1,
+    className: "block-editor-hooks__background__inspector-media-replace-title"
+  }, imgLabel))));
+}
+function BackgroundImagePanelItem(props) {
+  const {
+    attributes,
+    clientId,
+    setAttributes
+  } = props;
+  const {
+    id,
+    title,
+    url
+  } = attributes.style?.background?.backgroundImage || {};
+  const {
+    mediaUpload
+  } = useSelect(select => {
+    return {
+      mediaUpload: select(blockEditorStore).getSettings().mediaUpload
+    };
+  });
+  const {
+    createErrorNotice
+  } = useDispatch(noticesStore);
+  const onUploadError = message => {
+    createErrorNotice(message, {
+      type: 'snackbar'
+    });
+  };
+  const onSelectMedia = media => {
+    if (!media || !media.url) {
+      const newStyle = {
+        ...attributes.style,
+        background: {
+          ...attributes.style?.background,
+          backgroundImage: undefined
+        }
+      };
+      const newAttributes = {
+        style: cleanEmptyObject(newStyle)
+      };
+      setAttributes(newAttributes);
+      return;
+    }
+    if (isBlobURL(media.url)) {
+      return;
+    }
+
+    // For media selections originated from a file upload.
+    if (media.media_type && media.media_type !== IMAGE_BACKGROUND_TYPE || !media.media_type && media.type && media.type !== IMAGE_BACKGROUND_TYPE) {
+      onUploadError(__('Only images can be used as a background image.'));
+      return;
+    }
+    const newStyle = {
+      ...attributes.style,
+      background: {
+        ...attributes.style?.background,
+        backgroundImage: {
+          url: media.url,
+          id: media.id,
+          source: 'file',
+          title: media.title || undefined
+        }
+      }
+    };
+    const newAttributes = {
+      style: cleanEmptyObject(newStyle)
+    };
+    setAttributes(newAttributes);
+  };
+  const onFilesDrop = filesList => {
+    mediaUpload({
+      allowedTypes: ['image'],
+      filesList,
+      onFileChange([image]) {
+        if (isBlobURL(image?.url)) {
+          return;
+        }
+        onSelectMedia(image);
+      },
+      onError: onUploadError
+    });
+  };
+  const resetAllFilter = useCallback(previousValue => {
+    return {
+      ...previousValue,
+      style: {
+        ...previousValue.style,
+        background: undefined
+      }
+    };
+  }, []);
+  return createElement(ToolsPanelItem, {
+    className: "single-column",
+    hasValue: () => hasBackgroundImageValue(props),
+    label: __('Background image'),
+    onDeselect: () => resetBackgroundImage(props),
+    isShownByDefault: true,
+    resetAllFilter: resetAllFilter,
+    panelId: clientId
+  }, createElement("div", {
+    className: "block-editor-hooks__background__inspector-media-replace-container"
+  }, !!url && createElement(MediaReplaceFlow, {
+    mediaId: id,
+    mediaURL: url,
+    allowedTypes: [IMAGE_BACKGROUND_TYPE],
+    accept: "image/*",
+    onSelect: onSelectMedia,
+    name: createElement(InspectorImagePreview, {
+      label: title,
+      url: url
+    }),
+    variant: "secondary"
+  }, createElement(MenuItem, {
+    onClick: () => resetBackgroundImage(props)
+  }, __('Reset '))), !url && createElement(MediaUploadCheck, null, createElement(MediaUpload, {
+    onSelect: onSelectMedia,
+    allowedTypes: [IMAGE_BACKGROUND_TYPE],
+    render: ({
+      open
+    }) => createElement("div", {
+      className: "block-editor-hooks__background__inspector-upload-container"
+    }, createElement(Button, {
+      onClick: open,
+      variant: "secondary"
+    }, __('Add background image')), createElement(DropZone, {
+      onFilesDrop: onFilesDrop
+    }))
+  }))));
+}
+export function BackgroundImagePanel(props) {
+  const isBackgroundImageSupported = useSetting('background.backgroundImage') && hasBackgroundSupport(props.name, 'backgroundImage');
+  if (!isBackgroundImageSupported) {
+    return null;
+  }
+  return createElement(InspectorControls, {
+    group: "background"
+  }, isBackgroundImageSupported && createElement(BackgroundImagePanelItem, {
+    ...props
+  }));
+}
+//# sourceMappingURL=background.js.map

package/build-module/hooks/background.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isBlobURL","getBlockSupport","__experimentalToolsPanelItem","ToolsPanelItem","Button","DropZone","FlexItem","MenuItem","__experimentalItemGroup","ItemGroup","__experimentalHStack","HStack","__experimentalTruncate","Truncate","useDispatch","useSelect","Platform","useCallback","__","store","noticesStore","getFilename","InspectorControls","MediaReplaceFlow","MediaUpload","MediaUploadCheck","useSetting","cleanEmptyObject","blockEditorStore","BACKGROUND_SUPPORT_KEY","IMAGE_BACKGROUND_TYPE","hasBackgroundImageValue","props","hasValue","attributes","style","background","backgroundImage","id","url","hasBackgroundSupport","blockName","feature","OS","support","resetBackgroundImage","setAttributes","undefined","InspectorImagePreview","label","imgUrl","imgLabel","createElement","as","justify","src","alt","numberOfLines","className","BackgroundImagePanelItem","clientId","title","mediaUpload","select","getSettings","createErrorNotice","onUploadError","message","type","onSelectMedia","media","newStyle","newAttributes","media_type","source","onFilesDrop","filesList","allowedTypes","onFileChange","image","onError","resetAllFilter","previousValue","onDeselect","isShownByDefault","panelId","mediaId","mediaURL","accept","onSelect","name","variant","onClick","render","open","BackgroundImagePanel","isBackgroundImageSupported","group"],"sources":["@wordpress/block-editor/src/hooks/background.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { isBlobURL } from '@wordpress/blob';\nimport { getBlockSupport } from '@wordpress/blocks';\nimport {\n\t__experimentalToolsPanelItem as ToolsPanelItem,\n\tButton,\n\tDropZone,\n\tFlexItem,\n\tMenuItem,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalHStack as HStack,\n\t__experimentalTruncate as Truncate,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { Platform, useCallback } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { store as noticesStore } from '@wordpress/notices';\nimport { getFilename } from '@wordpress/url';\n\n/**\n * Internal dependencies\n */\nimport InspectorControls from '../components/inspector-controls';\nimport MediaReplaceFlow from '../components/media-replace-flow';\nimport MediaUpload from '../components/media-upload';\nimport MediaUploadCheck from '../components/media-upload/check';\nimport useSetting from '../components/use-setting';\nimport { cleanEmptyObject } from './utils';\nimport { store as blockEditorStore } from '../store';\n\nexport const BACKGROUND_SUPPORT_KEY = 'background';\nexport const IMAGE_BACKGROUND_TYPE = 'image';\n\n/**\n * Checks if there is a current value in the background image block support\n * attributes.\n *\n * @param {Object} props Block props.\n * @return {boolean}     Whether or not the block has a background image value set.\n */\nexport function hasBackgroundImageValue( props ) {\n\tconst hasValue =\n\t\t!! props.attributes.style?.background?.backgroundImage?.id ||\n\t\t!! props.attributes.style?.background?.backgroundImage?.url;\n\n\treturn hasValue;\n}\n\n/**\n * Determine whether there is block support for background.\n *\n * @param {string} blockName Block name.\n * @param {string} feature   Background image feature to check for.\n *\n * @return {boolean} Whether there is support.\n */\nexport function hasBackgroundSupport( blockName, feature = 'any' ) {\n\tif ( Platform.OS !== 'web' ) {\n\t\treturn false;\n\t}\n\n\tconst support = getBlockSupport( blockName, BACKGROUND_SUPPORT_KEY );\n\n\tif ( support === true ) {\n\t\treturn true;\n\t}\n\n\tif ( feature === 'any' ) {\n\t\treturn !! support?.backgroundImage;\n\t}\n\n\treturn !! support?.[ feature ];\n}\n\n/**\n * Resets the background image block support attributes. This can be used when disabling\n * the background image controls for a block via a `ToolsPanel`.\n *\n * @param {Object} props               Block props.\n * @param {Object} props.attributes    Block's attributes.\n * @param {Object} props.setAttributes Function to set block's attributes.\n */\nexport function resetBackgroundImage( { attributes = {}, setAttributes } ) {\n\tconst { style = {} } = attributes;\n\n\tsetAttributes( {\n\t\tstyle: cleanEmptyObject( {\n\t\t\t...style,\n\t\t\tbackground: {\n\t\t\t\t...style?.background,\n\t\t\t\tbackgroundImage: undefined,\n\t\t\t},\n\t\t} ),\n\t} );\n}\n\nfunction InspectorImagePreview( { label, url: imgUrl } ) {\n\tconst imgLabel = label || getFilename( imgUrl );\n\treturn (\n\t\t<ItemGroup as=\"span\">\n\t\t\t<HStack justify=\"flex-start\" as=\"span\">\n\t\t\t\t<img src={ imgUrl } alt=\"\" />\n\t\t\t\t<FlexItem as=\"span\">\n\t\t\t\t\t<Truncate\n\t\t\t\t\t\tnumberOfLines={ 1 }\n\t\t\t\t\t\tclassName=\"block-editor-hooks__background__inspector-media-replace-title\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ imgLabel }\n\t\t\t\t\t</Truncate>\n\t\t\t\t</FlexItem>\n\t\t\t</HStack>\n\t\t</ItemGroup>\n\t);\n}\n\nfunction BackgroundImagePanelItem( props ) {\n\tconst { attributes, clientId, setAttributes } = props;\n\n\tconst { id, title, url } =\n\t\tattributes.style?.background?.backgroundImage || {};\n\n\tconst { mediaUpload } = useSelect( ( select ) => {\n\t\treturn {\n\t\t\tmediaUpload: select( blockEditorStore ).getSettings().mediaUpload,\n\t\t};\n\t} );\n\n\tconst { createErrorNotice } = useDispatch( noticesStore );\n\tconst onUploadError = ( message ) => {\n\t\tcreateErrorNotice( message, { type: 'snackbar' } );\n\t};\n\n\tconst onSelectMedia = ( media ) => {\n\t\tif ( ! media || ! media.url ) {\n\t\t\tconst newStyle = {\n\t\t\t\t...attributes.style,\n\t\t\t\tbackground: {\n\t\t\t\t\t...attributes.style?.background,\n\t\t\t\t\tbackgroundImage: undefined,\n\t\t\t\t},\n\t\t\t};\n\n\t\t\tconst newAttributes = {\n\t\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t\t};\n\n\t\t\tsetAttributes( newAttributes );\n\t\t\treturn;\n\t\t}\n\n\t\tif ( isBlobURL( media.url ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// For media selections originated from a file upload.\n\t\tif (\n\t\t\t( media.media_type &&\n\t\t\t\tmedia.media_type !== IMAGE_BACKGROUND_TYPE ) ||\n\t\t\t( ! media.media_type &&\n\t\t\t\tmedia.type &&\n\t\t\t\tmedia.type !== IMAGE_BACKGROUND_TYPE )\n\t\t) {\n\t\t\tonUploadError(\n\t\t\t\t__( 'Only images can be used as a background image.' )\n\t\t\t);\n\t\t\treturn;\n\t\t}\n\n\t\tconst newStyle = {\n\t\t\t...attributes.style,\n\t\t\tbackground: {\n\t\t\t\t...attributes.style?.background,\n\t\t\t\tbackgroundImage: {\n\t\t\t\t\turl: media.url,\n\t\t\t\t\tid: media.id,\n\t\t\t\t\tsource: 'file',\n\t\t\t\t\ttitle: media.title || undefined,\n\t\t\t\t},\n\t\t\t},\n\t\t};\n\n\t\tconst newAttributes = {\n\t\t\tstyle: cleanEmptyObject( newStyle ),\n\t\t};\n\n\t\tsetAttributes( newAttributes );\n\t};\n\n\tconst onFilesDrop = ( filesList ) => {\n\t\tmediaUpload( {\n\t\t\tallowedTypes: [ 'image' ],\n\t\t\tfilesList,\n\t\t\tonFileChange( [ image ] ) {\n\t\t\t\tif ( isBlobURL( image?.url ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tonSelectMedia( image );\n\t\t\t},\n\t\t\tonError: onUploadError,\n\t\t} );\n\t};\n\n\tconst resetAllFilter = useCallback( ( previousValue ) => {\n\t\treturn {\n\t\t\t...previousValue,\n\t\t\tstyle: {\n\t\t\t\t...previousValue.style,\n\t\t\t\tbackground: undefined,\n\t\t\t},\n\t\t};\n\t}, [] );\n\n\treturn (\n\t\t<ToolsPanelItem\n\t\t\tclassName=\"single-column\"\n\t\t\thasValue={ () => hasBackgroundImageValue( props ) }\n\t\t\tlabel={ __( 'Background image' ) }\n\t\t\tonDeselect={ () => resetBackgroundImage( props ) }\n\t\t\tisShownByDefault={ true }\n\t\t\tresetAllFilter={ resetAllFilter }\n\t\t\tpanelId={ clientId }\n\t\t>\n\t\t\t<div className=\"block-editor-hooks__background__inspector-media-replace-container\">\n\t\t\t\t{ !! url && (\n\t\t\t\t\t<MediaReplaceFlow\n\t\t\t\t\t\tmediaId={ id }\n\t\t\t\t\t\tmediaURL={ url }\n\t\t\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\t\t\taccept=\"image/*\"\n\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\tname={\n\t\t\t\t\t\t\t<InspectorImagePreview\n\t\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\t\turl={ url }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<MenuItem\n\t\t\t\t\t\t\tonClick={ () => resetBackgroundImage( props ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Reset ' ) }\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t</MediaReplaceFlow>\n\t\t\t\t) }\n\t\t\t\t{ ! url && (\n\t\t\t\t\t<MediaUploadCheck>\n\t\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\t\tallowedTypes={ [ IMAGE_BACKGROUND_TYPE ] }\n\t\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t\t<div className=\"block-editor-hooks__background__inspector-upload-container\">\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Add background image' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t\t<DropZone onFilesDrop={ onFilesDrop } />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</MediaUploadCheck>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</ToolsPanelItem>\n\t);\n}\n\nexport function BackgroundImagePanel( props ) {\n\tconst isBackgroundImageSupported =\n\t\tuseSetting( 'background.backgroundImage' ) &&\n\t\thasBackgroundSupport( props.name, 'backgroundImage' );\n\n\tif ( ! isBackgroundImageSupported ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<InspectorControls group=\"background\">\n\t\t\t{ isBackgroundImageSupported && (\n\t\t\t\t<BackgroundImagePanelItem { ...props } />\n\t\t\t) }\n\t\t</InspectorControls>\n\t);\n}\n"],"mappings":"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"}

package/build-module/hooks/block-hooks.js

@@ -0,0 +1,181 @@
+import { createElement } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { addFilter } from '@wordpress/hooks';
+import { Fragment, useMemo } from '@wordpress/element';
+import { __experimentalHStack as HStack, PanelBody, ToggleControl } from '@wordpress/components';
+import { createHigherOrderComponent } from '@wordpress/compose';
+import { createBlock, store as blocksStore } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { BlockIcon, InspectorControls } from '../components';
+import { store as blockEditorStore } from '../store';
+const EMPTY_OBJECT = {};
+function BlockHooksControl(props) {
+  const blockTypes = useSelect(select => select(blocksStore).getBlockTypes(), []);
+  const hookedBlocksForCurrentBlock = useMemo(() => blockTypes?.filter(({
+    blockHooks
+  }) => blockHooks && props.blockName in blockHooks), [blockTypes, props.blockName]);
+  const {
+    blockIndex,
+    rootClientId,
+    innerBlocksLength
+  } = useSelect(select => {
+    const {
+      getBlock,
+      getBlockIndex,
+      getBlockRootClientId
+    } = select(blockEditorStore);
+    return {
+      blockIndex: getBlockIndex(props.clientId),
+      innerBlocksLength: getBlock(props.clientId)?.innerBlocks?.length,
+      rootClientId: getBlockRootClientId(props.clientId)
+    };
+  }, [props.clientId]);
+  const hookedBlockClientIds = useSelect(select => {
+    const {
+      getBlock,
+      getGlobalBlockCount
+    } = select(blockEditorStore);
+    const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce((clientIds, block) => {
+      // If the block doesn't exist anywhere in the block tree,
+      // we know that we have to display the toggle for it, and set
+      // it to disabled.
+      if (getGlobalBlockCount(block.name) === 0) {
+        return clientIds;
+      }
+      const relativePosition = block?.blockHooks?.[props.blockName];
+      let candidates;
+      switch (relativePosition) {
+        case 'before':
+        case 'after':
+          // Any of the current block's siblings (with the right block type) qualifies
+          // as a hooked block (inserted `before` or `after` the current one), as the block
+          // might've been automatically inserted and then moved around a bit by the user.
+          candidates = getBlock(rootClientId)?.innerBlocks;
+          break;
+        case 'first_child':
+        case 'last_child':
+          // Any of the current block's child blocks (with the right block type) qualifies
+          // as a hooked first or last child block, as the block might've been automatically
+          // inserted and then moved around a bit by the user.
+          candidates = getBlock(props.clientId).innerBlocks;
+          break;
+      }
+      const hookedBlock = candidates?.find(({
+        name
+      }) => name === block.name);
+
+      // If the block exists in the designated location, we consider it hooked
+      // and show the toggle as enabled.
+      if (hookedBlock) {
+        return {
+          ...clientIds,
+          [block.name]: hookedBlock.clientId
+        };
+      }
+
+      // If no hooked block was found in any of its designated locations,
+      // but it exists elsewhere in the block tree, we consider it manually inserted.
+      // In this case, we take note and will remove the corresponding toggle from the
+      // block inspector panel.
+      return {
+        ...clientIds,
+        [block.name]: false
+      };
+    }, {});
+    if (Object.values(_hookedBlockClientIds).length > 0) {
+      return _hookedBlockClientIds;
+    }
+    return EMPTY_OBJECT;
+  }, [hookedBlocksForCurrentBlock, props.blockName, props.clientId, rootClientId]);
+  const {
+    insertBlock,
+    removeBlock
+  } = useDispatch(blockEditorStore);
+
+  // Remove toggle if block isn't present in the designated location but elsewhere in the block tree.
+  const hookedBlocksForCurrentBlockIfNotPresentElsewhere = hookedBlocksForCurrentBlock?.filter(block => hookedBlockClientIds?.[block.name] !== false);
+  if (!hookedBlocksForCurrentBlockIfNotPresentElsewhere.length) {
+    return null;
+  }
+
+  // Group by block namespace (i.e. prefix before the slash).
+  const groupedHookedBlocks = hookedBlocksForCurrentBlock.reduce((groups, block) => {
+    const [namespace] = block.name.split('/');
+    if (!groups[namespace]) {
+      groups[namespace] = [];
+    }
+    groups[namespace].push(block);
+    return groups;
+  }, {});
+  const insertBlockIntoDesignatedLocation = (block, relativePosition) => {
+    switch (relativePosition) {
+      case 'before':
+      case 'after':
+        insertBlock(block, relativePosition === 'after' ? blockIndex + 1 : blockIndex, rootClientId,
+        // Insert as a child of the current block's parent
+        false);
+        break;
+      case 'first_child':
+      case 'last_child':
+        insertBlock(block,
+        // TODO: It'd be great if insertBlock() would accept negative indices for insertion.
+        relativePosition === 'first_child' ? 0 : innerBlocksLength, props.clientId,
+        // Insert as a child of the current block.
+        false);
+        break;
+    }
+  };
+  return createElement(InspectorControls, null, createElement(PanelBody, {
+    className: "block-editor-hooks__block-hooks",
+    title: __('Plugins'),
+    initialOpen: true
+  }, Object.keys(groupedHookedBlocks).map(vendor => {
+    return createElement(Fragment, {
+      key: vendor
+    }, createElement("h3", null, vendor), groupedHookedBlocks[vendor].map(block => {
+      const checked = (block.name in hookedBlockClientIds);
+      return createElement(ToggleControl, {
+        checked: checked,
+        key: block.title,
+        label: createElement(HStack, {
+          justify: "flex-start"
+        }, createElement(BlockIcon, {
+          icon: block.icon
+        }), createElement("span", null, block.title)),
+        onChange: () => {
+          if (!checked) {
+            // Create and insert block.
+            const relativePosition = block.blockHooks[props.blockName];
+            insertBlockIntoDesignatedLocation(createBlock(block.name), relativePosition);
+            return;
+          }
+
+          // Remove block.
+          const clientId = hookedBlockClientIds[block.name];
+          removeBlock(clientId, false);
+        }
+      });
+    }));
+  })));
+}
+export const withBlockHooks = createHigherOrderComponent(BlockEdit => {
+  return props => {
+    const blockEdit = createElement(BlockEdit, {
+      key: "edit",
+      ...props
+    });
+    return createElement(Fragment, null, blockEdit, createElement(BlockHooksControl, {
+      blockName: props.name,
+      clientId: props.clientId
+    }));
+  };
+}, 'withBlockHooks');
+addFilter('editor.BlockEdit', 'core/block-hooks/with-inspector-control', withBlockHooks);
+//# sourceMappingURL=block-hooks.js.map

package/build-module/hooks/block-hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__","addFilter","Fragment","useMemo","__experimentalHStack","HStack","PanelBody","ToggleControl","createHigherOrderComponent","createBlock","store","blocksStore","useDispatch","useSelect","BlockIcon","InspectorControls","blockEditorStore","EMPTY_OBJECT","BlockHooksControl","props","blockTypes","select","getBlockTypes","hookedBlocksForCurrentBlock","filter","blockHooks","blockName","blockIndex","rootClientId","innerBlocksLength","getBlock","getBlockIndex","getBlockRootClientId","clientId","innerBlocks","length","hookedBlockClientIds","getGlobalBlockCount","_hookedBlockClientIds","reduce","clientIds","block","name","relativePosition","candidates","hookedBlock","find","Object","values","insertBlock","removeBlock","hookedBlocksForCurrentBlockIfNotPresentElsewhere","groupedHookedBlocks","groups","namespace","split","push","insertBlockIntoDesignatedLocation","createElement","className","title","initialOpen","keys","map","vendor","key","checked","label","justify","icon","onChange","withBlockHooks","BlockEdit","blockEdit"],"sources":["@wordpress/block-editor/src/hooks/block-hooks.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { addFilter } from '@wordpress/hooks';\nimport { Fragment, useMemo } from '@wordpress/element';\nimport {\n\t__experimentalHStack as HStack,\n\tPanelBody,\n\tToggleControl,\n} from '@wordpress/components';\nimport { createHigherOrderComponent } from '@wordpress/compose';\nimport { createBlock, store as blocksStore } from '@wordpress/blocks';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { BlockIcon, InspectorControls } from '../components';\nimport { store as blockEditorStore } from '../store';\n\nconst EMPTY_OBJECT = {};\n\nfunction BlockHooksControl( props ) {\n\tconst blockTypes = useSelect(\n\t\t( select ) => select( blocksStore ).getBlockTypes(),\n\t\t[]\n\t);\n\n\tconst hookedBlocksForCurrentBlock = useMemo(\n\t\t() =>\n\t\t\tblockTypes?.filter(\n\t\t\t\t( { blockHooks } ) =>\n\t\t\t\t\tblockHooks && props.blockName in blockHooks\n\t\t\t),\n\t\t[ blockTypes, props.blockName ]\n\t);\n\n\tconst { blockIndex, rootClientId, innerBlocksLength } = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock, getBlockIndex, getBlockRootClientId } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\treturn {\n\t\t\t\tblockIndex: getBlockIndex( props.clientId ),\n\t\t\t\tinnerBlocksLength: getBlock( props.clientId )?.innerBlocks\n\t\t\t\t\t?.length,\n\t\t\t\trootClientId: getBlockRootClientId( props.clientId ),\n\t\t\t};\n\t\t},\n\t\t[ props.clientId ]\n\t);\n\n\tconst hookedBlockClientIds = useSelect(\n\t\t( select ) => {\n\t\t\tconst { getBlock, getGlobalBlockCount } =\n\t\t\t\tselect( blockEditorStore );\n\n\t\t\tconst _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(\n\t\t\t\t( clientIds, block ) => {\n\t\t\t\t\t// If the block doesn't exist anywhere in the block tree,\n\t\t\t\t\t// we know that we have to display the toggle for it, and set\n\t\t\t\t\t// it to disabled.\n\t\t\t\t\tif ( getGlobalBlockCount( block.name ) === 0 ) {\n\t\t\t\t\t\treturn clientIds;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst relativePosition =\n\t\t\t\t\t\tblock?.blockHooks?.[ props.blockName ];\n\t\t\t\t\tlet candidates;\n\n\t\t\t\t\tswitch ( relativePosition ) {\n\t\t\t\t\t\tcase 'before':\n\t\t\t\t\t\tcase 'after':\n\t\t\t\t\t\t\t// Any of the current block's siblings (with the right block type) qualifies\n\t\t\t\t\t\t\t// as a hooked block (inserted `before` or `after` the current one), as the block\n\t\t\t\t\t\t\t// might've been automatically inserted and then moved around a bit by the user.\n\t\t\t\t\t\t\tcandidates = getBlock( rootClientId )?.innerBlocks;\n\t\t\t\t\t\t\tbreak;\n\n\t\t\t\t\t\tcase 'first_child':\n\t\t\t\t\t\tcase 'last_child':\n\t\t\t\t\t\t\t// Any of the current block's child blocks (with the right block type) qualifies\n\t\t\t\t\t\t\t// as a hooked first or last child block, as the block might've been automatically\n\t\t\t\t\t\t\t// inserted and then moved around a bit by the user.\n\t\t\t\t\t\t\tcandidates = getBlock( props.clientId ).innerBlocks;\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t}\n\n\t\t\t\t\tconst hookedBlock = candidates?.find(\n\t\t\t\t\t\t( { name } ) => name === block.name\n\t\t\t\t\t);\n\n\t\t\t\t\t// If the block exists in the designated location, we consider it hooked\n\t\t\t\t\t// and show the toggle as enabled.\n\t\t\t\t\tif ( hookedBlock ) {\n\t\t\t\t\t\treturn {\n\t\t\t\t\t\t\t...clientIds,\n\t\t\t\t\t\t\t[ block.name ]: hookedBlock.clientId,\n\t\t\t\t\t\t};\n\t\t\t\t\t}\n\n\t\t\t\t\t// If no hooked block was found in any of its designated locations,\n\t\t\t\t\t// but it exists elsewhere in the block tree, we consider it manually inserted.\n\t\t\t\t\t// In this case, we take note and will remove the corresponding toggle from the\n\t\t\t\t\t// block inspector panel.\n\t\t\t\t\treturn {\n\t\t\t\t\t\t...clientIds,\n\t\t\t\t\t\t[ block.name ]: false,\n\t\t\t\t\t};\n\t\t\t\t},\n\t\t\t\t{}\n\t\t\t);\n\n\t\t\tif ( Object.values( _hookedBlockClientIds ).length > 0 ) {\n\t\t\t\treturn _hookedBlockClientIds;\n\t\t\t}\n\n\t\t\treturn EMPTY_OBJECT;\n\t\t},\n\t\t[\n\t\t\thookedBlocksForCurrentBlock,\n\t\t\tprops.blockName,\n\t\t\tprops.clientId,\n\t\t\trootClientId,\n\t\t]\n\t);\n\n\tconst { insertBlock, removeBlock } = useDispatch( blockEditorStore );\n\n\t// Remove toggle if block isn't present in the designated location but elsewhere in the block tree.\n\tconst hookedBlocksForCurrentBlockIfNotPresentElsewhere =\n\t\thookedBlocksForCurrentBlock?.filter(\n\t\t\t( block ) => hookedBlockClientIds?.[ block.name ] !== false\n\t\t);\n\n\tif ( ! hookedBlocksForCurrentBlockIfNotPresentElsewhere.length ) {\n\t\treturn null;\n\t}\n\n\t// Group by block namespace (i.e. prefix before the slash).\n\tconst groupedHookedBlocks = hookedBlocksForCurrentBlock.reduce(\n\t\t( groups, block ) => {\n\t\t\tconst [ namespace ] = block.name.split( '/' );\n\t\t\tif ( ! groups[ namespace ] ) {\n\t\t\t\tgroups[ namespace ] = [];\n\t\t\t}\n\t\t\tgroups[ namespace ].push( block );\n\t\t\treturn groups;\n\t\t},\n\t\t{}\n\t);\n\n\tconst insertBlockIntoDesignatedLocation = ( block, relativePosition ) => {\n\t\tswitch ( relativePosition ) {\n\t\t\tcase 'before':\n\t\t\tcase 'after':\n\t\t\t\tinsertBlock(\n\t\t\t\t\tblock,\n\t\t\t\t\trelativePosition === 'after' ? blockIndex + 1 : blockIndex,\n\t\t\t\t\trootClientId, // Insert as a child of the current block's parent\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t\tbreak;\n\n\t\t\tcase 'first_child':\n\t\t\tcase 'last_child':\n\t\t\t\tinsertBlock(\n\t\t\t\t\tblock,\n\t\t\t\t\t// TODO: It'd be great if insertBlock() would accept negative indices for insertion.\n\t\t\t\t\trelativePosition === 'first_child' ? 0 : innerBlocksLength,\n\t\t\t\t\tprops.clientId, // Insert as a child of the current block.\n\t\t\t\t\tfalse\n\t\t\t\t);\n\t\t\t\tbreak;\n\t\t}\n\t};\n\n\treturn (\n\t\t<InspectorControls>\n\t\t\t<PanelBody\n\t\t\t\tclassName=\"block-editor-hooks__block-hooks\"\n\t\t\t\ttitle={ __( 'Plugins' ) }\n\t\t\t\tinitialOpen={ true }\n\t\t\t>\n\t\t\t\t{ Object.keys( groupedHookedBlocks ).map( ( vendor ) => {\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Fragment key={ vendor }>\n\t\t\t\t\t\t\t<h3>{ vendor }</h3>\n\t\t\t\t\t\t\t{ groupedHookedBlocks[ vendor ].map( ( block ) => {\n\t\t\t\t\t\t\t\tconst checked =\n\t\t\t\t\t\t\t\t\tblock.name in hookedBlockClientIds;\n\n\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t<ToggleControl\n\t\t\t\t\t\t\t\t\t\tchecked={ checked }\n\t\t\t\t\t\t\t\t\t\tkey={ block.title }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\t<HStack justify=\"flex-start\">\n\t\t\t\t\t\t\t\t\t\t\t\t<BlockIcon\n\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ block.icon }\n\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t<span>{ block.title }</span>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonChange={ () => {\n\t\t\t\t\t\t\t\t\t\t\tif ( ! checked ) {\n\t\t\t\t\t\t\t\t\t\t\t\t// Create and insert block.\n\t\t\t\t\t\t\t\t\t\t\t\tconst relativePosition =\n\t\t\t\t\t\t\t\t\t\t\t\t\tblock.blockHooks[\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tprops.blockName\n\t\t\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\t\tinsertBlockIntoDesignatedLocation(\n\t\t\t\t\t\t\t\t\t\t\t\t\tcreateBlock( block.name ),\n\t\t\t\t\t\t\t\t\t\t\t\t\trelativePosition\n\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\t\t\t// Remove block.\n\t\t\t\t\t\t\t\t\t\t\tconst clientId =\n\t\t\t\t\t\t\t\t\t\t\t\thookedBlockClientIds[\n\t\t\t\t\t\t\t\t\t\t\t\t\tblock.name\n\t\t\t\t\t\t\t\t\t\t\t\t];\n\t\t\t\t\t\t\t\t\t\t\tremoveBlock( clientId, false );\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t);\n\t\t\t\t} ) }\n\t\t\t</PanelBody>\n\t\t</InspectorControls>\n\t);\n}\n\nexport const withBlockHooks = createHigherOrderComponent( ( BlockEdit ) => {\n\treturn ( props ) => {\n\t\tconst blockEdit = <BlockEdit key=\"edit\" { ...props } />;\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ blockEdit }\n\t\t\t\t<BlockHooksControl\n\t\t\t\t\tblockName={ props.name }\n\t\t\t\t\tclientId={ props.clientId }\n\t\t\t\t/>\n\t\t\t</>\n\t\t);\n\t};\n}, 'withBlockHooks' );\n\naddFilter(\n\t'editor.BlockEdit',\n\t'core/block-hooks/with-inspector-control',\n\twithBlockHooks\n);\n"],"mappings":"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"}

package/build-module/hooks/block-rename-ui.js

@@ -0,0 +1,153 @@
+import { createElement, Fragment } from "@wordpress/element";
+/**
+ * WordPress dependencies
+ */
+import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
+import { addFilter } from '@wordpress/hooks';
+import { __, sprintf } from '@wordpress/i18n';
+import { getBlockSupport } from '@wordpress/blocks';
+import { MenuItem, __experimentalHStack as HStack, __experimentalVStack as VStack, Button, TextControl, Modal } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { speak } from '@wordpress/a11y';
+
+/**
+ * Internal dependencies
+ */
+import { BlockSettingsMenuControls, useBlockDisplayInformation, InspectorControls } from '../components';
+const emptyString = testString => testString?.trim()?.length === 0;
+function RenameModal({
+  blockName,
+  originalBlockName,
+  onClose,
+  onSave
+}) {
+  const [editedBlockName, setEditedBlockName] = useState(blockName);
+  const nameHasChanged = editedBlockName !== blockName;
+  const nameIsOriginal = editedBlockName === originalBlockName;
+  const nameIsEmpty = emptyString(editedBlockName);
+  const isNameValid = nameHasChanged || nameIsOriginal;
+  const autoSelectInputText = event => event.target.select();
+  const dialogDescription = useInstanceId(RenameModal, `block-editor-rename-modal__description`);
+  const handleSubmit = () => {
+    // Must be assertive to immediately announce change.
+    speak(sprintf( /* translators: %1$s: type of update (either reset of changed). %2$s: new name/label for the block */
+    __('Block name %1$s to: "%2$s".'), nameIsOriginal || nameIsEmpty ? __('reset') : __('changed'), editedBlockName), 'assertive');
+    onSave(editedBlockName);
+
+    // Immediate close avoids ability to hit save multiple times.
+    onClose();
+  };
+  return createElement(Modal, {
+    title: __('Rename'),
+    onRequestClose: onClose,
+    overlayClassName: "block-editor-block-rename-modal",
+    aria: {
+      describedby: dialogDescription
+    }
+  }, createElement("p", {
+    id: dialogDescription
+  }, __('Enter a custom name for this block.')), createElement("form", {
+    onSubmit: e => {
+      e.preventDefault();
+      if (!isNameValid) {
+        return;
+      }
+      handleSubmit();
+    }
+  }, createElement(VStack, {
+    spacing: "3"
+  }, createElement(TextControl, {
+    __nextHasNoMarginBottom: true,
+    value: editedBlockName,
+    label: __('Block name'),
+    hideLabelFromVision: true,
+    placeholder: originalBlockName,
+    onChange: setEditedBlockName,
+    onFocus: autoSelectInputText
+  }), createElement(HStack, {
+    justify: "right"
+  }, createElement(Button, {
+    variant: "tertiary",
+    onClick: onClose
+  }, __('Cancel')), createElement(Button, {
+    "aria-disabled": !isNameValid,
+    variant: "primary",
+    type: "submit"
+  }, __('Save'))))));
+}
+function BlockRenameControl(props) {
+  const [renamingBlock, setRenamingBlock] = useState(false);
+  const {
+    clientId,
+    customName,
+    onChange
+  } = props;
+  const blockInformation = useBlockDisplayInformation(clientId);
+  return createElement(Fragment, null, createElement(InspectorControls, {
+    group: "advanced"
+  }, createElement(TextControl, {
+    __nextHasNoMarginBottom: true,
+    label: __('Block name'),
+    value: customName || '',
+    onChange: onChange
+  })), createElement(BlockSettingsMenuControls, null, ({
+    selectedClientIds
+  }) => {
+    // Only enabled for single selections.
+    const canRename = selectedClientIds.length === 1 && clientId === selectedClientIds[0];
+
+    // This check ensures the `BlockSettingsMenuControls` fill
+    // doesn't render multiple times and also that it renders for
+    // the block from which the menu was triggered.
+    if (!canRename) {
+      return null;
+    }
+    return createElement(MenuItem, {
+      onClick: () => {
+        setRenamingBlock(true);
+      },
+      "aria-expanded": renamingBlock,
+      "aria-haspopup": "dialog"
+    }, __('Rename'));
+  }), renamingBlock && createElement(RenameModal, {
+    blockName: customName || '',
+    originalBlockName: blockInformation?.title,
+    onClose: () => setRenamingBlock(false),
+    onSave: newName => {
+      // If the new value is the block's original name (e.g. `Group`)
+      // or it is an empty string then assume the intent is to reset
+      // the value. Therefore reset the metadata.
+      if (newName === blockInformation?.title || emptyString(newName)) {
+        newName = undefined;
+      }
+      onChange(newName);
+    }
+  }));
+}
+export const withBlockRenameControl = createHigherOrderComponent(BlockEdit => props => {
+  const {
+    clientId,
+    name,
+    attributes,
+    setAttributes
+  } = props;
+  const metaDataSupport = getBlockSupport(name, '__experimentalMetadata', false);
+  const supportsBlockNaming = !!(true === metaDataSupport || metaDataSupport?.name);
+  return createElement(Fragment, null, supportsBlockNaming && createElement(Fragment, null, createElement(BlockRenameControl, {
+    clientId: clientId,
+    customName: attributes?.metadata?.name,
+    onChange: newName => {
+      setAttributes({
+        metadata: {
+          ...(attributes?.metadata && attributes?.metadata),
+          name: newName
+        }
+      });
+    }
+  })), createElement(BlockEdit, {
+    key: "edit",
+    ...props
+  }));
+}, 'withToolbarControls');
+addFilter('editor.BlockEdit', 'core/block-rename-ui/with-block-rename-control', withBlockRenameControl);
+//# sourceMappingURL=block-rename-ui.js.map