@wordpress/block-editor 9.3.0 → 9.6.0

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

@@ -12,6 +12,7 @@ import { useMemo } from '@wordpress/element';
 import BlockList from '../block-list';
 import Iframe from '../iframe';
 import EditorStyles from '../editor-styles';
+import { __unstablePresetDuotoneFilter as PresetDuotoneFilter } from '../../components/duotone';
 import { store } from '../../store';
 
 // This is used to avoid rendering the block list if the sizes change.
@@ -28,11 +29,12 @@ function AutoBlockPreview( {
 		useResizeObserver();
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, assets } = useSelect( ( select ) => {
+	const { styles, assets, duotone } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
 			assets: settings.__unstableResolvedAssets,
+			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
 
@@ -51,11 +53,14 @@ function AutoBlockPreview( {
 		return styles;
 	}, [ styles ] );
 
+	const svgFilters = useMemo( () => {
+		return [ ...( duotone?.default ?? [] ), ...( duotone?.theme ?? [] ) ];
+	}, [ duotone ] );
+
 	// Initialize on render instead of module top level, to avoid circular dependency issues.
 	MemoizedBlockList = MemoizedBlockList || pure( BlockList );
 
 	const scale = containerWidth / viewportWidth;
-
 	return (
 		<div className="block-editor-block-preview__container">
 			{ containerResizeListener }
@@ -100,12 +105,21 @@ function AutoBlockPreview( {
 						// See: https://github.com/WordPress/gutenberg/pull/38175.
 						maxHeight: MAX_HEIGHT,
 						minHeight:
-							scale < 1 && __experimentalMinHeight
+							scale !== 0 && scale < 1 && __experimentalMinHeight
 								? __experimentalMinHeight / scale
 								: __experimentalMinHeight,
 					} }
 				>
 					{ contentResizeListener }
+					{
+						/* Filters need to be rendered before children to avoid Safari rendering issues. */
+						svgFilters.map( ( preset ) => (
+							<PresetDuotoneFilter
+								preset={ preset }
+								key={ preset.slug }
+							/>
+						) )
+					}
 					<MemoizedBlockList renderAppender={ false } />
 				</Iframe>
 			</Disabled>

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

@@ -22,6 +22,7 @@ export function BlockModeToggle( {
 	isCodeEditingEnabled = true,
 } ) {
 	if (
+		! blockType ||
 		! hasBlockSupport( blockType, 'html', true ) ||
 		! isCodeEditingEnabled
 	) {

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

@@ -16,7 +16,7 @@ import {
 	useCallback,
 	useRef,
 } from '@wordpress/element';
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
 import { useCopyToClipboard } from '@wordpress/compose';
 
@@ -42,7 +42,8 @@ const POPOVER_PROPS = {
 
 function CopyMenuItem( { blocks, onCopy } ) {
 	const ref = useCopyToClipboard( () => serialize( blocks ), onCopy );
-	const copyMenuItemLabel = _n( 'Copy block', 'Copy blocks', blocks.length );
+	const copyMenuItemLabel =
+		blocks.length > 1 ? __( 'Copy blocks' ) : __( 'Copy block' );
 	return <MenuItem ref={ ref }>{ copyMenuItemLabel }</MenuItem>;
 }
 
@@ -124,7 +125,10 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const blockTitle = useBlockDisplayTitle( firstBlockClientId, 25 );
+	const blockTitle = useBlockDisplayTitle( {
+		clientId: firstBlockClientId,
+		maximumLength: 25,
+	} );
 
 	const updateSelectionAfterRemove = 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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { compact, map } from 'lodash';
+import { map } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -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' );
@@ -37,7 +37,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 				clientIds !== null ? clientIds : getSelectedBlockClientIds();
 			return {
 				selectedBlocks: map(
-					compact( getBlocksByClientId( ids ) ),
+					getBlocksByClientId( ids ).filter( Boolean ),
 					( block ) => block.name
 				),
 				selectedClientIds: ids,
@@ -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/preview.native.js

@@ -10,6 +10,7 @@ import {
 	Easing,
 	Image,
 } from 'react-native';
+
 /**
  * WordPress dependencies
  */

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-tools/block-contextual-toolbar.js

@@ -36,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/block-selection-button.js

@@ -102,7 +102,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 		getMultiSelectedBlocksEndClientId,
 		getPreviousBlockClientId,
 		getNextBlockClientId,
-		isNavigationMode,
 	} = useSelect( blockEditorStore );
 	const {
 		selectBlock,
@@ -160,10 +159,6 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				selectedBlockClientId;
 		}
 		const startingBlockClientId = hasBlockMovingClientId();
-		if ( isEscape && isNavigationMode() ) {
-			clearSelectedBlock();
-			event.preventDefault();
-		}
 		if ( isEscape && startingBlockClientId && ! event.defaultPrevented ) {
 			setBlockMovingClientId( null );
 			event.preventDefault();

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

@@ -53,6 +53,8 @@ export default function BlockTools( {
 	} = useDispatch( blockEditorStore );
 
 	function onKeyDown( event ) {
+		if ( event.defaultPrevented ) return;
+
 		if ( isMatch( 'core/block-editor/move-up', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
 			if ( clientIds.length ) {
@@ -93,12 +95,13 @@ export default function BlockTools( {
 			}
 		} else if ( isMatch( 'core/block-editor/unselect', event ) ) {
 			const clientIds = getSelectedBlockClientIds();
-			if ( clientIds.length > 1 ) {
+			if ( clientIds.length ) {
 				event.preventDefault();
 				clearSelectedBlock();
 				event.target.ownerDocument.defaultView
 					.getSelection()
 					.removeAllRanges();
+				__unstableContentRef?.current.focus();
 			}
 		}
 	}

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

@@ -4,7 +4,9 @@
 import {
 	Dimensions,
 	FlatList,
+	SectionList,
 	StyleSheet,
+	Text,
 	TouchableWithoutFeedback,
 	View,
 } from 'react-native';
@@ -13,7 +15,11 @@ import {
  * WordPress dependencies
  */
 import { useState, useEffect } from '@wordpress/element';
-import { BottomSheet, InserterButton } from '@wordpress/components';
+import { BottomSheet, Gradient, InserterButton } from '@wordpress/components';
+import {
+	usePreferredColorScheme,
+	usePreferredColorSchemeStyle,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -24,7 +30,7 @@ const MIN_COL_NUM = 3;
 
 export default function BlockTypesList( {
 	name,
-	items,
+	sections,
 	onSelect,
 	listProps,
 	initialNumToRender = 3,
@@ -80,33 +86,79 @@ export default function BlockTypesList( {
 		listProps.contentContainerStyle
 	);
 
+	const renderSection = ( { item } ) => {
+		return (
+			<TouchableWithoutFeedback accessible={ false }>
+				<FlatList
+					data={ item.list }
+					key={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.
+					numColumns={ numberOfColumns }
+					ItemSeparatorComponent={ () => (
+						<TouchableWithoutFeedback accessible={ false }>
+							<View
+								style={
+									styles[ 'block-types-list__row-separator' ]
+								}
+							/>
+						</TouchableWithoutFeedback>
+					) }
+					scrollEnabled={ false }
+					renderItem={ renderListItem }
+				/>
+			</TouchableWithoutFeedback>
+		);
+	};
+
+	const renderListItem = ( { item } ) => {
+		return (
+			<InserterButton
+				item={ item }
+				itemWidth={ itemWidth }
+				maxWidth={ maxWidth }
+				onSelect={ onSelect }
+			/>
+		);
+	};
+
+	const colorScheme = usePreferredColorScheme();
+	const sectionHeaderGradientValue =
+		colorScheme === 'light'
+			? 'linear-gradient(#fff 70%, rgba(255, 255, 255, 0))'
+			: 'linear-gradient(#2e2e2e 70%, rgba(46, 46, 46, 0))';
+	const sectionHeaderTitleStyles = usePreferredColorSchemeStyle(
+		styles[ 'block-types-list__section-header-title' ],
+		styles[ 'block-types-list__section-header-title--dark' ]
+	);
+
+	const renderSectionHeader = ( { section: { metadata } } ) => {
+		if ( ! metadata?.icon || ! metadata?.title ) {
+			return null;
+		}
+
+		return (
+			<TouchableWithoutFeedback accessible={ false }>
+				<Gradient
+					gradientValue={ sectionHeaderGradientValue }
+					style={ styles[ 'block-types-list__section-header' ] }
+				>
+					{ metadata?.icon }
+					<Text style={ sectionHeaderTitleStyles }>
+						{ metadata?.title }
+					</Text>
+				</Gradient>
+			</TouchableWithoutFeedback>
+		);
+	};
+
 	return (
-		<FlatList
+		<SectionList
 			onLayout={ onLayout }
-			key={ `InserterUI-${ name }-${ numberOfColumns }` } // Re-render when numberOfColumns changes.
 			testID={ `InserterUI-${ name }` }
 			keyboardShouldPersistTaps="always"
-			numColumns={ numberOfColumns }
-			data={ items }
+			sections={ sections }
 			initialNumToRender={ initialNumToRender }
-			ItemSeparatorComponent={ () => (
-				<TouchableWithoutFeedback accessible={ false }>
-					<View
-						style={ styles[ 'block-types-list__row-separator' ] }
-					/>
-				</TouchableWithoutFeedback>
-			) }
-			keyExtractor={ ( item ) => item.id }
-			renderItem={ ( { item } ) => (
-				<InserterButton
-					{ ...{
-						item,
-						itemWidth,
-						maxWidth,
-						onSelect,
-					} }
-				/>
-			) }
+			renderItem={ renderSection }
+			renderSectionHeader={ renderSectionHeader }
 			{ ...listProps }
 			contentContainerStyle={ {
 				...contentContainerStyle,

package/src/components/block-types-list/style.native.scss

@@ -5,3 +5,21 @@
 .block-types-list__column {
 	padding: $grid-unit-20;
 }
+
+.block-types-list__section-header {
+	align-items: center;
+	flex-direction: row;
+	justify-content: center;
+	padding-bottom: 16;
+	padding-top: 32;
+}
+
+.block-types-list__section-header-title {
+	color: $black;
+	font-size: 16px;
+	margin-left: 10px;
+}
+
+.block-types-list__section-header-title--dark {
+	color: $white;
+}

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/__snapshots__/control.js.snap

@@ -6,10 +6,6 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   font-size: 13px;
 }
 
-.emotion-2 {
-  margin-bottom: calc(4px * 2);
-}
-
 .components-panel__row .emotion-2 {
   margin-bottom: inherit;
 }

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createCustomColorsHOC provides the the wrapped component with color values and setter functions as props 1`] = `
+exports[`createCustomColorsHOC provides the wrapped component with color values and setter functions as props 1`] = `
 <Component
   attributes={
     Object {

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

@@ -9,7 +9,7 @@ import { shallow, mount } from 'enzyme';
 import { createCustomColorsHOC } from '../with-colors';
 
 describe( 'createCustomColorsHOC', () => {
-	it( 'provides the the wrapped component with color values and setter functions as props', () => {
+	it( 'provides the wrapped component with color values and setter functions as props', () => {
 		const withCustomColors = createCustomColorsHOC( [
 			{ name: 'Red', slug: 'red', color: 'ff0000' },
 		] );

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
@@ -78,7 +78,7 @@ function createColorHOC( colorTypes, withColorPalette ) {
 		( colorObject, colorType ) => {
 			return {
 				...colorObject,
-				...( isString( colorType )
+				...( typeof colorType === 'string'
 					? { [ colorType ]: kebabCase( colorType ) }
 					: colorType ),
 			};