@wordpress/block-editor 9.2.0 → 9.5.0

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-styles/preview.native.js

@@ -8,8 +8,9 @@ import {
 	Dimensions,
 	Animated,
 	Easing,
-	Image,
 } from 'react-native';
+import FastImage from 'react-native-fast-image';
+
 /**
  * WordPress dependencies
  */
@@ -90,7 +91,7 @@ function StylePreview( { onPress, isActive, style, url } ) {
 				<View style={ styles.imageWrapper }>
 					{ isActive &&
 						getOutline( [ styles.outline, innerOutlineStyle ] ) }
-					<Image
+					<FastImage
 						style={ [ styles.image, styles[ name ] ] }
 						source={ { uri: url } }
 					/>

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-switcher/index.js

@@ -98,8 +98,14 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	// Pattern transformation through the `Patterns` API.
 	const onPatternTransform = ( transformedBlocks ) =>
 		replaceBlocks( clientIds, transformedBlocks );
+
+	/**
+	 * The `isTemplate` check is a stopgap solution here.
+	 * Ideally, the Transforms API should handle this
+	 * by allowing to exclude blocks from wildcard transformations.
+	 */
 	const hasPossibleBlockTransformations =
-		!! possibleBlockTransformations.length && canRemove;
+		!! possibleBlockTransformations.length && canRemove && ! isTemplate;
 	const hasPatternTransformation = !! patterns?.length && canRemove;
 	if ( ! hasBlockStyles && ! hasPossibleBlockTransformations ) {
 		return (

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

@@ -17,9 +17,10 @@ import useBlockDisplayTitle from './use-block-display-title';
  * @param {Object}           props
  * @param {string}           props.clientId      Client ID of block.
  * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  *
  * @return {JSX.Element} Block title.
  */
-export default function BlockTitle( { clientId, maximumLength } ) {
-	return useBlockDisplayTitle( clientId, maximumLength );
+export default function BlockTitle( { clientId, maximumLength, context } ) {
+	return useBlockDisplayTitle( { clientId, maximumLength, context } );
 }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { truncate } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -26,14 +21,20 @@ import { store as blockEditorStore } from '../../store';
  * @example
  *
  * ```js
- * useBlockDisplayTitle( 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', 17 );
+ * useBlockDisplayTitle( { clientId: 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1', maximumLength: 17 } );
  * ```
  *
- * @param {string}           clientId      Client ID of block.
- * @param {number|undefined} maximumLength The maximum length that the block title string may be before truncated.
+ * @param {Object}           props
+ * @param {string}           props.clientId      Client ID of block.
+ * @param {number|undefined} props.maximumLength The maximum length that the block title string may be before truncated.
+ * @param {string|undefined} props.context       The context to pass to `getBlockLabel`.
  * @return {?string} Block title.
  */
-export default function useBlockDisplayTitle( clientId, maximumLength ) {
+export default function useBlockDisplayTitle( {
+	clientId,
+	maximumLength,
+	context,
+} ) {
 	const { attributes, name, reusableBlockTitle } = useSelect(
 		( select ) => {
 			if ( ! clientId ) {
@@ -68,7 +69,7 @@ export default function useBlockDisplayTitle( clientId, maximumLength ) {
 	}
 	const blockType = getBlockType( name );
 	const blockLabel = blockType
-		? getBlockLabel( blockType, attributes )
+		? getBlockLabel( blockType, attributes, context )
 		: null;
 
 	const label = reusableBlockTitle || blockLabel;
@@ -78,8 +79,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 ];
@@ -39,11 +36,13 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 					getBlockType( getBlockName( selectedBlockClientId ) ),
 				hasParents: parents.length,
 				showParentSelector:
+					parentBlockType &&
 					hasBlockSupport(
 						parentBlockType,
 						'__experimentalParentSelector',
 						true
-					) && selectedBlockClientIds.length <= 1,
+					) &&
+					selectedBlockClientIds.length <= 1,
 			};
 		},
 		[]

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

@@ -99,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(

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

@@ -82,6 +82,8 @@ export default function BorderRadiusControl( { onChange, values } ) {
 							units={ units }
 						/>
 						<RangeControl
+							label={ __( 'Border radius' ) }
+							hideLabelFromVision
 							className="components-border-radius-control__range-control"
 							value={ allValue ?? '' }
 							min={ MIN_BORDER_RADIUS_VALUE }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isString, kebabCase, reduce, upperFirst } from 'lodash';
+import { kebabCase, reduce, upperFirst } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -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'
 	);
 
@@ -79,7 +78,7 @@ function createColorHOC( colorTypes, withColorPalette ) {
 		( colorObject, colorType ) => {
 			return {
 				...colorObject,
-				...( isString( colorType )
+				...( typeof colorType === 'string'
 					? { [ colorType ]: kebabCase( colorType ) }
 					: colorType ),
 			};
@@ -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,