@wordpress/block-editor 11.5.0 → 11.7.0

package/src/components/block-list/block-invalid-warning.js

@@ -4,9 +4,8 @@
 import { __, _x } from '@wordpress/i18n';
 import { Button, Modal } from '@wordpress/components';
 import { useState, useCallback, useMemo } from '@wordpress/element';
-import { getBlockType, createBlock, rawHandler } from '@wordpress/blocks';
-import { compose } from '@wordpress/compose';
-import { withDispatch, withSelect } from '@wordpress/data';
+import { createBlock, rawHandler } from '@wordpress/blocks';
+import { useDispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -15,38 +14,86 @@ import Warning from '../warning';
 import BlockCompare from '../block-compare';
 import { store as blockEditorStore } from '../../store';
 
-export function BlockInvalidWarning( {
-	convertToHTML,
-	convertToBlocks,
-	convertToClassic,
-	attemptBlockRecovery,
-	block,
-} ) {
-	const hasHTMLBlock = !! getBlockType( 'core/html' );
-	const [ compare, setCompare ] = useState( false );
+const blockToBlocks = ( block ) =>
+	rawHandler( {
+		HTML: block.originalContent,
+	} );
+
+export default function BlockInvalidWarning( { clientId } ) {
+	const { block, canInsertHTMLBlock, canInsertClassicBlock } = useSelect(
+		( select ) => {
+			const { canInsertBlockType, getBlock, getBlockRootClientId } =
+				select( blockEditorStore );
 
-	const onCompare = useCallback( () => setCompare( true ), [] );
+			const rootClientId = getBlockRootClientId( clientId );
+
+			return {
+				block: getBlock( clientId ),
+				canInsertHTMLBlock: canInsertBlockType(
+					'core/html',
+					rootClientId
+				),
+				canInsertClassicBlock: canInsertBlockType(
+					'core/freeform',
+					rootClientId
+				),
+			};
+		},
+		[ clientId ]
+	);
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const [ compare, setCompare ] = useState( false );
 	const onCompareClose = useCallback( () => setCompare( false ), [] );
 
-	// We memo the array here to prevent the children components from being updated unexpectedly.
-	const hiddenActions = useMemo(
+	const convert = useMemo(
+		() => ( {
+			toClassic() {
+				const classicBlock = createBlock( 'core/freeform', {
+					content: block.originalContent,
+				} );
+				return replaceBlock( block.clientId, classicBlock );
+			},
+			toHTML() {
+				const htmlBlock = createBlock( 'core/html', {
+					content: block.originalContent,
+				} );
+				return replaceBlock( block.clientId, htmlBlock );
+			},
+			toBlocks() {
+				const newBlocks = blockToBlocks( block );
+				return replaceBlock( block.clientId, newBlocks );
+			},
+			toRecoveredBlock() {
+				const recoveredBlock = createBlock(
+					block.name,
+					block.attributes,
+					block.innerBlocks
+				);
+				return replaceBlock( block.clientId, recoveredBlock );
+			},
+		} ),
+		[ block, replaceBlock ]
+	);
+
+	const secondaryActions = useMemo(
 		() =>
 			[
 				{
 					// translators: Button to fix block content
 					title: _x( 'Resolve', 'imperative verb' ),
-					onClick: onCompare,
+					onClick: () => setCompare( true ),
 				},
-				hasHTMLBlock && {
+				canInsertHTMLBlock && {
 					title: __( 'Convert to HTML' ),
-					onClick: convertToHTML,
+					onClick: convert.toHTML,
 				},
-				{
+				canInsertClassicBlock && {
 					title: __( 'Convert to Classic Block' ),
-					onClick: convertToClassic,
+					onClick: convert.toClassic,
 				},
 			].filter( Boolean ),
-		[ onCompare, convertToHTML, convertToClassic ]
+		[ canInsertHTMLBlock, canInsertClassicBlock, convert ]
 	);
 
 	return (
@@ -55,13 +102,13 @@ export function BlockInvalidWarning( {
 				actions={ [
 					<Button
 						key="recover"
-						onClick={ attemptBlockRecovery }
+						onClick={ convert.toRecoveredBlock }
 						variant="primary"
 					>
 						{ __( 'Attempt Block Recovery' ) }
 					</Button>,
 				] }
-				secondaryActions={ hiddenActions }
+				secondaryActions={ secondaryActions }
 			>
 				{ __( 'This block contains unexpected or invalid content.' ) }
 			</Warning>
@@ -76,8 +123,8 @@ export function BlockInvalidWarning( {
 				>
 					<BlockCompare
 						block={ block }
-						onKeep={ convertToHTML }
-						onConvert={ convertToBlocks }
+						onKeep={ convert.toHTML }
+						onConvert={ convert.toBlocks }
 						convertor={ blockToBlocks }
 						convertButtonText={ __( 'Convert to Blocks' ) }
 					/>
@@ -86,42 +133,3 @@ export function BlockInvalidWarning( {
 		</>
 	);
 }
-
-const blockToClassic = ( block ) =>
-	createBlock( 'core/freeform', {
-		content: block.originalContent,
-	} );
-const blockToHTML = ( block ) =>
-	createBlock( 'core/html', {
-		content: block.originalContent,
-	} );
-const blockToBlocks = ( block ) =>
-	rawHandler( {
-		HTML: block.originalContent,
-	} );
-const recoverBlock = ( { name, attributes, innerBlocks } ) =>
-	createBlock( name, attributes, innerBlocks );
-
-export default compose( [
-	withSelect( ( select, { clientId } ) => ( {
-		block: select( blockEditorStore ).getBlock( clientId ),
-	} ) ),
-	withDispatch( ( dispatch, { block } ) => {
-		const { replaceBlock } = dispatch( blockEditorStore );
-
-		return {
-			convertToClassic() {
-				replaceBlock( block.clientId, blockToClassic( block ) );
-			},
-			convertToHTML() {
-				replaceBlock( block.clientId, blockToHTML( block ) );
-			},
-			convertToBlocks() {
-				replaceBlock( block.clientId, blockToBlocks( block ) );
-			},
-			attemptBlockRecovery() {
-				replaceBlock( block.clientId, recoverBlock( block ) );
-			},
-		};
-	} ),
-] )( BlockInvalidWarning );

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

@@ -98,7 +98,16 @@ exports[`Block Mover Picker should match snapshot 1`] = `
             }
           }
         >
-          Svg
+          <Svg
+            colorScheme="light"
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
         </View>
       </View>
     </View>
@@ -157,7 +166,16 @@ exports[`Block Mover Picker should match snapshot 1`] = `
             }
           }
         >
-          Svg
+          <Svg
+            colorScheme="light"
+            height={24}
+            style={{}}
+            viewBox="0 0 24 24"
+            width={24}
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            Path
+          </Svg>
         </View>
       </View>
     </View>

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

@@ -12,7 +12,6 @@ import { Disabled } from '@wordpress/components';
 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.
@@ -32,11 +31,10 @@ function ScaledBlockPreview( {
 
 	const [ contentResizeListener, { height: contentHeight } ] =
 		useResizeObserver();
-	const { styles, duotone } = useSelect( ( select ) => {
+	const { styles } = useSelect( ( select ) => {
 		const settings = select( store ).getSettings();
 		return {
 			styles: settings.styles,
-			duotone: settings.__experimentalFeatures?.color?.duotone,
 		};
 	}, [] );
 
@@ -56,10 +54,6 @@ function ScaledBlockPreview( {
 		return styles;
 	}, [ styles, additionalStyles ] );
 
-	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 );
 
@@ -76,7 +70,6 @@ function ScaledBlockPreview( {
 			} }
 		>
 			<Iframe
-				head={ <EditorStyles styles={ editorStyles } /> }
 				contentRef={ useRefEffect( ( bodyElement ) => {
 					const {
 						ownerDocument: { documentElement },
@@ -108,16 +101,8 @@ function ScaledBlockPreview( {
 							: minHeight,
 				} }
 			>
+				<EditorStyles styles={ editorStyles } />
 				{ 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-preview/test/index.js

@@ -17,8 +17,6 @@ import {
  */
 import { useBlockPreview } from '../';
 
-jest.useRealTimers();
-
 describe( 'useBlockPreview', () => {
 	beforeAll( () => {
 		registerBlockType( 'core/test-block', {

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

@@ -48,7 +48,8 @@ const BlockSettingsMenuControlsSlot = ( {
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps();
+	const convertToGroupButtonProps =
+		useConvertToGroupButtonProps( selectedClientIds );
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton =
 		( isGroupable || isUngroupable ) && canRemove;

package/src/components/block-styles/style.scss

@@ -38,7 +38,7 @@
 	gap: $grid-unit-10;
 
 	.block-editor-block-styles__item {
-		color: $gray-800;
+		color: $gray-900;
 		box-shadow: inset 0 0 0 1px $gray-400;
 		display: inline-block;
 		width: calc(50% - #{$grid-unit-05});
@@ -51,7 +51,7 @@
 
 		&.is-active,
 		&.is-active:hover {
-			background-color: $gray-800;
+			background-color: $gray-900;
 			box-shadow: none;
 		}
 

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

@@ -75,6 +75,7 @@ const BlockTransformationsMenu = ( {
 
 	return (
 		<Picker
+			testID="block-transformations-menu"
 			ref={ pickerRef }
 			options={ pickerOptions() }
 			onChange={ onPickerSelect }

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

@@ -22,17 +22,18 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 1);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-4>* {
@@ -54,17 +55,18 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: normal;
-  -webkit-box-align: normal;
-  -ms-flex-align: normal;
-  align-items: normal;
+  -webkit-align-items: stretch;
+  -webkit-box-align: stretch;
+  -ms-flex-align: stretch;
+  align-items: stretch;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
   flex-direction: column;
   gap: calc(4px * 3);
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
 }
 
 .emotion-8>* {

package/src/components/colors-gradients/style.scss

@@ -73,20 +73,20 @@ $swatch-gap: 12px;
 	max-width: 100%;
 
 	// Border styles.
-	border-left: 1px solid rgba(0, 0, 0, 0.1);
-	border-right: 1px solid rgba(0, 0, 0, 0.1);
-	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	border-left: 1px solid $gray-300;
+	border-right: 1px solid $gray-300;
+	border-bottom: 1px solid $gray-300;
 
 	&.first {
 		margin-top: $grid-unit-30;
-		border-top-left-radius: 2px;
-		border-top-right-radius: 2px;
-		border-top: 1px solid rgba(0, 0, 0, 0.1);
+		border-top-left-radius: $radius-block-ui;
+		border-top-right-radius: $radius-block-ui;
+		border-top: 1px solid $gray-300;
 	}
 
 	&.last {
-		border-bottom-left-radius: 2px;
-		border-bottom-right-radius: 2px;
+		border-bottom-left-radius: $radius-block-ui;
+		border-bottom-right-radius: $radius-block-ui;
 	}
 
 	> div,

package/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js

@@ -25,59 +25,69 @@ import { store as blockEditorStore } from '../../store';
  * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`
  * should be rendered, to avoid ending up with an empty MenuGroup.
  *
+ * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks
+ *                                      from the block editor store are used if this is not provided.
+ *
  * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.
  */
-export default function useConvertToGroupButtonProps() {
+export default function useConvertToGroupButtonProps( selectedClientIds ) {
 	const {
 		clientIds,
 		isGroupable,
 		isUngroupable,
 		blocksSelection,
 		groupingBlockName,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockRootClientId,
-			getBlocksByClientId,
-			canInsertBlockType,
-			getSelectedBlockClientIds,
-		} = select( blockEditorStore );
-		const { getGroupingBlockName } = select( blocksStore );
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlocksByClientId,
+				canInsertBlockType,
+				getSelectedBlockClientIds,
+			} = select( blockEditorStore );
+			const { getGroupingBlockName } = select( blocksStore );
+
+			const _clientIds = selectedClientIds?.length
+				? selectedClientIds
+				: getSelectedBlockClientIds();
+			const _groupingBlockName = getGroupingBlockName();
 
-		const _clientIds = getSelectedBlockClientIds();
-		const _groupingBlockName = getGroupingBlockName();
+			const rootClientId = !! _clientIds?.length
+				? getBlockRootClientId( _clientIds[ 0 ] )
+				: undefined;
 
-		const rootClientId = !! _clientIds?.length
-			? getBlockRootClientId( _clientIds[ 0 ] )
-			: undefined;
+			const groupingBlockAvailable = canInsertBlockType(
+				_groupingBlockName,
+				rootClientId
+			);
 
-		const groupingBlockAvailable = canInsertBlockType(
-			_groupingBlockName,
-			rootClientId
-		);
+			const _blocksSelection = getBlocksByClientId( _clientIds );
 
-		const _blocksSelection = getBlocksByClientId( _clientIds );
+			const isSingleGroupingBlock =
+				_blocksSelection.length === 1 &&
+				_blocksSelection[ 0 ]?.name === _groupingBlockName;
 
-		const isSingleGroupingBlock =
-			_blocksSelection.length === 1 &&
-			_blocksSelection[ 0 ]?.name === _groupingBlockName;
+			// Do we have
+			// 1. Grouping block available to be inserted?
+			// 2. One or more blocks selected
+			const _isGroupable =
+				groupingBlockAvailable && _blocksSelection.length;
 
-		// Do we have
-		// 1. Grouping block available to be inserted?
-		// 2. One or more blocks selected
-		const _isGroupable = groupingBlockAvailable && _blocksSelection.length;
+			// Do we have a single Group Block selected and does that group have inner blocks?
+			const _isUngroupable =
+				isSingleGroupingBlock &&
+				!! _blocksSelection[ 0 ].innerBlocks.length;
+			return {
+				clientIds: _clientIds,
+				isGroupable: _isGroupable,
+				isUngroupable: _isUngroupable,
+				blocksSelection: _blocksSelection,
+				groupingBlockName: _groupingBlockName,
+			};
+		},
+		[ selectedClientIds ]
+	);
 
-		// Do we have a single Group Block selected and does that group have inner blocks?
-		const _isUngroupable =
-			isSingleGroupingBlock &&
-			!! _blocksSelection[ 0 ].innerBlocks.length;
-		return {
-			clientIds: _clientIds,
-			isGroupable: _isGroupable,
-			isUngroupable: _isUngroupable,
-			blocksSelection: _blocksSelection,
-			groupingBlockName: _groupingBlockName,
-		};
-	}, [] );
 	return {
 		clientIds,
 		isGroupable,

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

@@ -8,6 +8,7 @@ import a11yPlugin from 'colord/plugins/a11y';
 /**
  * WordPress dependencies
  */
+import { SVG } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
 
 /**
@@ -68,7 +69,20 @@ function useDarkThemeBodyClassName( styles ) {
 
 export default function EditorStyles( { styles } ) {
 	const transformedStyles = useMemo(
-		() => transformStyles( styles, EDITOR_STYLES_SELECTOR ),
+		() =>
+			transformStyles(
+				styles.filter( ( style ) => style?.css ),
+				EDITOR_STYLES_SELECTOR
+			),
+		[ styles ]
+	);
+
+	const transformedSvgs = useMemo(
+		() =>
+			styles
+				.filter( ( style ) => style.__unstableType === 'svgs' )
+				.map( ( style ) => style.assets )
+				.join( '' ),
 		[ styles ]
 	);
 
@@ -80,6 +94,20 @@ export default function EditorStyles( { styles } ) {
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 0 0"
+				width="0"
+				height="0"
+				role="none"
+				style={ {
+					visibility: 'hidden',
+					position: 'absolute',
+					left: '-9999px',
+					overflow: 'hidden',
+				} }
+				dangerouslySetInnerHTML={ { __html: transformedSvgs } }
+			/>
 		</>
 	);
 }