@wordpress/block-editor 12.0.0 → 12.1.0

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

@@ -184,12 +184,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,17 @@
 	height: 24px;
 	width: 24px;
 }
+
+.block-editor-global-styles-advanced-panel__custom-css-input textarea {
+	font-family: $editor_html_font;
+}
+
+.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/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/inserter-draggable-blocks/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { Draggable } from '@wordpress/components';
+import { serialize } from '@wordpress/blocks';
 /**
  * Internal dependencies
  */
@@ -23,6 +24,9 @@ const InserterDraggableBlocks = ( {
 		<Draggable
 			__experimentalTransferDataType="wp-blocks"
 			transferData={ transferData }
+			onDragStart={ ( event ) => {
+				event.dataTransfer.setData( 'text/html', serialize( blocks ) );
+			} }
 			__experimentalDragComponent={
 				<BlockDraggableChip
 					count={ blocks.length }

package/src/components/inspector-controls/fill.js

@@ -41,7 +41,7 @@ export default function InspectorControlsFill( {
 	const isDisplayed = useDisplayBlockControls();
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 	if ( ! isDisplayed ) {

package/src/components/inspector-controls/fill.native.js

@@ -39,7 +39,7 @@ export default function InspectorControlsFill( {
 
 	const Fill = groups[ group ]?.Fill;
 	if ( ! Fill ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 	if ( ! isDisplayed ) {

package/src/components/inspector-controls/slot.js

@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseSlot as useSlot,
-	__experimentalUseSlotFills as useSlotFills,
-} from '@wordpress/components';
+import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
 
@@ -33,15 +30,13 @@ export default function InspectorControlsSlot( {
 		group = __experimentalGroup;
 	}
 	const Slot = groups[ group ]?.Slot;
-	const slot = useSlot( Slot?.__unstableName );
 	const fills = useSlotFills( Slot?.__unstableName );
-	if ( ! Slot || ! slot ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+	if ( ! Slot ) {
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 
-	const hasFills = Boolean( fills && fills.length );
-	if ( ! hasFills ) {
+	if ( ! fills?.length ) {
 		return null;
 	}
 

package/src/components/inspector-controls/slot.native.js

@@ -27,7 +27,7 @@ export default function InspectorControlsSlot( {
 	}
 	const Slot = groups[ group ]?.Slot;
 	if ( ! Slot ) {
-		warning( `Unknown InspectorControl group "${ group }" provided.` );
+		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
 	}
 

package/src/components/line-height-control/index.js

@@ -85,12 +85,17 @@ const LineHeightControl = ( {
 		: { marginBottom: 24 };
 
 	const handleOnChange = ( nextValue, { event } ) => {
+		if ( nextValue === '' ) {
+			onChange();
+			return;
+		}
+
 		if ( event.type === 'click' ) {
-			onChange( adjustNextValue( nextValue, false ) );
+			onChange( adjustNextValue( `${ nextValue }`, false ) );
 			return;
 		}
 
-		onChange( nextValue );
+		onChange( `${ nextValue }` );
 	};
 
 	return (

package/src/components/line-height-control/stories/index.js

@@ -23,7 +23,7 @@ const Template = ( props ) => {
 export const Default = Template.bind( {} );
 Default.args = {
 	__nextHasNoMarginBottom: true,
-	__unstableInputWidth: '60px',
+	__unstableInputWidth: '100px',
 };
 
 export const UnconstrainedWidth = Template.bind( {} );

package/src/components/link-control/test/index.js

@@ -2235,6 +2235,48 @@ describe( 'Controlling link title text', () => {
 			screen.queryByRole( 'textbox', { name: 'Text' } )
 		).not.toBeInTheDocument();
 	} );
+
+	it( 'should reset state on value change', async () => {
+		const user = userEvent.setup();
+		const textValue = 'My new text value';
+		const mockOnChange = jest.fn();
+
+		const { rerender } = render(
+			<LinkControl
+				value={ selectedLink }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		await toggleSettingsDrawer( user );
+
+		const textInput = screen.queryByRole( 'textbox', { name: 'Text' } );
+
+		expect( textInput ).toBeVisible();
+
+		await user.clear( textInput );
+		await user.keyboard( textValue );
+
+		// Was originally title: 'Hello Page', but we've changed it.
+		rerender(
+			<LinkControl
+				value={ {
+					...selectedLink,
+					title: 'Something else',
+				} }
+				forceIsEditingLink
+				hasTextControl
+				onChange={ mockOnChange }
+			/>
+		);
+
+		// The text input should not be showing as the form is submitted.
+		expect( screen.queryByRole( 'textbox', { name: 'Text' } ) ).toHaveValue(
+			'Something else'
+		);
+	} );
 } );
 
 async function toggleSettingsDrawer( user ) {

package/src/components/link-control/use-internal-input-value.js

@@ -8,14 +8,15 @@ export default function useInternalInputValue( value ) {
 		value || ''
 	);
 
+	// If the value prop changes, update the internal state.
 	useEffect( () => {
-		/**
-		 * If the value changes then sync this
-		 * back up with state.
-		 */
-		if ( value && value !== internalInputValue ) {
-			setInternalInputValue( value );
-		}
+		setInternalInputValue( ( prevValue ) => {
+			if ( value && value !== prevValue ) {
+				return value;
+			}
+
+			return prevValue;
+		} );
 	}, [ value ] );
 
 	return [ internalInputValue, setInternalInputValue ];

package/src/components/list-view/block-contents.js

@@ -15,6 +15,7 @@ import { forwardRef } from '@wordpress/element';
 import ListViewBlockSelectButton from './block-select-button';
 import BlockDraggable from '../block-draggable';
 import { store as blockEditorStore } from '../../store';
+import { useListViewContext } from './context';
 
 const ListViewBlockContents = forwardRef(
 	(
@@ -46,6 +47,8 @@ const ListViewBlockContents = forwardRef(
 			[ clientId ]
 		);
 
+		const { renderAdditionalBlockUI } = useListViewContext();
+
 		const isBlockMoveTarget =
 			blockMovingClientId && selectedBlockInBlockEditor === clientId;
 
@@ -62,26 +65,29 @@ const ListViewBlockContents = forwardRef(
 			: [ clientId ];
 
 		return (
-			<BlockDraggable clientIds={ draggableClientIds }>
-				{ ( { draggable, onDragStart, onDragEnd } ) => (
-					<ListViewBlockSelectButton
-						ref={ ref }
-						className={ className }
-						block={ block }
-						onClick={ onClick }
-						onToggleExpanded={ onToggleExpanded }
-						isSelected={ isSelected }
-						position={ position }
-						siblingBlockCount={ siblingBlockCount }
-						level={ level }
-						draggable={ draggable }
-						onDragStart={ onDragStart }
-						onDragEnd={ onDragEnd }
-						isExpanded={ isExpanded }
-						{ ...props }
-					/>
-				) }
-			</BlockDraggable>
+			<>
+				{ renderAdditionalBlockUI && renderAdditionalBlockUI( block ) }
+				<BlockDraggable clientIds={ draggableClientIds }>
+					{ ( { draggable, onDragStart, onDragEnd } ) => (
+						<ListViewBlockSelectButton
+							ref={ ref }
+							className={ className }
+							block={ block }
+							onClick={ onClick }
+							onToggleExpanded={ onToggleExpanded }
+							isSelected={ isSelected }
+							position={ position }
+							siblingBlockCount={ siblingBlockCount }
+							level={ level }
+							draggable={ draggable }
+							onDragStart={ onDragStart }
+							onDragEnd={ onDragEnd }
+							isExpanded={ isExpanded }
+							{ ...props }
+						/>
+					) }
+				</BlockDraggable>
+			</>
 		);
 	}
 );

package/src/components/list-view/block-select-button.js

@@ -84,7 +84,11 @@ function ListViewBlockSelectButton(
 				aria-expanded={ isExpanded }
 			>
 				<ListViewExpander onClick={ onToggleExpanded } />
-				<BlockIcon icon={ blockInformation?.icon } showColors />
+				<BlockIcon
+					icon={ blockInformation?.icon }
+					showColors
+					context="list-view"
+				/>
 				<HStack
 					alignment="center"
 					className="block-editor-list-view-block-select-button__label-wrapper"

package/src/components/list-view/block.js

@@ -40,7 +40,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
 import { useBlockLock } from '../block-lock';
 
 function ListViewBlock( {
-	block,
+	block: { clientId },
 	isDragged,
 	isSelected,
 	isBranchSelected,
@@ -58,7 +58,6 @@ function ListViewBlock( {
 	const cellRef = useRef( null );
 	const rowRef = useRef( null );
 	const [ isHovered, setIsHovered ] = useState( false );
-	const { clientId } = block;
 
 	const { isLocked, isContentLocked, canEdit } = useBlockLock( clientId );
 	const forceSelectionContentLock = useSelect(
@@ -90,6 +89,10 @@ function ListViewBlock( {
 
 	const blockInformation = useBlockDisplayInformation( clientId );
 	const blockTitle = blockInformation?.title || __( 'Untitled' );
+	const block = useSelect(
+		( select ) => select( blockEditorStore ).getBlock( clientId ),
+		[ clientId ]
+	);
 	const blockName = useSelect(
 		( select ) => select( blockEditorStore ).getBlockName( clientId ),
 		[ clientId ]