@wordpress/block-editor 12.10.2 → 12.11.0

package/src/components/block-actions/index.js

@@ -11,7 +11,7 @@ import {
 /**
  * Internal dependencies
  */
-import { useNotifyCopy } from '../copy-handler';
+import { useNotifyCopy } from '../../utils/use-notify-copy';
 import usePasteStyles from '../use-paste-styles';
 import { store as blockEditorStore } from '../../store';
 

package/src/components/block-breadcrumb/index.js

@@ -18,7 +18,7 @@ import { unlock } from '../../lock-unlock';
  *
  * @param {Object} props               Component props.
  * @param {string} props.rootLabelText Translated label for the root element of the breadcrumb trail.
- * @return {WPElement}                 Block Breadcrumb.
+ * @return {Element}                   Block Breadcrumb.
  */
 function BlockBreadcrumb( { rootLabelText } ) {
 	const { selectBlock, clearSelectedBlock } = useDispatch( blockEditorStore );

package/src/components/block-canvas/index.js

@@ -11,7 +11,6 @@ import EditorStyles from '../editor-styles';
 import Iframe from '../iframe';
 import WritingFlow from '../writing-flow';
 import { useMouseMoveTypingReset } from '../observe-typing';
-import { useClipboardHandler } from '../copy-handler';
 import { useBlockSelectionClearer } from '../block-selection-clearer';
 
 export function ExperimentalBlockCanvas( {
@@ -23,13 +22,8 @@ export function ExperimentalBlockCanvas( {
 	iframeProps,
 } ) {
 	const resetTypingRef = useMouseMoveTypingReset();
-	const copyHandler = useClipboardHandler();
 	const clearerRef = useBlockSelectionClearer();
-	const contentRef = useMergeRefs( [
-		copyHandler,
-		contentRefProp,
-		clearerRef,
-	] );
+	const contentRef = useMergeRefs( [ contentRefProp, clearerRef ] );
 
 	if ( ! shouldIframe ) {
 		return (
@@ -91,11 +85,11 @@ export function ExperimentalBlockCanvas( {
  * }
  * ```
  *
- * @param {Object}    props          Component props.
- * @param {string}    props.height   Canvas height, defaults to 300px.
- * @param {Array}     props.styles   Content styles to inject into the iframe.
- * @param {WPElement} props.children Content of the canvas, defaults to the BlockList component.
- * @return {WPElement}               Block Breadcrumb.
+ * @param {Object}  props          Component props.
+ * @param {string}  props.height   Canvas height, defaults to 300px.
+ * @param {Array}   props.styles   Content styles to inject into the iframe.
+ * @param {Element} props.children Content of the canvas, defaults to the BlockList component.
+ * @return {Element}               Block Breadcrumb.
  */
 function BlockCanvas( { children, height, styles } ) {
 	return (

package/src/components/block-context/README.md

@@ -23,7 +23,7 @@ function MyCustomPostEditor() {
 Internal to the `@wordpress/block-editor` module, a component can access the [full Context object](https://reactjs.org/docs/context.html#api), typically for use in combination with [`useContext`](https://reactjs.org/docs/hooks-reference.html#usecontext).
 
 ```js
-import { useContext } from '@wordpress/element';
+import { useContext } from 'react';
 
 // Only available internally within `@wordpress/block-editor`!
 import BlockContext from '../block-context';

package/src/components/block-heading-level-dropdown/heading-level-icon.js

@@ -12,7 +12,7 @@ import {
 } from '@wordpress/icons';
 import { Icon } from '@wordpress/components';
 
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+/** @typedef {import('react').ComponentType} ComponentType */
 
 /**
  * HeadingLevelIcon props.
@@ -37,7 +37,7 @@ const LEVEL_TO_PATH = {
  *
  * @param {WPHeadingLevelIconProps} props Component props.
  *
- * @return {?WPComponent} The icon.
+ * @return {?ComponentType} The icon.
  */
 export default function HeadingLevelIcon( { level } ) {
 	if ( LEVEL_TO_PATH[ level ] ) {

package/src/components/block-heading-level-dropdown/index.js

@@ -15,7 +15,7 @@ const POPOVER_PROPS = {
 	className: 'block-library-heading-level-dropdown',
 };
 
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+/** @typedef {import('react').ComponentType} ComponentType */
 
 /**
  * HeadingLevelDropdown props.
@@ -33,7 +33,7 @@ const POPOVER_PROPS = {
  *
  * @param {WPHeadingLevelDropdownProps} props Component props.
  *
- * @return {WPComponent} The toolbar.
+ * @return {ComponentType} The toolbar.
  */
 export default function HeadingLevelDropdown( {
 	options = HEADING_LEVELS,

package/src/components/block-heading-level-dropdown/index.native.js

@@ -11,7 +11,7 @@ import HeadingLevelIcon from './heading-level-icon';
 
 const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
 
-/** @typedef {import('@wordpress/element').WPComponent} WPComponent */
+/** @typedef {import('react').ComponentType} ComponentType */
 
 /**
  * HeadingLevelDropdown props.
@@ -28,7 +28,7 @@ const HEADING_LEVELS = [ 1, 2, 3, 4, 5, 6 ];
  *
  * @param {WPHeadingLevelDropdownProps} props Component props.
  *
- * @return {WPComponent} The toolbar.
+ * @return {ComponentType} The toolbar.
  */
 export default function HeadingLevelDropdown( {
 	options = HEADING_LEVELS,

package/src/components/block-list/block-list-item.native.js

@@ -35,7 +35,7 @@ import { useEditorWrapperStyles } from '../../hooks/use-editor-wrapper-styles';
  * @param {string}   props.rootClientId                 The root client ID.
  * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
  *
- * @return {WPComponent} The rendered block list item content.
+ * @return {Component} The rendered block list item content.
  */
 function BlockListItemContent( {
 	blockWidth,
@@ -180,7 +180,7 @@ function BlockListItemContent( {
  * @param {string}   props.rootClientId                 The root client ID.
  * @param {Function} props.shouldShowInnerBlockAppender Whether to show the inner block appender.
  *
- * @return {WPComponent|null} The rendered block list item or null if the block width is not provided.
+ * @return {Component|null} The rendered block list item or null if the block width is not provided.
  */
 function BlockListItem( props ) {
 	const { isGridItem, numOfColumns, tileCount, tileIndex, ...restProps } =

package/src/components/block-parent-selector/index.js

@@ -19,7 +19,7 @@ import { store as blockEditorStore } from '../../store';
  * Block parent selector component, displaying the hierarchy of the
  * current block selection as a single icon to "go up" a level.
  *
- * @return {WPComponent} Parent block selector.
+ * @return {Component} Parent block selector.
  */
 export default function BlockParentSelector() {
 	const { selectBlock } = useDispatch( blockEditorStore );

package/src/components/block-preview/index.js

@@ -88,7 +88,7 @@ export function BlockPreview( {
  * @param {Array|Object} preview.blocks        A block instance (object) or an array of blocks to be previewed.
  * @param {number}       preview.viewportWidth Width of the preview container in pixels. Controls at what size the blocks will be rendered inside the preview. Default: 700.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 export default memo( BlockPreview );
 

package/src/components/block-settings-menu/block-html-convert-button.js

@@ -1,30 +1,39 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
+import { MenuItem } from '@wordpress/components';
 import { rawHandler, getBlockContent } from '@wordpress/blocks';
-import { compose } from '@wordpress/compose';
-import { withSelect, withDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
-import BlockConvertButton from './block-convert-button';
 import { store as blockEditorStore } from '../../store';
 
-export default compose(
-	withSelect( ( select, { clientId } ) => {
-		const block = select( blockEditorStore ).getBlock( clientId );
+function BlockHTMLConvertButton( { clientId } ) {
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
+		[ clientId ]
+	);
+	const { replaceBlocks } = useDispatch( blockEditorStore );
 
-		return {
-			block,
-			shouldRender: block && block.name === 'core/html',
-		};
-	} ),
-	withDispatch( ( dispatch, { block } ) => ( {
-		onClick: () =>
-			dispatch( blockEditorStore ).replaceBlocks(
-				block.clientId,
-				rawHandler( { HTML: getBlockContent( block ) } )
-			),
-	} ) )
-)( BlockConvertButton );
+	if ( ! block || block.name !== 'core/html' ) {
+		return null;
+	}
+
+	return (
+		<MenuItem
+			onClick={ () =>
+				replaceBlocks(
+					clientId,
+					rawHandler( { HTML: getBlockContent( block ) } )
+				)
+			}
+		>
+			{ __( 'Convert to Blocks' ) }
+		</MenuItem>
+	);
+}
+
+export default BlockHTMLConvertButton;

package/src/components/block-settings-menu-controls/index.js

@@ -112,7 +112,7 @@ const BlockSettingsMenuControlsSlot = ( {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md
  *
  * @param {Object} props Fill props.
- * @return {WPElement} Element.
+ * @return {Element} Element.
  */
 function BlockSettingsMenuControls( { ...props } ) {
 	return (

package/src/components/block-switcher/index.js

@@ -93,8 +93,10 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		clientId: Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds,
 		maximumLength: 35,
 	} );
-	const isReusable = blocks.length === 1 && isReusableBlock( blocks[ 0 ] );
-	const isTemplate = blocks.length === 1 && isTemplatePart( blocks[ 0 ] );
+
+	const isSingleBlock = blocks.length === 1;
+	const isReusable = isSingleBlock && isReusableBlock( blocks[ 0 ] );
+	const isTemplate = isSingleBlock && isTemplatePart( blocks[ 0 ] );
 
 	function selectForMultipleBlocks( insertedBlocks ) {
 		if ( insertedBlocks.length > 1 ) {
@@ -162,24 +164,21 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		);
 	}
 
-	const blockSwitcherLabel = blockTitle;
+	const blockSwitcherLabel = isSingleBlock
+		? blockTitle
+		: __( 'Multiple blocks selected' );
 
-	const blockSwitcherDescription =
-		1 === blocks.length
-			? sprintf(
-					/* translators: %s: block title. */
-					__( '%s: Change block type or style' ),
-					blockTitle
-			  )
-			: sprintf(
-					/* translators: %d: number of blocks. */
-					_n(
-						'Change type of %d block',
-						'Change type of %d blocks',
-						blocks.length
-					),
+	const blockSwitcherDescription = isSingleBlock
+		? __( 'Change block type or style' )
+		: sprintf(
+				/* translators: %d: number of blocks. */
+				_n(
+					'Change type of %d block',
+					'Change type of %d blocks',
 					blocks.length
-			  );
+				),
+				blocks.length
+		  );
 
 	const hasBlockOrBlockVariationTransforms =
 		hasPossibleBlockTransformations ||

package/src/components/block-switcher/test/__snapshots__/index.js.snap

@@ -48,7 +48,7 @@ exports[`BlockSwitcherDropdownMenu should render enabled block switcher with mul
         aria-describedby="components-button__description-2"
         aria-expanded="false"
         aria-haspopup="true"
-        aria-label="Block Name"
+        aria-label="Multiple blocks selected"
         class="components-button components-dropdown-menu__toggle has-icon"
         data-toolbar-item="true"
         type="button"
@@ -105,7 +105,7 @@ exports[`BlockSwitcherDropdownMenu should render switcher with blocks 1`] = `
         <span
           id="components-button__description-0"
         >
-          Block Name: Change block type or style
+          Change block type or style
         </span>
       </div>
     </div>

package/src/components/block-tools/block-selection-button.js

@@ -49,7 +49,7 @@ import BlockMover from '../block-mover';
  * @param {string} props          Component props.
  * @param {string} props.clientId Client ID of block.
  *
- * @return {WPComponent} The component to be rendered.
+ * @return {Component} The component to be rendered.
  */
 function BlockSelectionButton( { clientId, rootClientId } ) {
 	const blockInformation = useBlockDisplayInformation( clientId );

package/src/components/border-radius-control/index.js

@@ -44,7 +44,7 @@ const MAX_BORDER_RADIUS_VALUES = {
  * @param {Function} props.onChange Callback to handle onChange.
  * @param {Object}   props.values   Border radius values.
  *
- * @return {WPElement}              Custom border radius control.
+ * @return {Element}              Custom border radius control.
  */
 export default function BorderRadiusControl( { onChange, values } ) {
 	const [ isLinked, setIsLinked ] = useState(

package/src/components/child-layout-control/index.js

@@ -31,7 +31,7 @@ function helpText( selfStretch, parentLayout ) {
  * @param {Function} props.onChange     Function to update the child layout value.
  * @param {Object}   props.parentLayout The parent layout value.
  *
- * @return {WPElement} child layout edit element.
+ * @return {Element} child layout edit element.
  */
 export default function ChildLayoutControl( {
 	value: childLayout = {},

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -218,7 +218,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                         <button
                           aria-label="Color: red"
                           aria-selected="true"
-                          class="components-button components-circular-option-picker__option is-pressed"
+                          class="components-button components-circular-option-picker__option"
                           id="components-circular-option-picker-0-0"
                           role="option"
                           style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"

package/src/components/colors/with-colors.js

@@ -77,7 +77,7 @@ const withEditorColorPalette = () =>
  * @param {Array}    colorTypes       An array of color types (e.g. 'backgroundColor, borderColor).
  * @param {Function} withColorPalette A HOC for injecting the 'colors' prop into the WrappedComponent.
  *
- * @return {WPComponent} The component that can be used as a HOC.
+ * @return {Component} The component that can be used as a HOC.
  */
 function createColorHOC( colorTypes, withColorPalette ) {
 	const colorMap = colorTypes.reduce( ( colorObject, colorType ) => {

package/src/components/copy-handler/README.md

@@ -1,5 +1,7 @@
 # Copy Handler
 
+**Deprecated**
+
 The `CopyHandler` component handles the copy/cut and paste events of its children blocks. It handles multiple selection of blocks as well.
 
 Concretely, it handles the display of success messages and takes care of copying the block to the clipboard. It uses for that the [serialize function](https://github.com/WordPress/gutenberg/blob/HEAD/packages/blocks/src/api/serializer.js), which outputs HTML augmented with the HTML-comment demarcations to denote blocks.