@wordpress/block-editor 13.1.0 → 13.3.0

package/src/components/tabbed-sidebar/README.md

@@ -0,0 +1,76 @@
+# Tabbed Panel
+
+The `TabbedPanel` component is used to create the secondary panels in the editor.
+
+## Development guidelines
+
+This acts as a wrapper for the `Tabs` component, but adding conventions that can be shared between all secondary panels, for example:
+
+-   A close button
+-   Tabs that fill the panel
+-   Custom scollbars
+
+### Usage
+
+Renders a block alignment toolbar with alignments options.
+
+```jsx
+import { TabbedSidebar } from '@wordpress/components';
+
+const MyTabbedSidebar = () => (
+	<TabbedSidebar
+		tabs={ [
+			{
+				name: 'slug-1',
+				title: _x( 'Title 1', 'context' ),
+				panel: <PanelContents>,
+				panelRef: useRef('an-optional-ref'),
+			},
+			{
+				name: 'slug-2',
+				title: _x( 'Title 2', 'context' ),
+				panel: <PanelContents />,
+			},
+		] }
+		onClose={ onClickCloseButton }
+		onSelect={ onSelectTab }
+		defaultTabId="slug-1"
+		ref={ tabsRef }
+	/>
+);
+```
+
+### Props
+
+### `defaultTabId`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+This is passed to the `Tabs` component so it can handle the tab to select by default when it component renders.
+
+### `onClose`
+
+-   **Type:** `Function`
+
+The function that is called when the close button is clicked.
+
+### `onSelect`
+
+-   **Type:** `Function`
+
+This is passed to the `Tabs` component - it will be called when a tab has been selected. It is passed the selected tab's ID as an argument.
+
+### `selectedTab`
+
+-   **Type:** `String`
+-   **Default:** `undefined`
+
+This is passed to the `Tabs` component - it will display this tab as selected.
+
+### `tabs`
+
+-   **Type:** `Array`
+-   **Default:** `undefined`
+
+An array of tabs which will be rendered as `TabList` and `TabPanel` components.

package/src/components/tabbed-sidebar/index.js

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { forwardRef } from '@wordpress/element';
+import { closeSmall } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
+
+function TabbedSidebar(
+	{ defaultTabId, onClose, onSelect, selectedTab, tabs, closeButtonLabel },
+	ref
+) {
+	return (
+		<div className="block-editor-tabbed-sidebar">
+			<Tabs
+				selectOnMove={ false }
+				defaultTabId={ defaultTabId }
+				onSelect={ onSelect }
+				selectedTabId={ selectedTab }
+			>
+				<div className="block-editor-tabbed-sidebar__tablist-and-close-button">
+					<Button
+						className="block-editor-tabbed-sidebar__close-button"
+						icon={ closeSmall }
+						label={ closeButtonLabel }
+						onClick={ () => onClose() }
+						size="small"
+					/>
+
+					<Tabs.TabList
+						className="block-editor-tabbed-sidebar__tablist"
+						ref={ ref }
+					>
+						{ tabs.map( ( tab ) => (
+							<Tabs.Tab
+								key={ tab.name }
+								tabId={ tab.name }
+								className="block-editor-tabbed-sidebar__tab"
+							>
+								{ tab.title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+				</div>
+				{ tabs.map( ( tab ) => (
+					<Tabs.TabPanel
+						key={ tab.name }
+						tabId={ tab.name }
+						focusable={ false }
+						className="block-editor-tabbed-sidebar__tabpanel"
+						ref={ tab.panelRef }
+					>
+						{ tab.panel }
+					</Tabs.TabPanel>
+				) ) }
+			</Tabs>
+		</div>
+	);
+}
+
+export default forwardRef( TabbedSidebar );

package/src/components/tabbed-sidebar/style.scss

@@ -0,0 +1,53 @@
+.block-editor-tabbed-sidebar {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow: hidden;
+
+	@include break-medium() {
+		width: 350px;
+	}
+}
+
+.block-editor-tabbed-sidebar__tablist-and-close-button {
+	border-bottom: $border-width solid $gray-300;
+	display: flex;
+	justify-content: space-between;
+	padding-right: $grid-unit-15;
+}
+
+
+.block-editor-tabbed-sidebar__close-button {
+	background: $white;
+	/* stylelint-disable-next-line property-disallowed-list -- This should be removed when https://github.com/WordPress/gutenberg/issues/59013 is fixed. */
+	order: 1;
+	align-self: center;
+}
+
+.block-editor-tabbed-sidebar__tablist {
+	box-sizing: border-box;
+	flex-grow: 1;
+	margin-bottom: -$border-width;
+	width: 100%;
+}
+
+.block-editor-tabbed-sidebar__tab {
+	flex-grow: 1;
+	margin-bottom: -$border-width;
+
+	&[id$="reusable"] {
+		flex-grow: inherit;
+		// These are to align the `reusable` icon with the search icon.
+		padding-left: $grid-unit-20;
+		padding-right: $grid-unit-20;
+	}
+}
+
+.block-editor-tabbed-sidebar__tabpanel {
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+	overflow-y: auto;
+	scrollbar-gutter: auto;
+}

package/src/components/url-popover/index.js

@@ -71,6 +71,9 @@ const URLPopover = forwardRef(
 		return (
 			<Popover
 				ref={ ref }
+				role="dialog"
+				aria-modal="true"
+				aria-label={ __( 'Edit URL' ) }
 				className="block-editor-url-popover"
 				focusOnMount={ focusOnMount }
 				placement={ computedPlacement }

package/src/hooks/background.js

@@ -16,6 +16,10 @@ import {
 	useHasBackgroundPanel,
 	hasBackgroundImageValue,
 } from '../components/global-styles/background-panel';
+import {
+	globalStylesDataKey,
+	globalStylesLinksDataKey,
+} from '../store/private-keys';
 
 export const BACKGROUND_SUPPORT_KEY = 'background';
 
@@ -134,10 +138,25 @@ export function BackgroundImagePanel( {
 	setAttributes,
 	settings,
 } ) {
-	const style = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getBlockAttributes( clientId )?.style,
-		[ clientId ]
+	const { style, inheritedValue, _links } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getSettings } =
+				select( blockEditorStore );
+			const _settings = getSettings();
+			return {
+				style: getBlockAttributes( clientId )?.style,
+				_links: _settings[ globalStylesLinksDataKey ],
+				/*
+				 * @TODO 1. Pass inherited value down to all block style controls,
+				 *   See: packages/block-editor/src/hooks/style.js
+				 * @TODO 2. Add support for block style variations,
+				 *   See implementation: packages/block-editor/src/hooks/block-style-variation.js
+				 */
+				inheritedValue:
+					_settings[ globalStylesDataKey ]?.blocks?.[ name ],
+			};
+		},
+		[ clientId, name ]
 	);
 
 	if (
@@ -147,11 +166,6 @@ export function BackgroundImagePanel( {
 		return null;
 	}
 
-	const defaultControls = getBlockSupport( name, [
-		BACKGROUND_SUPPORT_KEY,
-		'__experimentalDefaultControls',
-	] );
-
 	const onChange = ( newStyle ) => {
 		setAttributes( {
 			style: cleanEmptyObject( newStyle ),
@@ -170,13 +184,14 @@ export function BackgroundImagePanel( {
 
 	return (
 		<StylesBackgroundPanel
+			inheritedValue={ inheritedValue }
 			as={ BackgroundInspectorControl }
 			panelId={ clientId }
-			defaultControls={ defaultControls }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
 			settings={ updatedSettings }
 			onChange={ onChange }
 			value={ style }
+			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }

package/src/hooks/block-hooks.js

@@ -43,25 +43,12 @@ function BlockHooksControlPure( {
 		[ blockTypes, name, ignoredHookedBlocks ]
 	);
 
-	const { blockIndex, rootClientId, innerBlocksLength } = useSelect(
-		( select ) => {
-			const { getBlocks, getBlockIndex, getBlockRootClientId } =
-				select( blockEditorStore );
-
-			return {
-				blockIndex: getBlockIndex( clientId ),
-				innerBlocksLength: getBlocks( clientId )?.length,
-				rootClientId: getBlockRootClientId( clientId ),
-			};
-		},
-		[ clientId ]
-	);
-
 	const hookedBlockClientIds = useSelect(
 		( select ) => {
-			const { getBlocks, getGlobalBlockCount } =
+			const { getBlocks, getBlockRootClientId, getGlobalBlockCount } =
 				select( blockEditorStore );
 
+			const rootClientId = getBlockRootClientId( clientId );
 			const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(
 				( clientIds, block ) => {
 					// If the block doesn't exist anywhere in the block tree,
@@ -127,9 +114,11 @@ function BlockHooksControlPure( {
 
 			return EMPTY_OBJECT;
 		},
-		[ hookedBlocksForCurrentBlock, name, clientId, rootClientId ]
+		[ hookedBlocksForCurrentBlock, name, clientId ]
 	);
 
+	const { getBlockIndex, getBlockCount, getBlockRootClientId } =
+		useSelect( blockEditorStore );
 	const { insertBlock, removeBlock } = useDispatch( blockEditorStore );
 
 	if ( ! hookedBlocksForCurrentBlock.length ) {
@@ -150,6 +139,10 @@ function BlockHooksControlPure( {
 	);
 
 	const insertBlockIntoDesignatedLocation = ( block, relativePosition ) => {
+		const blockIndex = getBlockIndex( clientId );
+		const innerBlocksLength = getBlockCount( clientId );
+		const rootClientId = getBlockRootClientId( clientId );
+
 		switch ( relativePosition ) {
 			case 'before':
 			case 'after':

package/src/hooks/block-style-variation.js

@@ -14,8 +14,27 @@ import {
 	getBlockSelectors,
 } from '../components/global-styles';
 import { useStyleOverride } from './utils';
+import { getValueFromObjectPath } from '../utils/object';
 import { store as blockEditorStore } from '../store';
 import { globalStylesDataKey } from '../store/private-keys';
+import { unlock } from '../lock-unlock';
+
+const VARIATION_PREFIX = 'is-style-';
+
+function getVariationMatches( className ) {
+	if ( ! className ) {
+		return [];
+	}
+	return className.split( /\s+/ ).reduce( ( matches, name ) => {
+		if ( name.startsWith( VARIATION_PREFIX ) ) {
+			const match = name.slice( VARIATION_PREFIX.length );
+			if ( match !== 'default' ) {
+				matches.push( match );
+			}
+		}
+		return matches;
+	}, [] );
+}
 
 /**
  * Get the first block style variation that has been registered from the class string.
@@ -28,14 +47,13 @@ import { globalStylesDataKey } from '../store/private-keys';
 function getVariationNameFromClass( className, registeredStyles = [] ) {
 	// The global flag affects how capturing groups work in JS. So the regex
 	// below will only return full CSS classes not just the variation name.
-	const matches = className?.match( /\bis-style-(?!default)(\S+)\b/g );
+	const matches = getVariationMatches( className );
 
 	if ( ! matches ) {
 		return null;
 	}
 
-	for ( const variationClass of matches ) {
-		const variation = variationClass.substring( 9 ); // Remove 'is-style-' prefix.
+	for ( const variation of matches ) {
 		if ( registeredStyles.some( ( style ) => style.name === variation ) ) {
 			return variation;
 		}
@@ -43,6 +61,197 @@ function getVariationNameFromClass( className, registeredStyles = [] ) {
 	return null;
 }
 
+// A helper component to apply a style override using the useStyleOverride hook.
+function OverrideStyles( { override } ) {
+	useStyleOverride( override );
+}
+
+/**
+ * This component is used to generate new block style variation overrides
+ * based on an incoming theme config. If a matching style is found in the config,
+ * a new override is created and returned. The overrides can be used in conjunction with
+ * useStyleOverride to apply the new styles to the editor. Its use is
+ * subject to change.
+ *
+ * @param {Object} props        Props.
+ * @param {Object} props.config A global styles object, containing settings and styles.
+ * @return {JSX.Element|undefined} An array of new block variation overrides.
+ */
+export function __unstableBlockStyleVariationOverridesWithConfig( { config } ) {
+	const { getBlockStyles, overrides } = useSelect(
+		( select ) => ( {
+			getBlockStyles: select( blocksStore ).getBlockStyles,
+			overrides: unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		} ),
+		[]
+	);
+	const { getBlockName } = useSelect( blockEditorStore );
+
+	const overridesWithConfig = useMemo( () => {
+		if ( ! overrides?.length ) {
+			return;
+		}
+		const newOverrides = [];
+		const overriddenClientIds = [];
+		for ( const [ , override ] of overrides ) {
+			if (
+				override?.variation &&
+				override?.clientId &&
+				/*
+				 * Because this component overwrites existing style overrides,
+				 * filter out any overrides that are already present in the store.
+				 */
+				! overriddenClientIds.includes( override.clientId )
+			) {
+				const blockName = getBlockName( override.clientId );
+				const configStyles =
+					config?.styles?.blocks?.[ blockName ]?.variations?.[
+						override.variation
+					];
+				if ( configStyles ) {
+					const variationConfig = {
+						settings: config?.settings,
+						// The variation style data is all that is needed to generate
+						// the styles for the current application to a block. The variation
+						// name is updated to match the instance specific class name.
+						styles: {
+							blocks: {
+								[ blockName ]: {
+									variations: {
+										[ `${ override.variation }-${ override.clientId }` ]:
+											configStyles,
+									},
+								},
+							},
+						},
+					};
+					const blockSelectors = getBlockSelectors(
+						getBlockTypes(),
+						getBlockStyles,
+						override.clientId
+					);
+					const hasBlockGapSupport = false;
+					const hasFallbackGapSupport = true;
+					const disableLayoutStyles = true;
+					const disableRootPadding = true;
+					const variationStyles = toStyles(
+						variationConfig,
+						blockSelectors,
+						hasBlockGapSupport,
+						hasFallbackGapSupport,
+						disableLayoutStyles,
+						disableRootPadding,
+						{
+							blockGap: false,
+							blockStyles: true,
+							layoutStyles: false,
+							marginReset: false,
+							presets: false,
+							rootPadding: false,
+							variationStyles: true,
+						}
+					);
+					newOverrides.push( {
+						id: `${ override.variation }-${ override.clientId }`,
+						css: variationStyles,
+						__unstableType: 'variation',
+						variation: override.variation,
+						// The clientId will be stored with the override and used to ensure
+						// the order of overrides matches the order of blocks so that the
+						// correct CSS cascade is maintained.
+						clientId: override.clientId,
+					} );
+					overriddenClientIds.push( override.clientId );
+				}
+			}
+		}
+		return newOverrides;
+	}, [ config, overrides, getBlockStyles, getBlockName ] );
+
+	if ( ! overridesWithConfig || ! overridesWithConfig.length ) {
+		return;
+	}
+
+	return (
+		<>
+			{ overridesWithConfig.map( ( override ) => (
+				<OverrideStyles key={ override.id } override={ override } />
+			) ) }
+		</>
+	);
+}
+
+/**
+ * Retrieves any variation styles data and resolves any referenced values.
+ *
+ * @param {Object}    globalStyles A complete global styles object, containing settings and styles.
+ * @param {string}    name         The name of the desired block type.
+ * @param {variation} variation    The of the block style variation to retrieve data for.
+ *
+ * @return {Object|undefined} The global styles data for the specified variation.
+ */
+export function getVariationStylesWithRefValues(
+	globalStyles,
+	name,
+	variation
+) {
+	if ( ! globalStyles?.styles?.blocks?.[ name ]?.variations?.[ variation ] ) {
+		return;
+	}
+
+	// Helper to recursively look for `ref` values to resolve.
+	const replaceRefs = ( variationStyles ) => {
+		Object.keys( variationStyles ).forEach( ( key ) => {
+			const value = variationStyles[ key ];
+
+			// Only process objects.
+			if ( typeof value === 'object' && value !== null ) {
+				// Process `ref` value if present.
+				if ( value.ref !== undefined ) {
+					if (
+						typeof value.ref !== 'string' ||
+						value.ref.trim() === ''
+					) {
+						// Remove invalid ref.
+						delete variationStyles[ key ];
+					} else {
+						// Resolve `ref` value.
+						const refValue = getValueFromObjectPath(
+							globalStyles,
+							value.ref
+						);
+
+						if ( refValue ) {
+							variationStyles[ key ] = refValue;
+						} else {
+							delete variationStyles[ key ];
+						}
+					}
+				} else {
+					// Recursively resolve `ref` values in nested objects.
+					replaceRefs( value );
+
+					// After recursion, if value is empty due to explicitly
+					// `undefined` ref value, remove it.
+					if ( Object.keys( value ).length === 0 ) {
+						delete variationStyles[ key ];
+					}
+				}
+			}
+		} );
+	};
+
+	// Deep clone variation node to avoid mutating it within global styles and losing refs.
+	const styles = JSON.parse(
+		JSON.stringify(
+			globalStyles.styles.blocks[ name ].variations[ variation ]
+		)
+	);
+	replaceRefs( styles );
+
+	return styles;
+}
+
 function useBlockStyleVariation( name, variation, clientId ) {
 	// Prefer global styles data in GlobalStylesContext, which are available
 	// if in the site editor. Otherwise fall back to whatever is in the
@@ -57,9 +266,14 @@ function useBlockStyleVariation( name, variation, clientId ) {
 	}, [] );
 
 	return useMemo( () => {
-		const styles = mergedConfig?.styles ?? globalStyles;
-		const variationStyles =
-			styles?.blocks?.[ name ]?.variations?.[ variation ];
+		const variationStyles = getVariationStylesWithRefValues(
+			{
+				settings: mergedConfig?.settings ?? globalSettings,
+				styles: mergedConfig?.styles ?? globalStyles,
+			},
+			name,
+			variation
+		);
 
 		return {
 			settings: mergedConfig?.settings ?? globalSettings,
@@ -94,7 +308,7 @@ function useBlockProps( { name, className, clientId } ) {
 
 	const registeredStyles = getBlockStyles( name );
 	const variation = getVariationNameFromClass( className, registeredStyles );
-	const variationClass = `is-style-${ variation }-${ clientId }`;
+	const variationClass = `${ VARIATION_PREFIX }${ variation }-${ clientId }`;
 
 	const { settings, styles } = useBlockStyleVariation(
 		name,
@@ -116,7 +330,7 @@ function useBlockProps( { name, className, clientId } ) {
 		const hasBlockGapSupport = false;
 		const hasFallbackGapSupport = true;
 		const disableLayoutStyles = true;
-		const isTemplate = true;
+		const disableRootPadding = true;
 
 		return toStyles(
 			variationConfig,
@@ -124,7 +338,7 @@ function useBlockProps( { name, className, clientId } ) {
 			hasBlockGapSupport,
 			hasFallbackGapSupport,
 			disableLayoutStyles,
-			isTemplate,
+			disableRootPadding,
 			{
 				blockGap: false,
 				blockStyles: true,
@@ -132,6 +346,7 @@ function useBlockProps( { name, className, clientId } ) {
 				marginReset: false,
 				presets: false,
 				rootPadding: false,
+				variationStyles: true,
 			}
 		);
 	}, [ variation, settings, styles, getBlockStyles, clientId ] );
@@ -140,6 +355,7 @@ function useBlockProps( { name, className, clientId } ) {
 		id: `variation-${ clientId }`,
 		css: variationStyles,
 		__unstableType: 'variation',
+		variation,
 		// The clientId will be stored with the override and used to ensure
 		// the order of overrides matches the order of blocks so that the
 		// correct CSS cascade is maintained.
@@ -152,5 +368,6 @@ function useBlockProps( { name, className, clientId } ) {
 export default {
 	hasSupport: () => true,
 	attributeKeys: [ 'className' ],
+	isMatch: ( { className } ) => getVariationMatches( className ).length > 0,
 	useBlockProps,
 };

package/src/hooks/duotone.js

@@ -295,26 +295,30 @@ function useDuotoneStyles( {
 			return;
 		}
 
-		// Safari does not always update the duotone filter when the duotone colors
-		// are changed. When using Safari, force the block element to be repainted by
-		// the browser to ensure any changes are reflected visually. This logic matches
-		// that used on the site frontend in `block-supports/duotone.php`.
+		// Safari does not always update the duotone filter when the duotone
+		// colors are changed. When using Safari, force the block element to be
+		// repainted by the browser to ensure any changes are reflected
+		// visually. This logic matches that used on the site frontend in
+		// `block-supports/duotone.php`.
 		if ( blockElement && isSafari ) {
 			const display = blockElement.style.display;
-			// Switch to `inline-block` to force a repaint. In the editor, `inline-block`
-			// is used instead of `none` to ensure that scroll position is not affected,
-			// as `none` results in the editor scrolling to the top of the block.
+			// Switch to `inline-block` to force a repaint. In the editor,
+			// `inline-block` is used instead of `none` to ensure that scroll
+			// position is not affected, as `none` results in the editor
+			// scrolling to the top of the block.
 			blockElement.style.display = 'inline-block';
-			// Simply accessing el.offsetHeight flushes layout and style
-			// changes in WebKit without having to wait for setTimeout.
+			// Simply accessing el.offsetHeight flushes layout and style changes
+			// in WebKit without having to wait for setTimeout.
 			// eslint-disable-next-line no-unused-expressions
 			blockElement.offsetHeight;
 			blockElement.style.display = display;
 		}
-	}, [ isValidFilter, blockElement ] );
+		// `colors` must be a dependency so this effect runs when the colors
+		// change in Safari.
+	}, [ isValidFilter, blockElement, colors ] );
 }
 
-function useBlockProps( { name, style } ) {
+function useBlockProps( { clientId, name, style } ) {
 	const id = useInstanceId( useBlockProps );
 	const selector = useMemo( () => {
 		const blockType = getBlockType( name );
@@ -362,7 +366,7 @@ function useBlockProps( { name, style } ) {
 	const shouldRender = selector && attribute;
 
 	useDuotoneStyles( {
-		clientId: id,
+		clientId,
 		id: filterClass,
 		selector,
 		attribute,