@wordpress/block-editor 11.7.0 → 11.8.0

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

@@ -0,0 +1,157 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalVStack as VStack,
+	DuotonePicker,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useCallback, useMemo } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { getValueFromVariable } from './utils';
+import { immutableSet } from '../../utils/object';
+
+const EMPTY_ARRAY = [];
+function useMultiOriginColorPresets(
+	settings,
+	{ presetSetting, defaultSetting }
+) {
+	const disableDefault = ! settings?.color?.[ defaultSetting ];
+	const userPresets =
+		settings?.color?.[ presetSetting ]?.custom || EMPTY_ARRAY;
+	const themePresets =
+		settings?.color?.[ presetSetting ]?.theme || EMPTY_ARRAY;
+	const defaultPresets =
+		settings?.color?.[ presetSetting ]?.default || EMPTY_ARRAY;
+	return useMemo(
+		() => [
+			...userPresets,
+			...themePresets,
+			...( disableDefault ? EMPTY_ARRAY : defaultPresets ),
+		],
+		[ disableDefault, userPresets, themePresets, defaultPresets ]
+	);
+}
+
+export function useHasFiltersPanel( settings ) {
+	const hasDuotone = useHasDuotoneControl( settings );
+
+	return hasDuotone;
+}
+
+function useHasDuotoneControl( settings ) {
+	return settings.color.customDuotone || settings.color.defaultDuotone;
+}
+
+function FiltersToolsPanel( {
+	resetAllFilter,
+	onChange,
+	value,
+	panelId,
+	children,
+} ) {
+	const resetAll = () => {
+		const updatedValue = resetAllFilter( value );
+		onChange( updatedValue );
+	};
+
+	return (
+		<ToolsPanel
+			label={ __( 'Filters' ) }
+			resetAll={ resetAll }
+			panelId={ panelId }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
+
+const DEFAULT_CONTROLS = {
+	duotone: true,
+};
+
+export default function FiltersPanel( {
+	as: Wrapper = FiltersToolsPanel,
+	value,
+	onChange,
+	inheritedValue = value,
+	settings,
+	panelId,
+	defaultControls = DEFAULT_CONTROLS,
+} ) {
+	const decodeValue = ( rawValue ) =>
+		getValueFromVariable( { settings }, '', rawValue );
+
+	// Duotone
+	const hasDuotoneEnabled = useHasDuotoneControl( settings );
+	const duotonePalette = useMultiOriginColorPresets( settings, {
+		presetSetting: 'duotone',
+		defaultSetting: 'defaultDuotone',
+	} );
+	const colorPalette = useMultiOriginColorPresets( settings, {
+		presetSetting: 'palette',
+		defaultSetting: 'defaultPalette',
+	} );
+	const duotone = decodeValue( inheritedValue?.filter?.duotone );
+	const setDuotone = ( newValue ) => {
+		const duotonePreset = duotonePalette.find( ( { colors } ) => {
+			return colors === newValue;
+		} );
+		const settedValue = duotonePreset
+			? `var:preset|duotone|${ duotonePreset.slug }`
+			: newValue;
+		onChange( immutableSet( value, [ 'filter', 'duotone' ], settedValue ) );
+	};
+	const hasDuotone = () => !! value?.filter?.duotone;
+	const resetDuotone = () => setDuotone( undefined );
+
+	const resetAllFilter = useCallback( ( previousValue ) => {
+		return {
+			...previousValue,
+			filter: {
+				...previousValue.filter,
+				duotone: undefined,
+			},
+		};
+	}, [] );
+
+	return (
+		<Wrapper
+			resetAllFilter={ resetAllFilter }
+			value={ value }
+			onChange={ onChange }
+			panelId={ panelId }
+		>
+			{ hasDuotoneEnabled && (
+				<ToolsPanelItem
+					label={ __( 'Duotone' ) }
+					hasValue={ hasDuotone }
+					onDeselect={ resetDuotone }
+					isShownByDefault={ defaultControls.duotone }
+					panelId={ panelId }
+				>
+					<VStack>
+						<p>
+							{ __(
+								'Create a two-tone color effect without losing your original image.'
+							) }
+						</p>
+						<DuotonePicker
+							colorPalette={ colorPalette }
+							duotonePalette={ duotonePalette }
+							disableCustomColors={ true }
+							disableCustomDuotone={ true }
+							value={ duotone }
+							onChange={ setDuotone }
+						/>
+					</VStack>
+				</ToolsPanelItem>
+			) }
+		</Wrapper>
+	);
+}

package/src/components/global-styles/get-block-css-selector.js

@@ -34,17 +34,6 @@ export function getBlockCSSSelector(
 	const hasSelectors = ! isEmpty( selectors );
 	const path = Array.isArray( target ) ? target.join( '.' ) : target;
 
-	// Duotone ( no fallback selectors for Duotone ).
-	if ( path === 'filter.duotone' ) {
-		// If selectors API in use, only use its value or null.
-		if ( hasSelectors ) {
-			return get( selectors, path, null );
-		}
-
-		// Selectors API, not available, check for old experimental selector.
-		return get( supports, 'color.__experimentalDuotone', null );
-	}
-
 	// Root selector.
 
 	// Calculated before returning as it can be used as a fallback for feature

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

@@ -283,6 +283,12 @@ export function useSettingsForBlockElement(
 			updatedSettings.color.customGradient = false;
 		}
 
+		// If filters are not supported by the block/element, disable duotone.
+		if ( ! supportedStyles.includes( 'filter' ) ) {
+			updatedSettings.color.defaultDuotone = false;
+			updatedSettings.color.customDuotone = false;
+		}
+
 		[
 			'lineHeight',
 			'fontStyle',
@@ -360,6 +366,10 @@ export function useSettingsForBlockElement(
 			}
 		} );
 
+		updatedSettings.shadow = supportedStyles.includes( 'shadow' )
+			? updatedSettings.shadow
+			: false;
+
 		return updatedSettings;
 	}, [ parentSettings, supportedStyles, supports ] );
 }

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

@@ -17,3 +17,5 @@ export {
 } from './dimensions-panel';
 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';

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

@@ -0,0 +1,42 @@
+.block-editor-global-styles-effects-panel__toggle-icon {
+	fill: currentColor;
+}
+
+.block-editor-global-styles-effects-panel__shadow-popover-container {
+	width: 230px;
+}
+
+.block-editor-global-styles-effects-panel__shadow-dropdown {
+	display: block;
+	padding: 0;
+
+	> button {
+		width: 100%;
+		padding: $grid-unit-10;
+
+		&.is-open {
+			background-color: $gray-100;
+		}
+	}
+}
+
+// wrapper to clip the shadow beyond 6px
+.block-editor-global-styles-effects-panel__shadow-indicator-wrapper {
+	padding: 6px;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+// These styles are similar to the color palette.
+.block-editor-global-styles-effects-panel__shadow-indicator {
+	color: $gray-800;
+	border: $gray-200 $border-width solid;
+	border-radius: $radius-block-ui;
+	cursor: pointer;
+	padding: 0;
+
+	height: 24px;
+	width: 24px;
+}

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

@@ -612,7 +612,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 0.5em; margin-block-end: 0; }body .is-layout-flex { gap: 0.5em; }body { --wp--style--block-gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 0.5em; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 0.5em; }body { --wp--style--block-gap: 0.5em; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -628,7 +628,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'body .is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }body .is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }body .is-layout-flex { gap: 12px; }body { --wp--style--block-gap: 12px; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
+				':where(body .is-layout-flow) > * { margin-block-start: 0; margin-block-end: 0; }:where(body .is-layout-flow) > * + * { margin-block-start: 12px; margin-block-end: 0; }:where(body .is-layout-flex) { gap: 12px; }body { --wp--style--block-gap: 12px; }body .is-layout-flow > .alignleft { float: left; margin-inline-start: 0; margin-inline-end: 2em; }body .is-layout-flow > .alignright { float: right; margin-inline-start: 2em; margin-inline-end: 0; }body .is-layout-flow > .aligncenter { margin-left: auto !important; margin-right: auto !important; }body .is-layout-flex { display:flex; }body .is-layout-flex { flex-wrap: wrap; align-items: center; }body .is-layout-flex > * { margin: 0; }'
 			);
 		} );
 
@@ -644,7 +644,7 @@ describe( 'global styles renderer', () => {
 			} );
 
 			expect( layoutStyles ).toEqual(
-				'.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex.wp-block-group-is-layout-flex { gap: 12px; }'
+				'.wp-block-group-is-layout-flow > * { margin-block-start: 0; margin-block-end: 0; }.wp-block-group-is-layout-flow > * + * { margin-block-start: 12px; margin-block-end: 0; }.wp-block-group-is-layout-flex { gap: 12px; }'
 			);
 		} );
 
@@ -713,7 +713,7 @@ describe( 'global styles renderer', () => {
 				'core/image': {
 					name: imageBlock.name,
 					selector: imageSupports.__experimentalSelector,
-					duotoneSelector: imageSupports.color.__experimentalDuotone,
+					duotoneSelector: '.my-image img',
 					fallbackGapValue: undefined,
 					featureSelectors: {
 						root: '.my-image',

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

@@ -9,6 +9,7 @@ import { get, isEmpty, kebabCase, set } from 'lodash';
 import {
 	__EXPERIMENTAL_STYLE_PROPERTY as STYLE_PROPERTY,
 	__EXPERIMENTAL_ELEMENTS as ELEMENTS,
+	getBlockSupport,
 	getBlockTypes,
 	store as blocksStore,
 } from '@wordpress/blocks';
@@ -483,10 +484,10 @@ export function getLayoutStyles( {
 							} else {
 								combinedSelector =
 									selector === ROOT_BLOCK_SELECTOR
-										? `${ selector } .${ className }${
+										? `:where(${ selector } .${ className })${
 												spacingStyle?.selector || ''
 										  }`
-										: `${ selector }-${ className }${ selector }-${ className }${
+										: `${ selector }-${ className }${
 												spacingStyle?.selector || ''
 										  }`;
 							}
@@ -852,17 +853,16 @@ export const toStyles = (
 				delete styles.filter;
 			}
 
-			// Process duotone styles (they use color.__experimentalDuotone selector).
+			// Process duotone styles.
 			if ( duotoneSelector ) {
 				const duotoneDeclarations =
 					getStylesDeclarations( duotoneStyles );
 				if ( duotoneDeclarations.length > 0 ) {
 					ruleset =
 						ruleset +
-						`${ scopeSelector(
-							selector,
-							duotoneSelector
-						) }{${ duotoneDeclarations.join( ';' ) };}`;
+						`${ duotoneSelector }{${ duotoneDeclarations.join(
+							';'
+						) };}`;
 				}
 			}
 
@@ -948,10 +948,13 @@ export const toStyles = (
 			getGapCSSValue( tree?.styles?.spacing?.blockGap ) || '0.5em';
 		ruleset =
 			ruleset +
-			'.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }';
+			`:where(.wp-site-blocks) > * { margin-block-start: ${ gapValue }; margin-block-end: 0; }`;
 		ruleset =
 			ruleset +
-			`.wp-site-blocks > * + * { margin-block-start: ${ gapValue }; }`;
+			':where(.wp-site-blocks) > :first-child:first-child { margin-block-start: 0; }';
+		ruleset =
+			ruleset +
+			':where(.wp-site-blocks) > :last-child:last-child { margin-block-end: 0; }';
 	}
 
 	nodesWithSettings.forEach( ( { selector, presets } ) => {
@@ -1002,11 +1005,24 @@ export const getBlockSelectors = ( blockTypes, getBlockStyles ) => {
 	const result = {};
 	blockTypes.forEach( ( blockType ) => {
 		const name = blockType.name;
-		const selector = getBlockCSSSelector( blockType, 'root' );
-		const duotoneSelector = getBlockCSSSelector(
+		const selector = getBlockCSSSelector( blockType );
+		let duotoneSelector = getBlockCSSSelector(
 			blockType,
 			'filter.duotone'
 		);
+
+		// Keep backwards compatibility for support.color.__experimentalDuotone.
+		if ( ! duotoneSelector ) {
+			const rootSelector = getBlockCSSSelector( blockType );
+			const duotoneSupport = getBlockSupport(
+				blockType,
+				'color.__experimentalDuotone',
+				false
+			);
+			duotoneSelector =
+				duotoneSupport && scopeSelector( rootSelector, duotoneSupport );
+		}
+
 		const hasLayoutSupport = !! blockType?.supports?.__experimentalLayout;
 		const fallbackGapValue =
 			blockType?.supports?.spacing?.blockGap?.__experimentalDefault;

package/src/components/iframe/index.js

@@ -71,7 +71,7 @@ function bubbleEvents( doc ) {
 		}
 	}
 
-	const eventTypes = [ 'dragover' ];
+	const eventTypes = [ 'dragover', 'mousemove' ];
 
 	for ( const name of eventTypes ) {
 		doc.addEventListener( name, bubbleEvent );

package/src/components/image-size-control/use-dimension-handler.js

@@ -47,13 +47,14 @@ export default function useDimensionHandler(
 	}, [ customWidth, customHeight ] );
 
 	const updateDimension = ( dimension, value ) => {
+		const parsedValue = value === '' ? undefined : parseInt( value, 10 );
 		if ( dimension === 'width' ) {
-			setCurrentWidth( value );
+			setCurrentWidth( parsedValue );
 		} else {
-			setCurrentHeight( value );
+			setCurrentHeight( parsedValue );
 		}
 		onChange( {
-			[ dimension ]: value === '' ? undefined : parseInt( value, 10 ),
+			[ dimension ]: parsedValue,
 		} );
 	};
 

package/src/components/index.js

@@ -92,7 +92,10 @@ export { default as URLPopover } from './url-popover';
 export { __experimentalImageURLInputUI } from './url-popover/image-url-input-ui';
 export { default as withColorContext } from './color-palette/with-color-context';
 export { default as __experimentalSpacingSizesControl } from './spacing-sizes-control';
-
+export {
+	getSpacingPresetCssVar,
+	isValueSpacingPreset,
+} from './spacing-sizes-control/utils';
 /*
  * Content Related Components
  */

package/src/components/inserter/block-patterns-tab.js

@@ -28,6 +28,8 @@ import BlockPatternList from '../block-patterns-list';
 import PatternsExplorerModal from './block-patterns-explorer/explorer';
 import MobileTabNavigation from './mobile-tab-navigation';
 
+const noop = () => {};
+
 // Preferred order of pattern categories. Any other categories should
 // be at the bottom without any re-ordering.
 const patternCategoriesOrder = [
@@ -134,7 +136,7 @@ export function BlockPatternsCategoryDialog( {
 export function BlockPatternsCategoryPanel( {
 	rootClientId,
 	onInsert,
-	onHover,
+	onHover = noop,
 	category,
 	showTitlesAsTooltip,
 } ) {

package/src/components/inspector-controls-tabs/utils.js

@@ -2,10 +2,11 @@
  * WordPress dependencies
  */
 import { cog, styles, listView } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 export const TAB_SETTINGS = {
 	name: 'settings',
-	title: 'Settings',
+	title: __( 'Settings' ),
 	value: 'settings',
 	icon: cog,
 	className: 'block-editor-block-inspector__tab-item',
@@ -13,7 +14,7 @@ export const TAB_SETTINGS = {
 
 export const TAB_STYLES = {
 	name: 'styles',
-	title: 'Styles',
+	title: __( 'Styles' ),
 	value: 'styles',
 	icon: styles,
 	className: 'block-editor-block-inspector__tab-item',
@@ -21,7 +22,7 @@ export const TAB_STYLES = {
 
 export const TAB_LIST_VIEW = {
 	name: 'list',
-	title: 'List View',
+	title: __( 'List View' ),
 	value: 'list-view',
 	icon: listView,
 	className: 'block-editor-block-inspector__tab-item',

package/src/components/list-view/README.md

@@ -2,6 +2,8 @@
 
 The ListView component provides an overview of the hierarchical structure of all blocks in the editor. The blocks are presented vertically one below the other.
 
+By providing the `rootClientId` prop you can restrict the blocks that are shown to only children of the block with that client id.
+
 Blocks that have child blocks (such as group or column blocks) are presented with the parent at the top and the nested children below.
 
 In addition to presenting the structure of the blocks in the editor, the ListView component lets users navigate to each block by clicking on its line in the hierarchy tree. Multiple blocks at the same level of nesting can be selected by holding down the `SHIFT` key and clicking blocks within the list.

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

@@ -248,6 +248,7 @@ function ListViewBlock( {
 			path={ path }
 			id={ `list-view-block-${ clientId }` }
 			data-block={ clientId }
+			data-expanded={ canExpand ? isExpanded : undefined }
 			isExpanded={ canExpand ? isExpanded : undefined }
 			aria-selected={ !! isSelected || forceSelectionContentLock }
 			ref={ rowRef }

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

@@ -7,6 +7,7 @@ import {
 } from '@wordpress/compose';
 import { __experimentalTreeGrid as TreeGrid } from '@wordpress/components';
 import { AsyncModeProvider, useSelect } from '@wordpress/data';
+import deprecated from '@wordpress/deprecated';
 import {
 	useCallback,
 	useEffect,
@@ -56,11 +57,12 @@ export const BLOCK_LIST_ITEM_HEIGHT = 36;
  *
  * @param {Object}         props                   Components props.
  * @param {string}         props.id                An HTML element id for the root element of ListView.
- * @param {Array}          props.blocks            Custom subset of block client IDs to be used instead of the default hierarchy.
+ * @param {Array}          props.blocks            _deprecated_ Custom subset of block client IDs to be used instead of the default hierarchy.
  * @param {?boolean}       props.showBlockMovers   Flag to enable block movers. Defaults to `false`.
  * @param {?boolean}       props.isExpanded        Flag to determine whether nested levels are expanded by default. Defaults to `false`.
  * @param {?boolean}       props.showAppender      Flag to show or hide the block appender. Defaults to `false`.
  * @param {?ComponentType} props.blockSettingsMenu Optional more menu substitution. Defaults to the standard `BlockSettingsDropdown` component.
+ * @param {string}         props.rootClientId      The client id of the root block from which we determine the blocks to show in the list.
  * @param {Ref}            ref                     Forwarded ref
  */
 function ListViewComponent(
@@ -71,11 +73,23 @@ function ListViewComponent(
 		isExpanded = false,
 		showAppender = false,
 		blockSettingsMenu: BlockSettingsMenu = BlockSettingsDropdown,
+		rootClientId,
 	},
 	ref
 ) {
+	// This can be removed once we no longer need to support the blocks prop.
+	if ( blocks ) {
+		deprecated(
+			'`blocks` property in `wp.blockEditor.__experimentalListView`',
+			{
+				since: '6.3',
+				alternative: '`rootClientId` property',
+			}
+		);
+	}
+
 	const { clientIdsTree, draggedClientIds, selectedClientIds } =
-		useListViewClientIds( blocks );
+		useListViewClientIds( { blocks, rootClientId } );
 
 	const { visibleBlockCount, shouldShowInnerBlocks } = useSelect(
 		( select ) => {
@@ -219,6 +233,7 @@ function ListViewComponent(
 				<ListViewContext.Provider value={ contextValue }>
 					<ListViewBranch
 						blocks={ clientIdsTree }
+						parentId={ rootClientId }
 						selectBlock={ selectEditorBlock }
 						showBlockMovers={ showBlockMovers }
 						fixedListWindow={ fixedListWindow }
@@ -241,6 +256,7 @@ export default forwardRef( ( props, ref ) => {
 			{ ...props }
 			showAppender={ false }
 			blockSettingsMenu={ BlockSettingsDropdown }
+			rootClientId={ null }
 		/>
 	);
 } );

package/src/components/list-view/style.scss

@@ -400,7 +400,9 @@ $block-navigation-max-indent: 8;
 
 	.block-editor-list-view-drop-indicator__line {
 		background: var(--wp-admin-theme-color);
-		height: $border-width;
+		height: 6px;
+		border: 1px solid $white;
+		border-radius: 4px;
 	}
 }