@wordpress/block-editor 12.0.0 → 12.2.0

package/src/components/convert-to-group-buttons/index.native.js

@@ -1 +1,79 @@
-export default () => null;
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { switchToBlockType } from '@wordpress/blocks';
+import { useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import useConvertToGroupButtonProps from './use-convert-to-group-button-props';
+
+function useConvertToGroupButtons( {
+	clientIds,
+	onUngroup,
+	blocksSelection,
+	groupingBlockName,
+} ) {
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+	const { createSuccessNotice } = useDispatch( noticesStore );
+	const onConvertToGroup = () => {
+		// Activate the `transform` on the Grouping Block which does the conversion.
+		const newBlocks = switchToBlockType(
+			blocksSelection,
+			groupingBlockName
+		);
+		if ( newBlocks ) {
+			replaceBlocks( clientIds, newBlocks );
+		}
+	};
+
+	const onConvertFromGroup = () => {
+		let innerBlocks = blocksSelection[ 0 ].innerBlocks;
+		if ( ! innerBlocks.length ) {
+			return;
+		}
+		if ( onUngroup ) {
+			innerBlocks = onUngroup(
+				blocksSelection[ 0 ].attributes,
+				blocksSelection[ 0 ].innerBlocks
+			);
+		}
+		replaceBlocks( clientIds, innerBlocks );
+	};
+
+	return {
+		group: {
+			id: 'groupButtonOption',
+			label: _x( 'Group', 'verb' ),
+			value: 'groupButtonOption',
+			onSelect: () => {
+				onConvertToGroup();
+				createSuccessNotice(
+					// translators: displayed right after the block is grouped
+					__( 'Block grouped' )
+				);
+			},
+		},
+		ungroup: {
+			id: 'ungroupButtonOption',
+			label: _x(
+				'Ungroup',
+				'Ungrouping blocks from within a grouping block back into individual blocks within the Editor'
+			),
+			value: 'ungroupButtonOption',
+			onSelect: () => {
+				onConvertFromGroup();
+				createSuccessNotice(
+					// translators: displayed right after the block is ungrouped.
+					__( 'Block ungrouped' )
+				);
+			},
+		},
+	};
+}
+
+export { useConvertToGroupButtons, useConvertToGroupButtonProps };

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

@@ -31,13 +31,7 @@ import { store as blockEditorStore } from '../../store';
  * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.
  */
 export default function useConvertToGroupButtonProps( selectedClientIds ) {
-	const {
-		clientIds,
-		isGroupable,
-		isUngroupable,
-		blocksSelection,
-		groupingBlockName,
-	} = useSelect(
+	return useSelect(
 		( select ) => {
 			const {
 				getBlockRootClientId,
@@ -45,54 +39,54 @@ export default function useConvertToGroupButtonProps( selectedClientIds ) {
 				canInsertBlockType,
 				getSelectedBlockClientIds,
 			} = select( blockEditorStore );
-			const { getGroupingBlockName } = select( blocksStore );
-
-			const _clientIds = selectedClientIds?.length
+			const { getGroupingBlockName, getBlockType } =
+				select( blocksStore );
+			const clientIds = selectedClientIds?.length
 				? selectedClientIds
 				: getSelectedBlockClientIds();
-			const _groupingBlockName = getGroupingBlockName();
+			const groupingBlockName = getGroupingBlockName();
 
-			const rootClientId = !! _clientIds?.length
-				? getBlockRootClientId( _clientIds[ 0 ] )
+			const rootClientId = clientIds?.length
+				? getBlockRootClientId( clientIds[ 0 ] )
 				: undefined;
 
 			const groupingBlockAvailable = canInsertBlockType(
-				_groupingBlockName,
+				groupingBlockName,
 				rootClientId
 			);
 
-			const _blocksSelection = getBlocksByClientId( _clientIds );
-
-			const isSingleGroupingBlock =
-				_blocksSelection.length === 1 &&
-				_blocksSelection[ 0 ]?.name === _groupingBlockName;
+			const blocksSelection = getBlocksByClientId( clientIds );
+			const isSingleBlockSelected = blocksSelection.length === 1;
+			const [ firstSelectedBlock ] = blocksSelection;
+			// A block is ungroupable if it is a single grouping block with inner blocks.
+			// If a block has an `ungroup` transform, it is also ungroupable, without the
+			// requirement of being the default grouping block.
+			// Do we have a single grouping Block selected and does that group have inner blocks?
+			const isUngroupable =
+				isSingleBlockSelected &&
+				( firstSelectedBlock.name === groupingBlockName ||
+					getBlockType( firstSelectedBlock.name )?.transforms
+						?.ungroup ) &&
+				!! firstSelectedBlock.innerBlocks.length;
 
 			// Do we have
 			// 1. Grouping block available to be inserted?
 			// 2. One or more blocks selected
-			const _isGroupable =
-				groupingBlockAvailable && _blocksSelection.length;
+			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,
+				clientIds,
+				isGroupable,
+				isUngroupable,
+				blocksSelection,
+				groupingBlockName,
+				onUngroup:
+					isUngroupable &&
+					getBlockType( firstSelectedBlock.name )?.transforms
+						?.ungroup,
 			};
 		},
 		[ selectedClientIds ]
 	);
-
-	return {
-		clientIds,
-		isGroupable,
-		isUngroupable,
-		blocksSelection,
-		groupingBlockName,
-	};
 }

package/src/components/global-styles/advanced-panel.js

@@ -0,0 +1,82 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	TextareaControl,
+	Tooltip,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Icon, info } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { default as transformStyles } from '../../utils/transform-styles';
+
+export default function AdvancedPanel( {
+	value,
+	onChange,
+	inheritedValue = value,
+} ) {
+	// Custom CSS
+	const [ cssError, setCSSError ] = useState( null );
+	const customCSS = inheritedValue?.css;
+	function handleOnChange( newValue ) {
+		onChange( {
+			...value,
+			css: newValue,
+		} );
+		if ( cssError ) {
+			const [ transformed ] = transformStyles(
+				[ { css: value } ],
+				'.editor-styles-wrapper'
+			);
+			if ( transformed ) {
+				setCSSError( null );
+			}
+		}
+	}
+	function handleOnBlur( event ) {
+		if ( ! event?.target?.value ) {
+			setCSSError( null );
+			return;
+		}
+
+		const [ transformed ] = transformStyles(
+			[ { css: event.target.value } ],
+			'.editor-styles-wrapper'
+		);
+
+		setCSSError(
+			transformed === null
+				? __( 'There is an error with your CSS structure.' )
+				: null
+		);
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			<TextareaControl
+				label={ __( 'Additional CSS' ) }
+				__nextHasNoMarginBottom
+				value={ customCSS }
+				onChange={ ( newValue ) => handleOnChange( newValue ) }
+				onBlur={ handleOnBlur }
+				className="block-editor-global-styles-advanced-panel__custom-css-input"
+				spellCheck={ false }
+			/>
+			{ cssError && (
+				<Tooltip text={ cssError }>
+					<div className="block-editor-global-styles-advanced-panel__custom-css-validation-wrapper">
+						<Icon
+							icon={ info }
+							className="block-editor-global-styles-advanced-panel__custom-css-validation-icon"
+						/>
+					</div>
+				</Tooltip>
+			) }
+		</VStack>
+	);
+}

package/src/components/global-styles/color-panel.js

@@ -20,7 +20,7 @@ import {
 	Button,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -230,6 +230,11 @@ function ColorPanelDropdown( {
 							{ 'is-open': isOpen }
 						),
 						'aria-expanded': isOpen,
+						'aria-label': sprintf(
+							/* translators: %s is the type of color property, e.g., "background" */
+							__( 'Color %s styles' ),
+							label
+						),
 					};
 
 					return (

package/src/components/global-styles/dimensions-panel.js

@@ -103,8 +103,9 @@ function useHasSpacingPresets( settings ) {
 }
 
 function filterValuesBySides( values, sides ) {
-	if ( ! sides ) {
-		// If no custom side configuration all sides are opted into by default.
+	// If no custom side configuration, all sides are opted into by default.
+	// Without any values, we have nothing to filter either.
+	if ( ! sides || ! values ) {
 		return values;
 	}
 
@@ -184,12 +185,12 @@ function DimensionsToolsPanel( {
 }
 
 const DEFAULT_CONTROLS = {
-	contentSize: false,
-	wideSize: false,
-	padding: false,
-	margin: false,
-	blockGap: false,
-	minHeight: false,
+	contentSize: true,
+	wideSize: true,
+	padding: true,
+	margin: true,
+	blockGap: true,
+	minHeight: true,
 	childLayout: true,
 };
 

package/src/components/global-styles/hooks.js

@@ -181,11 +181,7 @@ export function useGlobalStyle(
 	let rawResult, result;
 	switch ( source ) {
 		case 'all':
-			rawResult =
-				// The styles.css path is allowed to be empty, so don't revert to base if undefined.
-				finalPath === 'styles.css'
-					? get( userConfig, finalPath )
-					: get( mergedConfig, finalPath );
+			rawResult = get( mergedConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;

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

@@ -5,7 +5,10 @@ export {
 	useSettingsForBlockElement,
 } from './hooks';
 export { getBlockCSSSelector } from './get-block-css-selector';
-export { useGlobalStylesOutput } from './use-global-styles-output';
+export {
+	useGlobalStylesOutput,
+	useGlobalStylesOutputWithConfig,
+} from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
 export {
 	default as TypographyPanel,
@@ -19,3 +22,5 @@ export { default as BorderPanel, useHasBorderPanel } from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
+export { default as AdvancedPanel } from './advanced-panel';
+export { areGlobalStyleConfigsEqual } from './utils';

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

@@ -41,3 +41,20 @@
 	height: 24px;
 	width: 24px;
 }
+
+.block-editor-global-styles-advanced-panel__custom-css-input textarea {
+	font-family: $editor_html_font;
+	// CSS input is always LTR regardless of language.
+	/*rtl:ignore*/
+	direction: ltr;
+}
+
+.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
+	position: absolute;
+	bottom: $grid-unit-20;
+	right: $grid-unit * 3;
+}
+
+.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
+	fill: $alert-red;
+}

package/src/components/global-styles/test/utils.js

@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { getPresetVariableFromValue, getValueFromVariable } from '../utils';
+import {
+	areGlobalStyleConfigsEqual,
+	getPresetVariableFromValue,
+	getValueFromVariable,
+} from '../utils';
 
 describe( 'editor utils', () => {
 	const themeJson = {
@@ -203,4 +207,56 @@ describe( 'editor utils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'areGlobalStyleConfigsEqual', () => {
+		test.each( [
+			{ original: null, variation: null, expected: true },
+			{ original: {}, variation: {}, expected: true },
+			{ original: {}, variation: undefined, expected: false },
+			{
+				original: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+				},
+				variation: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--blue)' },
+					},
+				},
+				expected: false,
+			},
+			{ original: {}, variation: undefined, expected: false },
+			{
+				original: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+					settings: {
+						typography: {
+							fontSize: true,
+						},
+					},
+				},
+				variation: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+					settings: {
+						typography: {
+							fontSize: true,
+						},
+					},
+				},
+				expected: true,
+			},
+		] )(
+			'.areGlobalStyleConfigsEqual( $original, $variation )',
+			( { original, variation, expected } ) => {
+				expect(
+					areGlobalStyleConfigsEqual( original, variation )
+				).toBe( expected );
+			}
+		);
+	} );
 } );

package/src/components/global-styles/typography-panel.js

@@ -238,7 +238,7 @@ export default function TypographyPanel( {
 			)
 		);
 	};
-	const hasLineHeight = () => !! value?.typography?.lineHeight;
+	const hasLineHeight = () => value?.typography?.lineHeight !== undefined;
 	const resetLineHeight = () => setLineHeight( undefined );
 
 	// Letter Spacing

package/src/components/global-styles/use-global-styles-output.js

@@ -1106,9 +1106,17 @@ const processCSSNesting = ( css, blockSelector ) => {
 	return processedCSS;
 };
 
-export function useGlobalStylesOutput() {
-	let { merged: mergedConfig } = useContext( GlobalStylesContext );
-
+/**
+ * Returns the global styles output using a global styles configuration.
+ * If wishing to generate global styles and settings based on the
+ * global styles config loaded in the editor context, use `useGlobalStylesOutput()`.
+ * The use case for a custom config is to generate bespoke styles
+ * and settings for previews, or other out-of-editor experiences.
+ *
+ * @param {Object} mergedConfig Global styles configuration.
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutputWithConfig( mergedConfig = {} ) {
 	const [ blockGap ] = useGlobalSetting( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGap !== null;
 	const hasFallbackGapSupport = ! hasBlockGapSupport; // This setting isn't useful yet: it exists as a placeholder for a future explicit fallback styles support.
@@ -1190,3 +1198,13 @@ export function useGlobalStylesOutput() {
 		disableLayoutStyles,
 	] );
 }
+
+/**
+ * Returns the global styles output based on the current state of global styles config loaded in the editor context.
+ *
+ * @return {Array} Array of stylesheets and settings.
+ */
+export function useGlobalStylesOutput() {
+	const { merged: mergedConfig } = useContext( GlobalStylesContext );
+	return useGlobalStylesOutputWithConfig( mergedConfig );
+}

package/src/components/global-styles/utils.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { get } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 
 /**
  * Internal dependencies
@@ -376,3 +377,29 @@ export function scopeSelector( scope, selector ) {
 
 	return selectorsScoped.join( ', ' );
 }
+
+/**
+ * Compares global style variations according to their styles and settings properties.
+ *
+ * @example
+ * ```js
+ * const globalStyles = { styles: { typography: { fontSize: '10px' } }, settings: {} };
+ * const variation = { styles: { typography: { fontSize: '10000px' } }, settings: {} };
+ * const isEqual = areGlobalStyleConfigsEqual( globalStyles, variation );
+ * // false
+ * ```
+ *
+ * @param {Object} original  A global styles object.
+ * @param {Object} variation A global styles object.
+ *
+ * @return {boolean} Whether `original` and `variation` match.
+ */
+export function areGlobalStyleConfigsEqual( original, variation ) {
+	if ( typeof original !== 'object' || typeof variation !== 'object' ) {
+		return original === variation;
+	}
+	return (
+		fastDeepEqual( original?.styles, variation?.styles ) &&
+		fastDeepEqual( original?.settings, variation?.settings )
+	);
+}

package/src/components/iframe/index.js

@@ -13,6 +13,7 @@ import {
 	useMemo,
 	useReducer,
 	renderToString,
+	useEffect,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -243,10 +244,16 @@ function Iframe( {
 	// Correct doctype is required to enable rendering in standards
 	// mode. Also preload the styles to avoid a flash of unstyled
 	// content.
-	const srcDoc = useMemo( () => {
-		return '<!doctype html>' + renderToString( styleAssets );
+	const src = useMemo( () => {
+		const html = '<!doctype html>' + renderToString( styleAssets );
+		const blob = new window.Blob( [ html ], { type: 'text/html' } );
+		return URL.createObjectURL( blob );
 	}, [] );
 
+	useEffect( () => () => {
+		URL.revokeObjectURL( src );
+	} );
+
 	// We need to counter the margin created by scaling the iframe. If the scale
 	// is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the
 	// top or bottom margin is 0.55 / 2 ((1 - scale) / 2).
@@ -260,15 +267,18 @@ function Iframe( {
 				style={ {
 					...props.style,
 					height: expand ? contentHeight : props.style?.height,
-					marginTop: scale
-						? -marginFromScaling + frameSize
-						: props.style?.marginTop,
-					marginBottom: scale
-						? -marginFromScaling + frameSize
-						: props.style?.marginBottom,
-					transform: scale
-						? `scale( ${ scale } )`
-						: props.style?.transform,
+					marginTop:
+						scale !== 1
+							? -marginFromScaling + frameSize
+							: props.style?.marginTop,
+					marginBottom:
+						scale !== 1
+							? -marginFromScaling + frameSize
+							: props.style?.marginBottom,
+					transform:
+						scale !== 1
+							? `scale( ${ scale } )`
+							: props.style?.transform,
 					transition: 'all .3s',
 				} }
 				ref={ useMergeRefs( [ ref, setRef ] ) }
@@ -276,7 +286,7 @@ function Iframe( {
 				// Correct doctype is required to enable rendering in standards
 				// mode. Also preload the styles to avoid a flash of unstyled
 				// content.
-				srcDoc={ srcDoc }
+				src={ src }
 				title={ __( 'Editor canvas' ) }
 			>
 				{ iframeDocument &&

package/src/components/image-editor/use-save-image.js

@@ -32,24 +32,35 @@ export default function useSaveImage( {
 	const apply = useCallback( () => {
 		setIsInProgress( true );
 
-		let attrs = {};
+		const modifiers = [];
+
+		if ( rotation > 0 ) {
+			modifiers.push( {
+				type: 'rotate',
+				args: {
+					angle: rotation,
+				},
+			} );
+		}
 
 		// The crop script may return some very small, sub-pixel values when the image was not cropped.
 		// Crop only when the new size has changed by more than 0.1%.
 		if ( crop.width < 99.9 || crop.height < 99.9 ) {
-			attrs = crop;
-		}
-
-		if ( rotation > 0 ) {
-			attrs.rotation = rotation;
+			modifiers.push( {
+				type: 'crop',
+				args: {
+					left: crop.x,
+					top: crop.y,
+					width: crop.width,
+					height: crop.height,
+				},
+			} );
 		}
 
-		attrs.src = url;
-
 		apiFetch( {
 			path: `/wp/v2/media/${ id }/edit`,
 			method: 'POST',
-			data: attrs,
+			data: { src: url, modifiers },
 		} )
 			.then( ( response ) => {
 				onSaveImage( {

package/src/components/inner-blocks/README.md

@@ -180,3 +180,8 @@ For example, a button block, deeply nested in several levels of block `X` that u
 
 -   **Type:** `Function`
 -   **Default:** - `undefined`. The placeholder is an optional function that can be passed in to be a rendered component placed in front of the appender. This can be used to represent an example state prior to any blocks being placed. See the Social Links for an implementation example.
+
+### `prioritizedInserterBlocks`
+
+-   **Type:** `Array`
+-   **Default:** - `undefined`. Determines which block types should be shown in the block inserter. For example, when inserting a block within the Navigation block we specify `core/navigation-link` and `core/navigation-link/page` as these are the most commonly used inner blocks. `prioritizedInserterBlocks` takes an array of the form {blockName}/{variationName}, where {variationName} is optional.

package/src/components/inner-blocks/index.js

@@ -45,6 +45,7 @@ function UncontrolledInnerBlocks( props ) {
 	const {
 		clientId,
 		allowedBlocks,
+		prioritizedInserterBlocks,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		template,
@@ -62,6 +63,7 @@ function UncontrolledInnerBlocks( props ) {
 	useNestedSettingsUpdate(
 		clientId,
 		allowedBlocks,
+		prioritizedInserterBlocks,
 		__experimentalDefaultBlock,
 		__experimentalDirectInsert,
 		templateLock,