@wordpress/block-editor 9.1.0 → 9.4.0

package/src/components/block-settings-menu/block-edit-visually-button.js

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { rawHandler, getBlockContent } from '@wordpress/blocks';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export default function BlockEditVisuallyButton( { clientIds, ...props } ) {
+	const { block, shouldRender } = useSelect(
+		( select ) => {
+			const firstBlockClientId = clientIds[ 0 ];
+			const { isBlockMultiSelected, getBlockMode, getBlock } =
+				select( blockEditorStore );
+			const isSingleSelected =
+				! isBlockMultiSelected( firstBlockClientId );
+			const isHtmlMode = getBlockMode( firstBlockClientId ) === 'html';
+
+			return {
+				block: getBlock( firstBlockClientId ),
+				shouldRender: isSingleSelected && isHtmlMode,
+			};
+		},
+		[ clientIds[ 0 ] ]
+	);
+
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const onClick = useCallback( () => {
+		replaceBlocks(
+			block.clientId,
+			rawHandler( { HTML: getBlockContent( block ) } )
+		);
+	}, [ block ] );
+
+	if ( ! shouldRender ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton onClick={ onClick } { ...props }>
+				{ __( 'Edit visually' ) }
+			</ToolbarButton>
+		</ToolbarGroup>
+	);
+}

package/src/components/block-settings-menu/block-mode-toggle.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -17,6 +12,8 @@ import { compose } from '@wordpress/compose';
  */
 import { store as blockEditorStore } from '../../store';
 
+const noop = () => {};
+
 export function BlockModeToggle( {
 	blockType,
 	mode,
@@ -39,9 +36,8 @@ export function BlockModeToggle( {
 
 export default compose( [
 	withSelect( ( select, { clientId } ) => {
-		const { getBlock, getBlockMode, getSettings } = select(
-			blockEditorStore
-		);
+		const { getBlock, getBlockMode, getSettings } =
+			select( blockEditorStore );
 		const block = getBlock( clientId );
 		const isCodeEditingEnabled = getSettings().codeEditingEnabled;
 

package/src/components/block-settings-menu/block-settings-dropdown.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { castArray, flow, noop } from 'lodash';
+import { castArray, flow } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -33,6 +33,7 @@ import { store as blockEditorStore } from '../../store';
 import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 
+const noop = () => {};
 const POPOVER_PROPS = {
 	className: 'block-editor-block-settings-menu__popover',
 	position: 'bottom right',
@@ -41,7 +42,9 @@ const POPOVER_PROPS = {
 
 function CopyMenuItem( { blocks, onCopy } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
-	return <MenuItem ref={ ref }>{ __( 'Copy' ) }</MenuItem>;
+	const copyMenuItemLabel =
+		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
+	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
 export function BlockSettingsDropdown( {
@@ -82,9 +85,8 @@ export function BlockSettingsDropdown( {
 				hasReducedUI: getSettings().hasReducedUI,
 				onlyBlock: 1 === getBlockCount(),
 				parentBlockType: getBlockType( parentBlockName ),
-				previousBlockClientId: getPreviousBlockClientId(
-					firstBlockClientId
-				),
+				previousBlockClientId:
+					getPreviousBlockClientId( firstBlockClientId ),
 				nextBlockClientId: getNextBlockClientId( firstBlockClientId ),
 				selectedBlockClientIds: getSelectedBlockClientIds(),
 			};
@@ -108,9 +110,8 @@ export function BlockSettingsDropdown( {
 		};
 	}, [] );
 
-	const { selectBlock, toggleBlockHighlight } = useDispatch(
-		blockEditorStore
-	);
+	const { selectBlock, toggleBlockHighlight } =
+		useDispatch( blockEditorStore );
 
 	const updateSelectionAfterDuplicate = useCallback(
 		__experimentalSelectBlock

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

@@ -7,20 +7,24 @@ import { ToolbarGroup, ToolbarItem } from '@wordpress/components';
  * Internal dependencies
  */
 import BlockSettingsDropdown from './block-settings-dropdown';
+import BlockEditVisuallyButton from './block-edit-visually-button';
 
 export function BlockSettingsMenu( { clientIds, ...props } ) {
 	return (
-		<ToolbarGroup>
-			<ToolbarItem>
-				{ ( toggleProps ) => (
-					<BlockSettingsDropdown
-						clientIds={ clientIds }
-						toggleProps={ toggleProps }
-						{ ...props }
-					/>
-				) }
-			</ToolbarItem>
-		</ToolbarGroup>
+		<>
+			<BlockEditVisuallyButton clientIds={ clientIds } { ...props } />
+			<ToolbarGroup>
+				<ToolbarItem>
+					{ ( toggleProps ) => (
+						<BlockSettingsDropdown
+							clientIds={ clientIds }
+							toggleProps={ toggleProps }
+							{ ...props }
+						/>
+					) }
+				</ToolbarItem>
+			</ToolbarGroup>
+		</>
 	);
 }
 

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

@@ -20,7 +20,7 @@ import {
 	useConvertToGroupButtonProps,
 	ConvertToGroupButton,
 } from '../convert-to-group-buttons';
-import { BlockLockMenuItem } from '../block-lock';
+import { BlockLockMenuItem, useBlockLock } from '../block-lock';
 import { store as blockEditorStore } from '../../store';
 
 const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
@@ -47,7 +47,8 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 		[ clientIds ]
 	);
 
-	const showLockButton = selectedClientIds.length === 1;
+	const { canLock } = useBlockLock( selectedClientIds[ 0 ] );
+	const showLockButton = selectedClientIds.length === 1 && canLock;
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { noop, debounce } from 'lodash';
+import { debounce } from 'lodash';
 import classnames from 'classnames';
 
 /**
@@ -39,6 +39,8 @@ function BlockStylesPreviewPanelFill( { children, scope, ...props } ) {
 // The value is the equivalent of the container's right position.
 const DEFAULT_POSITION_TOP = 16;
 
+const noop = () => {};
+
 // Block Styles component for the Settings Sidebar.
 function BlockStyles( {
 	clientId,

package/src/components/block-styles/menu-items.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -14,6 +9,8 @@ import { check } from '@wordpress/icons';
  */
 import useStylesForBlocks from './use-styles-for-block';
 
+const noop = () => {};
+
 export default function BlockStylesMenuItems( { clientId, onSwitch = noop } ) {
 	const { onSelect, stylesToRender, activeStyle } = useStylesForBlocks( {
 		clientId,

package/src/components/block-switcher/block-transformations-menu.js

@@ -21,10 +21,8 @@ const BlockTransformationsMenu = ( {
 	onSelect,
 	blocks,
 } ) => {
-	const [
-		hoveredTransformItemName,
-		setHoveredTransformItemName,
-	] = useState();
+	const [ hoveredTransformItemName, setHoveredTransformItemName ] =
+		useState();
 	return (
 		<MenuGroup label={ __( 'Transform to' ) } className={ className }>
 			{ hoveredTransformItemName && (

package/src/components/block-title/use-block-display-title.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { truncate } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -78,8 +73,15 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
 	const blockTitle =
 		label && label !== blockType.title ? label : blockInformation.title;
 
-	if ( maximumLength && maximumLength > 0 ) {
-		return truncate( blockTitle, { length: maximumLength } );
+	if (
+		maximumLength &&
+		maximumLength > 0 &&
+		blockTitle.length > maximumLength
+	) {
+		const omission = '...';
+		return (
+			blockTitle.slice( 0, maximumLength - omission.length ) + omission
+		);
 	}
 
 	return blockTitle;

package/src/components/block-toolbar/index.native.js

@@ -12,11 +12,8 @@ import { store as blockEditorStore } from '../../store';
 
 export default function BlockToolbar() {
 	const { blockClientIds, isValid, mode } = useSelect( ( select ) => {
-		const {
-			getBlockMode,
-			getSelectedBlockClientIds,
-			isBlockValid,
-		} = select( blockEditorStore );
+		const { getBlockMode, getSelectedBlockClientIds, isBlockValid } =
+			select( blockEditorStore );
 		const selectedBlockClientIds = getSelectedBlockClientIds();
 
 		return {

package/src/components/block-toolbar/utils.js

@@ -1,15 +1,10 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useState, useRef, useEffect } from '@wordpress/element';
 
 const { clearTimeout, setTimeout } = window;
-
+const noop = () => {};
 const DEBOUNCE_TIMEOUT = 200;
 
 /**
@@ -116,11 +111,8 @@ export function useShowMoversGestures( {
 	onChange = noop,
 } ) {
 	const [ isFocused, setIsFocused ] = useState( false );
-	const {
-		showMovers,
-		debouncedShowMovers,
-		debouncedHideMovers,
-	} = useDebouncedShowMovers( { ref, debounceTimeout, isFocused, onChange } );
+	const { showMovers, debouncedShowMovers, debouncedHideMovers } =
+		useDebouncedShowMovers( { ref, debounceTimeout, isFocused, onChange } );
 
 	const registerRef = useRef( false );
 

package/src/components/block-tools/block-contextual-toolbar.js

@@ -20,11 +20,8 @@ import { store as blockEditorStore } from '../../store';
 function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const { blockType, hasParents, showParentSelector } = useSelect(
 		( select ) => {
-			const {
-				getBlockName,
-				getBlockParents,
-				getSelectedBlockClientIds,
-			} = select( blockEditorStore );
+			const { getBlockName, getBlockParents, getSelectedBlockClientIds } =
+				select( blockEditorStore );
 			const { getBlockType } = select( blocksStore );
 			const selectedBlockClientIds = getSelectedBlockClientIds();
 			const selectedBlockClientId = selectedBlockClientIds[ 0 ];

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

@@ -262,6 +262,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 						onClick={ () => setNavigationMode( false ) }
 						onKeyDown={ onKeyDown }
 						label={ label }
+						showTooltip={ false }
 						className="block-selection-button_select-button"
 					>
 						<BlockTitle

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

@@ -40,9 +40,8 @@ export default function BlockTools( {
 		[]
 	);
 	const isMatch = useShortcutEventMatch();
-	const { getSelectedBlockClientIds, getBlockRootClientId } = useSelect(
-		blockEditorStore
-	);
+	const { getSelectedBlockClientIds, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const {
 		duplicateBlocks,
 		removeBlocks,

package/src/components/block-types-list/index.native.js

@@ -45,10 +45,8 @@ export default function BlockTypesList( {
 	}, [] );
 
 	function calculateItemWidth() {
-		const {
-			paddingLeft: itemPaddingLeft,
-			paddingRight: itemPaddingRight,
-		} = InserterButton.Styles.modalItem;
+		const { paddingLeft: itemPaddingLeft, paddingRight: itemPaddingRight } =
+			InserterButton.Styles.modalItem;
 		const { width } = InserterButton.Styles.modalIconWrapper;
 		return width + itemPaddingLeft + itemPaddingRight;
 	}

package/src/components/block-variation-transforms/index.js

@@ -17,6 +17,7 @@ import { chevronDown } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import BlockIcon from '../block-icon';
 import { store as blockEditorStore } from '../../store';
 
 function VariationsButtons( {
@@ -33,7 +34,7 @@ function VariationsButtons( {
 			{ variations.map( ( variation ) => (
 				<Button
 					key={ variation.name }
-					icon={ variation.icon }
+					icon={ <BlockIcon icon={ variation.icon } showColors /> }
 					isPressed={ selectedValue === variation.name }
 					label={
 						selectedValue === variation.name
@@ -98,12 +99,10 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 	const { activeBlockVariation, variations } = useSelect(
 		( select ) => {
-			const { getActiveBlockVariation, getBlockVariations } = select(
-				blocksStore
-			);
-			const { getBlockName, getBlockAttributes } = select(
-				blockEditorStore
-			);
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
 			const name = blockClientId && getBlockName( blockClientId );
 			return {
 				activeBlockVariation: getActiveBlockVariation(
@@ -121,9 +120,12 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	// Check if each variation has a unique icon.
 	const hasUniqueIcons = useMemo( () => {
 		const variationIcons = new Set();
+		if ( ! variations ) {
+			return false;
+		}
 		variations.forEach( ( variation ) => {
 			if ( variation.icon ) {
-				variationIcons.add( variation.icon );
+				variationIcons.add( variation.icon?.src || variation.icon );
 			}
 		} );
 		return variationIcons.size === variations.length;

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

@@ -2,13 +2,14 @@
  * External dependencies
  */
 import { create, act } from 'react-test-renderer';
-import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
 import ColorPaletteControl from '../control';
 
+const noop = () => {};
+
 describe( 'ColorPaletteControl', () => {
 	it( 'matches the snapshot', async () => {
 		let root;

package/src/components/color-style-selector/index.js

@@ -49,35 +49,34 @@ const ColorSelectorIcon = ( { style, className } ) => {
  *
  * @return {*} React toggle button component.
  */
-const renderToggleComponent = ( { TextColor, BackgroundColor } ) => ( {
-	onToggle,
-	isOpen,
-} ) => {
-	const openOnArrowDown = ( event ) => {
-		if ( ! isOpen && event.keyCode === DOWN ) {
-			event.preventDefault();
-			onToggle();
-		}
-	};
+const renderToggleComponent =
+	( { TextColor, BackgroundColor } ) =>
+	( { onToggle, isOpen } ) => {
+		const openOnArrowDown = ( event ) => {
+			if ( ! isOpen && event.keyCode === DOWN ) {
+				event.preventDefault();
+				onToggle();
+			}
+		};
 
-	return (
-		<ToolbarGroup>
-			<ToolbarButton
-				className="components-toolbar__control block-library-colors-selector__toggle"
-				label={ __( 'Open Colors Selector' ) }
-				onClick={ onToggle }
-				onKeyDown={ openOnArrowDown }
-				icon={
-					<BackgroundColor>
-						<TextColor>
-							<ColorSelectorIcon />
-						</TextColor>
-					</BackgroundColor>
-				}
-			/>
-		</ToolbarGroup>
-	);
-};
+		return (
+			<ToolbarGroup>
+				<ToolbarButton
+					className="components-toolbar__control block-library-colors-selector__toggle"
+					label={ __( 'Open Colors Selector' ) }
+					onClick={ onToggle }
+					onKeyDown={ openOnArrowDown }
+					icon={
+						<BackgroundColor>
+							<TextColor>
+								<ColorSelectorIcon />
+							</TextColor>
+						</BackgroundColor>
+					}
+				/>
+			</ToolbarGroup>
+		);
+	};
 
 const BlockColorsStyleSelector = ( { children, ...other } ) => {
 	deprecated( `wp.blockEditor.BlockColorsStyleSelector`, {

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

@@ -28,13 +28,13 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const EnhancedComponent = withCustomColors(
-			'backgroundColor'
-		)( ( props ) => (
-			<button onClick={ () => props.setBackgroundColor( 'ff0000' ) }>
-				Test Me
-			</button>
-		) );
+		const EnhancedComponent = withCustomColors( 'backgroundColor' )(
+			( props ) => (
+				<button onClick={ () => props.setBackgroundColor( 'ff0000' ) }>
+					Test Me
+				</button>
+			)
+		);
 
 		const setAttributes = jest.fn();
 
@@ -56,13 +56,13 @@ describe( 'createCustomColorsHOC', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );
-		const EnhancedComponent = withCustomColors(
-			'backgroundColor'
-		)( ( props ) => (
-			<button onClick={ () => props.setBackgroundColor( '000000' ) }>
-				Test Me
-			</button>
-		) );
+		const EnhancedComponent = withCustomColors( 'backgroundColor' )(
+			( props ) => (
+				<button onClick={ () => props.setBackgroundColor( '000000' ) }>
+					Test Me
+				</button>
+			)
+		);
 
 		const setAttributes = jest.fn();
 

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

@@ -30,9 +30,8 @@ import useSetting from '../use-setting';
  */
 const withCustomColorPalette = ( colorsArray ) =>
 	createHigherOrderComponent(
-		( WrappedComponent ) => ( props ) => (
-			<WrappedComponent { ...props } colors={ colorsArray } />
-		),
+		( WrappedComponent ) => ( props ) =>
+			<WrappedComponent { ...props } colors={ colorsArray } />,
 		'withCustomColorPalette'
 	);
 
@@ -96,9 +95,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 
 					this.setters = this.createSetters();
 					this.colorUtils = {
-						getMostReadableColor: this.getMostReadableColor.bind(
-							this
-						),
+						getMostReadableColor:
+							this.getMostReadableColor.bind( this ),
 					};
 
 					this.state = {};
@@ -117,9 +115,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 							colorContext,
 							colorAttributeName
 						) => {
-							const upperFirstColorAttributeName = upperFirst(
-								colorAttributeName
-							);
+							const upperFirstColorAttributeName =
+								upperFirst( colorAttributeName );
 							const customColorAttributeName = `custom${ upperFirstColorAttributeName }`;
 							settersAccumulator[
 								`set${ upperFirstColorAttributeName }`
@@ -181,9 +178,8 @@ function createColorHOC( colorTypes, withColorPalette ) {
 								previousColor === colorObject.color &&
 								previousColorObject
 							) {
-								newState[
-									colorAttributeName
-								] = previousColorObject;
+								newState[ colorAttributeName ] =
+									previousColorObject;
 							} else {
 								newState[ colorAttributeName ] = {
 									...colorObject,