@wordpress/block-editor 11.6.0 → 11.8.0

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-settings-menu/block-settings-dropdown.js

@@ -29,7 +29,6 @@ import BlockHTMLConvertButton from './block-html-convert-button';
 import __unstableBlockSettingsMenuFirstItem from './block-settings-menu-first-item';
 import BlockSettingsMenuControls from '../block-settings-menu-controls';
 import { store as blockEditorStore } from '../../store';
-import useBlockDisplayTitle from '../block-title/use-block-display-title';
 import { useShowMoversGestures } from '../block-toolbar/utils';
 
 const noop = () => {};
@@ -138,11 +137,6 @@ export function BlockSettingsDropdown( {
 		[ __experimentalSelectBlock ]
 	);
 
-	const blockTitle = useBlockDisplayTitle( {
-		clientId: firstBlockClientId,
-		maximumLength: 25,
-	} );
-
 	const updateSelectionAfterRemove = useCallback(
 		__experimentalSelectBlock
 			? () => {
@@ -173,12 +167,8 @@ export function BlockSettingsDropdown( {
 		]
 	);
 
-	const label = sprintf(
-		/* translators: %s: block name */
-		__( 'Remove %s' ),
-		blockTitle
-	);
-	const removeBlockLabel = count === 1 ? label : __( 'Remove blocks' );
+	const removeBlockLabel =
+		count === 1 ? __( 'Delete' ) : __( 'Delete blocks' );
 
 	// Allows highlighting the parent block outline when focusing or hovering
 	// the parent block selector within the child.

package/src/components/caption/index.native.js

@@ -44,7 +44,6 @@ const Caption = ( {
 			onChange={ onChange }
 			placeholder={ placeholder }
 			placeholderTextColor={ placeholderTextColor }
-			rootTagsToEliminate={ [ 'p' ] }
 			style={ style }
 			tagName="p"
 			textAlign="center"

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/date-format-picker/index.js

@@ -142,7 +142,7 @@ function NonDefaultControls( { format, onChange } ) {
 							Link: (
 								<ExternalLink
 									href={ __(
-										'https://wordpress.org/support/article/formatting-date-and-time/'
+										'https://wordpress.org/documentation/article/customize-date-and-time-format/'
 									) }
 								/>
 							),

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 } }
+			/>
 		</>
 	);
 }

package/src/components/global-styles/README.md

@@ -14,9 +14,7 @@ import { useGlobalStylesReset } from '@wordpress/block-editor';
 function MyComponent() {
 	const [ canReset, reset ] = useGlobalStylesReset();
 
-	return canReset 
-		? <Button onClick={ () => reset() }>Reset</Button> 
-		: null;
+	return canReset ? <Button onClick={ () => reset() }>Reset</Button> : null;
 }
 ```
 
@@ -25,17 +23,25 @@ function MyComponent() {
 A React hook used to retrieve the styles array and settings to provide for block editor instances based on the current global styles.
 
 ```js
-import { useGlobalStylesOutput, BlockEditorProvider, BlockList } from '@wordpress/block-editor';
+import {
+	useGlobalStylesOutput,
+	BlockEditorProvider,
+	BlockList,
+} from '@wordpress/block-editor';
 
 function MyComponent() {
 	const [ styles, settings ] = useGlobalStylesOutput();
 
-	return <BlockEditorProvider settings={{
-		styles,
-		__experimentalFeatures: settings
-	}}>
-		<BlockList />
-	</BlockEditorProvider>
+	return (
+		<BlockEditorProvider
+			settings={ {
+				styles,
+				__experimentalFeatures: settings,
+			} }
+		>
+			<BlockList />
+		</BlockEditorProvider>
+	);
 }
 ```
 
@@ -48,12 +54,16 @@ import { useGlobalStyle } from '@wordpress/block-editor';
 
 function MyComponent() {
 	// Text color for the site root.
-	const [ color, setColor ] = useGlobalStyle( 'color.text' ); 
+	const [ color, setColor ] = useGlobalStyle( 'color.text' );
 
 	// The user modified color for the core paragraph block.
-	const [ pColor, setPColor ] = useGlobalStyle( 'color.text', 'core/paragraph', 'user' ); 
+	const [ pColor, setPColor ] = useGlobalStyle(
+		'color.text',
+		'core/paragraph',
+		'user'
+	);
 
-	return "Something";
+	return 'Something';
 }
 ```
 
@@ -66,12 +76,115 @@ import { useGlobalSetting } from '@wordpress/block-editor';
 
 function MyComponent() {
 	// The theme color palette.
-	const [ colorPalette, setColorPalette ] = useGlobalSetting( 'color.palette.theme' ); 
+	const [ colorPalette, setColorPalette ] = useGlobalSetting(
+		'color.palette.theme'
+	);
 
 	// The theme color palette for the paragraph block, ignoring user changes.
 	// If the palette is not defined for the paragraph block, the root one is returned.
-	const [ pColor, setPColor ] = useGlobalSetting( 'color.palette.theme', 'core/paragraph', 'base' ); 
+	const [ pColor, setPColor ] = useGlobalSetting(
+		'color.palette.theme',
+		'core/paragraph',
+		'base'
+	);
 
-	return "Something";
+	return 'Something';
 }
 ```
+
+## UI Components
+
+The global styles folder also offers a set of reusable UI components. These components follow a strict set of guidelines:
+
+-   They are independent of any context or any store dependency. They only rely on the props passed to them.
+-   They receive a similar set of props:
+
+    -   `value`: The value is a style object that maps closely the format used in `theme.json` and is also very close to the format of the `style` attributes for blocks. There are some differences with the block attributes due to the iteration process and the fact that we need to maintain compatibility with the existing blocks even if they predate the introduction of Global Styles and these UI components. An example value for a style object is:
+
+```js
+{
+	color: {
+		text: 'var:preset|color|blue',
+		background: '#FF0000',
+	},
+	typography: {
+		fontFamily: 'var:preset|font-family|base',
+		fontSize: '10px',
+		lineHeight: 1.5,
+	},
+	spacing: {
+		padding: 'var:preset|spacing|medium',
+	},
+	elements: {
+		link: {
+			color: {
+			text: 'var:preset|color|green',
+			},
+		},
+	},
+}
+```
+
+-   `onChange`: A callback that receives the new value and is called when the user changes the value of the UI component.
+-   `inheritedValue`: The inherited value is a style object that represents the combined value of the style inherited from the parent context in addition to the style applied to the current context. The format is the same as the `value` prop.
+-   `settings`: The settings are the theme.json settings. They are used to provide the UI components with the necessary information to render the UI. An example value for the settings is:
+
+```js
+{
+	color: {
+		palette: {
+			custom: [
+				{
+					slug: 'black',
+					color: '#000000',
+				},
+				{
+					slug: 'white',
+					color: '#FFFFFF',
+				},
+				{
+					slug: 'blue',
+					color: '#0000FF',
+				},
+			]
+		},
+		gradients: {
+			custom: [
+				{
+					slug: 'gradient-1',
+					gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+				},
+				{
+					slug: 'gradient-2',
+					gradient: 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)',
+				},
+			]
+		},
+	},
+	typography: {
+		fontSizes: [
+			{
+				slug: 'small',
+				size: '12px',
+			},
+			{
+				slug: 'medium',
+				size: '16px',
+			},
+			{
+				slug: 'large',
+				size: '24px',
+			},
+		],
+	}
+}
+```
+-   `defaultControls`: The default controls are the controls that are used by default to render the UI. They are used to provide the UI components with the necessary information to render the UI. An example value for the default controls for the `ColorPanel` component is:
+
+```js
+{
+	background: true,
+	text: true,
+	link: true,
+},
+```

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

@@ -186,39 +186,20 @@ export default function BorderPanel( {
 	const onBorderChange = ( newBorder ) => {
 		// Ensure we have a visible border style when a border width or
 		// color is being selected.
-		const newBorderWithStyle = applyAllFallbackStyles( newBorder );
+		const updatedBorder = applyAllFallbackStyles( newBorder );
 
-		// As we can't conditionally generate styles based on if other
-		// style properties have been set we need to force split border
-		// definitions for user set border styles. Border radius is derived
-		// from the same property i.e. `border.radius` if it is a string
-		// that is used. The longhand border radii styles are only generated
-		// if that property is an object.
-		//
-		// For borders (color, style, and width) those are all properties on
-		// the `border` style property. This means if the theme.json defined
-		// split borders and the user condenses them into a flat border or
-		// vice-versa we'd get both sets of styles which would conflict.
-		const updatedBorder = ! hasSplitBorders( newBorderWithStyle )
-			? {
-					top: newBorderWithStyle,
-					right: newBorderWithStyle,
-					bottom: newBorderWithStyle,
-					left: newBorderWithStyle,
-			  }
-			: {
-					color: null,
-					style: null,
-					width: null,
-					...newBorderWithStyle,
-			  };
-
-		[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
-			updatedBorder[ side ] = {
-				...updatedBorder[ side ],
-				color: encodeColorValue( updatedBorder[ side ]?.color ),
-			};
-		} );
+		if ( hasSplitBorders( updatedBorder ) ) {
+			[ 'top', 'right', 'bottom', 'left' ].forEach( ( side ) => {
+				if ( updatedBorder[ side ] ) {
+					updatedBorder[ side ] = {
+						...updatedBorder[ side ],
+						color: encodeColorValue( updatedBorder[ side ]?.color ),
+					};
+				}
+			} );
+		} else if ( updatedBorder ) {
+			updatedBorder.color = encodeColorValue( updatedBorder.color );
+		}
 
 		// As radius is maintained separately to color, style, and width
 		// maintain its value. Undefined values here will be cleaned when