@wordpress/block-editor 12.11.1 → 12.12.2-next.f8d8eceb.0

package/src/components/block-alignment-control/use-available-alignments.js

@@ -19,29 +19,43 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	if ( ! controls.includes( 'none' ) ) {
 		controls = [ 'none', ...controls ];
 	}
-	const {
-		wideControlsEnabled = false,
-		themeSupportsLayout,
-		isBlockBasedTheme,
-	} = useSelect( ( select ) => {
-		const { getSettings } = select( blockEditorStore );
-		const settings = getSettings();
-		return {
-			wideControlsEnabled: settings.alignWide,
-			themeSupportsLayout: settings.supportsLayout,
-			isBlockBasedTheme: settings.__unstableIsBlockBasedTheme,
-		};
-	}, [] );
+	const isNoneOnly = controls.length === 1 && controls[ 0 ] === 'none';
+
+	const [ wideControlsEnabled, themeSupportsLayout, isBlockBasedTheme ] =
+		useSelect(
+			( select ) => {
+				// If `isNoneOnly` is true, we'll be returning early because there is
+				// nothing to filter on an empty array. We won't need the info from
+				// the `useSelect` but we must call it anyway because Rules of Hooks.
+				// So the callback returns early to avoid block editor subscription.
+				if ( isNoneOnly ) {
+					return [ false, false, false ];
+				}
+
+				const settings = select( blockEditorStore ).getSettings();
+				return [
+					settings.alignWide ?? false,
+					settings.supportsLayout,
+					settings.__unstableIsBlockBasedTheme,
+				];
+			},
+			[ isNoneOnly ]
+		);
 	const layout = useLayout();
+
+	if ( isNoneOnly ) {
+		return EMPTY_ARRAY;
+	}
+
 	const layoutType = getLayoutType( layout?.type );
-	const layoutAlignments = layoutType.getAlignments(
-		layout,
-		isBlockBasedTheme
-	);
 
 	if ( themeSupportsLayout ) {
-		const alignments = layoutAlignments.filter(
-			( { name: alignmentName } ) => controls.includes( alignmentName )
+		const layoutAlignments = layoutType.getAlignments(
+			layout,
+			isBlockBasedTheme
+		);
+		const alignments = layoutAlignments.filter( ( alignment ) =>
+			controls.includes( alignment.name )
 		);
 		// While we treat `none` as an alignment, we shouldn't return it if no
 		// other alignments exist.
@@ -55,25 +69,26 @@ export default function useAvailableAlignments( controls = DEFAULT_CONTROLS ) {
 	if ( layoutType.name !== 'default' && layoutType.name !== 'constrained' ) {
 		return EMPTY_ARRAY;
 	}
-	const { alignments: availableAlignments = DEFAULT_CONTROLS } = layout;
-	const enabledControls = controls
-		.filter(
-			( control ) =>
-				( layout.alignments || // Ignore the global wideAlignment check if the layout explicitely defines alignments.
-					wideControlsEnabled ||
-					! WIDE_CONTROLS.includes( control ) ) &&
-				availableAlignments.includes( control )
-		)
-		.map( ( enabledControl ) => ( { name: enabledControl } ) );
+
+	const alignments = controls
+		.filter( ( control ) => {
+			if ( layout.alignments ) {
+				return layout.alignments.includes( control );
+			}
+
+			if ( ! wideControlsEnabled && WIDE_CONTROLS.includes( control ) ) {
+				return false;
+			}
+
+			return DEFAULT_CONTROLS.includes( control );
+		} )
+		.map( ( name ) => ( { name } ) );
 
 	// While we treat `none` as an alignment, we shouldn't return it if no
 	// other alignments exist.
-	if (
-		enabledControls.length === 1 &&
-		enabledControls[ 0 ].name === 'none'
-	) {
+	if ( alignments.length === 1 && alignments[ 0 ].name === 'none' ) {
 		return EMPTY_ARRAY;
 	}
 
-	return enabledControls;
+	return alignments;
 }

package/src/components/block-controls/hook.js

@@ -17,17 +17,20 @@ export default function useBlockControlsFill( group, shareWithChildBlocks ) {
 	const { clientId } = useBlockEditContext();
 	const isParentDisplayed = useSelect(
 		( select ) => {
+			if ( ! shareWithChildBlocks ) {
+				return false;
+			}
+
 			const { getBlockName, hasSelectedInnerBlock } =
 				select( blockEditorStore );
 			const { hasBlockSupport } = select( blocksStore );
+
 			return (
-				shareWithChildBlocks &&
 				hasBlockSupport(
 					getBlockName( clientId ),
 					'__experimentalExposeControlsToChildren',
 					false
-				) &&
-				hasSelectedInnerBlock( clientId )
+				) && hasSelectedInnerBlock( clientId )
 			);
 		},
 		[ shareWithChildBlocks, clientId ]

package/src/components/block-list/block-outline.native.js

@@ -13,7 +13,7 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './block.scss';
 
-const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing' ];
+const TEXT_BLOCKS_WITH_OUTLINE = [ 'core/missing', 'core/freeform' ];
 
 function BlockOutline( {
 	blockCategory,

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

@@ -494,6 +494,8 @@ const applyWithDispatch = withDispatch( ( dispatch, ownProps, registry ) => {
 					}
 
 					moveFirstItemUp( rootClientId );
+				} else {
+					removeBlock( clientId );
 				}
 			}
 		},

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

@@ -38,9 +38,9 @@ import BlockInvalidWarning from './block-invalid-warning';
 import BlockOutline from './block-outline';
 import { store as blockEditorStore } from '../../store';
 import { useLayout } from './layout';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
-const emptyArray = [];
+const EMPTY_ARRAY = [];
 
 // Helper function to memoize the wrapperProps since getEditWrapperProps always returns a new reference.
 const wrapperPropsCache = new WeakMap();
@@ -215,7 +215,7 @@ function BlockListBlock( {
 	const parentLayout = useLayout() || {};
 	const defaultColors = useMobileGlobalStylesColors();
 	const globalStyle = useGlobalStyles();
-	const fontSizes = useSetting( 'typography.fontSizes' ) || emptyArray;
+	const [ fontSizes ] = useSettings( 'typography.fontSizes' );
 
 	const onRemove = useCallback(
 		() => removeBlock( clientId ),
@@ -257,7 +257,7 @@ function BlockListBlock( {
 			attributes,
 			defaultColors,
 			name,
-			fontSizes
+			fontSizes || EMPTY_ARRAY
 		);
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [

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

@@ -7,7 +7,7 @@ import { createContext, useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { getLayoutType } from '../../layouts';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export const defaultLayout = { type: 'default' };
 
@@ -27,7 +27,7 @@ export function useLayout() {
 
 export function LayoutStyle( { layout = {}, css, ...props } ) {
 	const layoutType = getLayoutType( layout.type );
-	const blockGapSupport = useSetting( 'spacing.blockGap' );
+	const [ blockGapSupport ] = useSettings( 'spacing.blockGap' );
 	const hasBlockGapSupport = blockGapSupport !== null;
 
 	if ( layoutType ) {

package/src/components/block-preview/index.js

@@ -16,6 +16,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { ExperimentalBlockEditorProvider } from '../provider';
 import AutoHeightBlockPreview from './auto';
+import EditorStyles from '../editor-styles';
 import { store as blockEditorStore } from '../../store';
 import { BlockListItems } from '../block-list';
 
@@ -113,7 +114,11 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 		[]
 	);
 	const settings = useMemo(
-		() => ( { ...originalSettings, __unstableIsPreviewMode: true } ),
+		() => ( {
+			...originalSettings,
+			styles: undefined, // Clear styles included by the parent settings, as they are already output by the parent's EditorStyles.
+			__unstableIsPreviewMode: true,
+		} ),
 		[ originalSettings ]
 	);
 	const disabledRef = useDisabled();
@@ -128,6 +133,7 @@ export function useBlockPreview( { blocks, props = {}, layout } ) {
 			value={ renderedBlocks }
 			settings={ settings }
 		>
+			<EditorStyles />
 			<BlockListItems renderAppender={ false } layout={ layout } />
 		</ExperimentalBlockEditorProvider>
 	);

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

@@ -14,7 +14,6 @@ import {
 	Popover,
 } from '@wordpress/components';
 import deprecated from '@wordpress/deprecated';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -65,9 +64,7 @@ function BlockStyles( { clientId, onSwitch = noop, onHoverClassName = noop } ) {
 		<div className="block-editor-block-styles">
 			<div className="block-editor-block-styles__variants">
 				{ stylesToRender.map( ( style ) => {
-					const buttonText = style.isDefault
-						? __( 'Default' )
-						: style.label || style.name;
+					const buttonText = style.label || style.name;
 
 					return (
 						<Button

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

@@ -58,7 +58,7 @@
 
 		&:focus,
 		&.is-active:focus {
-			box-shadow: inset 0 0 0 $border-width var(--wp-components-color-background, #fff), 0 0 0 var(--wp-admin-border-width-focus) var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
+			@include block-toolbar-button-style__focus();
 		}
 	}
 

package/src/components/block-switcher/pattern-transformations-menu.js

@@ -60,10 +60,7 @@ function PreviewPatternsPopover( { patterns, onSelect } ) {
 					className="block-editor-block-switcher__preview__popover"
 					position="bottom right"
 				>
-					<div className="block-editor-block-switcher__preview">
-						<div className="block-editor-block-switcher__preview-title">
-							{ __( 'Preview' ) }
-						</div>
+					<div className="block-editor-block-switcher__preview is-pattern-list-preview">
 						<BlockPatternsList
 							patterns={ patterns }
 							onSelect={ onSelect }

package/src/components/block-switcher/style.scss

@@ -98,6 +98,7 @@
 
 .block-editor-block-switcher__preview__popover {
 	display: none;
+	overflow: hidden;
 
 	// Position correctly. Needs specificity.
 	&.components-popover {
@@ -115,6 +116,7 @@
 		border-radius: $radius-block-ui;
 		outline: none;
 		box-shadow: none;
+		overflow: auto;
 	}
 
 	.block-editor-block-switcher__preview {
@@ -124,6 +126,10 @@
 		// Use padding to prevent the pattern previews focus style from being cut-off.
 		padding: 0 $grid-unit-20;
 		overflow: hidden;
+
+		&.is-pattern-list-preview {
+			overflow: unset;
+		}
 	}
 }
 

package/src/components/block-tools/block-contextual-toolbar.js

@@ -188,6 +188,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			className={ classes }
 			/* translators: accessibility text for the block toolbar */
 			aria-label={ __( 'Block tools' ) }
+			variant={ isFixed ? 'unstyled' : undefined }
 			{ ...props }
 		>
 			{ ! isCollapsed && <BlockToolbar hideDragHandle={ isFixed } /> }

package/src/components/block-tools/style.scss

@@ -109,7 +109,6 @@
 			overflow-y: hidden;
 		}
 
-		border: none;
 		border-bottom: $border-width solid $gray-200;
 		border-radius: 0;
 

package/src/components/border-radius-control/index.js

@@ -16,7 +16,7 @@ import { __ } from '@wordpress/i18n';
 import AllInputControl from './all-input-control';
 import InputControls from './input-controls';
 import LinkedButton from './linked-button';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 import {
 	getAllValue,
 	getAllUnit,
@@ -67,8 +67,9 @@ export default function BorderRadiusControl( { onChange, values } ) {
 		)[ 1 ],
 	} );
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem' ],
 	} );
 
 	const unit = getAllUnit( selectedUnits );

package/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -175,6 +175,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                     aria-label="Custom color picker. The currently selected color is called "red" and has a value of "#f00"."
                     class="components-color-palette__custom-color-button"
                     style="background: rgb(255, 0, 0);"
+                    type="button"
                   />
                   <div
                     class="components-flex components-h-stack components-v-stack components-color-palette__custom-color-text-wrapper emotion-12 emotion-5"
@@ -219,10 +220,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                           aria-label="Color: red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option"
+                          data-active-item=""
+                          data-command=""
                           id="components-circular-option-picker-0-0"
                           role="option"
                           style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-                          tabindex="0"
                           type="button"
                         />
                         <svg

package/src/components/color-palette/with-color-context.js

@@ -6,18 +6,18 @@ import { createHigherOrderComponent } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export default createHigherOrderComponent( ( WrappedComponent ) => {
 	return ( props ) => {
-		const colorsFeature = useSetting( 'color.palette' );
-		const disableCustomColorsFeature = ! useSetting( 'color.custom' );
-		const colors =
-			props.colors === undefined ? colorsFeature : props.colors;
-		const disableCustomColors =
-			props.disableCustomColors === undefined
-				? disableCustomColorsFeature
-				: props.disableCustomColors;
+		const [ colorsFeature, enableCustomColors ] = useSettings(
+			'color.palette',
+			'color.custom'
+		);
+		const {
+			colors = colorsFeature,
+			disableCustomColors = ! enableCustomColors,
+		} = props;
 		const hasColorsToChoose =
 			( colors && colors.length > 0 ) || ! disableCustomColors;
 		return (

package/src/components/colors/with-colors.js

@@ -13,7 +13,7 @@ import {
 	getColorObjectByAttributeValues,
 	getMostReadableColor,
 } from './utils';
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 import { kebabCase } from '../../utils/object';
 
 /**
@@ -51,12 +51,11 @@ const withCustomColorPalette = ( colorsArray ) =>
 const withEditorColorPalette = () =>
 	createHigherOrderComponent(
 		( WrappedComponent ) => ( props ) => {
-			// Some color settings have a special handling for deprecated flags in `useSetting`,
-			// so we can't unwrap them by doing const { ... } = useSetting('color')
-			// until https://github.com/WordPress/gutenberg/issues/37094 is fixed.
-			const userPalette = useSetting( 'color.palette.custom' );
-			const themePalette = useSetting( 'color.palette.theme' );
-			const defaultPalette = useSetting( 'color.palette.default' );
+			const [ userPalette, themePalette, defaultPalette ] = useSettings(
+				'color.palette.custom',
+				'color.palette.theme',
+				'color.palette.default'
+			);
 			const allColors = useMemo(
 				() => [
 					...( userPalette || [] ),

package/src/components/colors-gradients/control.js

@@ -18,7 +18,7 @@ import {
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 const colorsAndGradientKeys = [
 	'colors',
@@ -160,17 +160,20 @@ function ColorGradientControlInner( {
 }
 
 function ColorGradientControlSelect( props ) {
-	const colorGradientSettings = {};
-	colorGradientSettings.colors = useSetting( 'color.palette' );
-	colorGradientSettings.gradients = useSetting( 'color.gradients' );
-	colorGradientSettings.disableCustomColors = ! useSetting( 'color.custom' );
-	colorGradientSettings.disableCustomGradients = ! useSetting(
+	const [ colors, gradients, customColors, customGradients ] = useSettings(
+		'color.palette',
+		'color.gradients',
+		'color.custom',
 		'color.customGradient'
 	);
 
 	return (
 		<ColorGradientControlInner
-			{ ...{ ...colorGradientSettings, ...props } }
+			colors={ colors }
+			gradients={ gradients }
+			disableCustomColors={ ! customColors }
+			disableCustomGradients={ ! customGradients }
+			{ ...props }
 		/>
 	);
 }

package/src/components/colors-gradients/style.scss

@@ -77,14 +77,16 @@ $swatch-gap: 12px;
 	border-right: 1px solid $gray-300;
 	border-bottom: 1px solid $gray-300;
 
-	&.first {
+	// Identify the first visible instance as placeholder items will not have this class.
+	&:nth-child(1 of &) {
 		margin-top: $grid-unit-30;
 		border-top-left-radius: $radius-block-ui;
 		border-top-right-radius: $radius-block-ui;
 		border-top: 1px solid $gray-300;
 	}
 
-	&.last {
+	// Identify the last visible instance as placeholder items will not have this class.
+	&:nth-last-child(1 of &) {
 		border-bottom-left-radius: $radius-block-ui;
 		border-bottom-right-radius: $radius-block-ui;
 	}

package/src/components/colors-gradients/use-multiple-origin-colors-and-gradients.js

@@ -7,7 +7,7 @@ import { _x } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 /**
  * Retrieves color and gradient related settings.
@@ -18,14 +18,34 @@ import useSetting from '../use-setting';
  * @return {Object} Color and gradient related settings.
  */
 export default function useMultipleOriginColorsAndGradients() {
+	const [
+		enableCustomColors,
+		customColors,
+		themeColors,
+		defaultColors,
+		shouldDisplayDefaultColors,
+		enableCustomGradients,
+		customGradients,
+		themeGradients,
+		defaultGradients,
+		shouldDisplayDefaultGradients,
+	] = useSettings(
+		'color.custom',
+		'color.palette.custom',
+		'color.palette.theme',
+		'color.palette.default',
+		'color.defaultPalette',
+		'color.customGradient',
+		'color.gradients.custom',
+		'color.gradients.theme',
+		'color.gradients.default',
+		'color.defaultGradients'
+	);
+
 	const colorGradientSettings = {
-		disableCustomColors: ! useSetting( 'color.custom' ),
-		disableCustomGradients: ! useSetting( 'color.customGradient' ),
+		disableCustomColors: ! enableCustomColors,
+		disableCustomGradients: ! enableCustomGradients,
 	};
-	const customColors = useSetting( 'color.palette.custom' );
-	const themeColors = useSetting( 'color.palette.theme' );
-	const defaultColors = useSetting( 'color.palette.default' );
-	const shouldDisplayDefaultColors = useSetting( 'color.defaultPalette' );
 
 	colorGradientSettings.colors = useMemo( () => {
 		const result = [];
@@ -62,18 +82,12 @@ export default function useMultipleOriginColorsAndGradients() {
 		}
 		return result;
 	}, [
-		defaultColors,
-		themeColors,
 		customColors,
+		themeColors,
+		defaultColors,
 		shouldDisplayDefaultColors,
 	] );
 
-	const customGradients = useSetting( 'color.gradients.custom' );
-	const themeGradients = useSetting( 'color.gradients.theme' );
-	const defaultGradients = useSetting( 'color.gradients.default' );
-	const shouldDisplayDefaultGradients = useSetting(
-		'color.defaultGradients'
-	);
 	colorGradientSettings.gradients = useMemo( () => {
 		const result = [];
 		if ( themeGradients && themeGradients.length ) {

package/src/components/dimensions-tool/index.js

@@ -131,31 +131,6 @@ function DimensionsTool( {
 					onChange( nextValue );
 				} }
 			/>
-			{ showScaleControl && (
-				<ScaleTool
-					panelId={ panelId }
-					options={ scaleOptions }
-					defaultValue={ defaultScale }
-					value={ lastScale }
-					onChange={ ( nextScale ) => {
-						const nextValue = { ...value };
-
-						// 'fill' is CSS default, so it gets treated as null.
-						nextScale = nextScale === 'fill' ? null : nextScale;
-
-						setLastScale( nextScale );
-
-						// Update scale.
-						if ( ! nextScale ) {
-							delete nextValue.scale;
-						} else {
-							nextValue.scale = nextScale;
-						}
-
-						onChange( nextValue );
-					} }
-				/>
-			) }
 			<WidthHeightTool
 				panelId={ panelId }
 				units={ unitsOptions }
@@ -205,6 +180,31 @@ function DimensionsTool( {
 					onChange( nextValue );
 				} }
 			/>
+			{ showScaleControl && (
+				<ScaleTool
+					panelId={ panelId }
+					options={ scaleOptions }
+					defaultValue={ defaultScale }
+					value={ lastScale }
+					onChange={ ( nextScale ) => {
+						const nextValue = { ...value };
+
+						// 'fill' is CSS default, so it gets treated as null.
+						nextScale = nextScale === 'fill' ? null : nextScale;
+
+						setLastScale( nextScale );
+
+						// Update scale.
+						if ( ! nextScale ) {
+							delete nextValue.scale;
+						} else {
+							nextValue.scale = nextScale;
+						}
+
+						onChange( nextValue );
+					} }
+				/>
+			) }
 		</>
 	);
 }

package/src/components/dimensions-tool/scale-tool.js

@@ -110,7 +110,7 @@ export default function ScaleTool( {
 				help={ scaleHelp[ displayValue ] }
 				value={ displayValue }
 				onChange={ onChange }
-				__nextHasNoMarginBottom
+				size={ '__unstable-large' }
 			>
 				{ options.map( ( option ) => (
 					<ToggleGroupControlOption

package/src/components/font-family/index.js

@@ -7,7 +7,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 export default function FontFamilyControl( {
 	value = '',
@@ -15,7 +15,7 @@ export default function FontFamilyControl( {
 	fontFamilies,
 	...props
 } ) {
-	const blockLevelFontFamilies = useSetting( 'typography.fontFamilies' );
+	const [ blockLevelFontFamilies ] = useSettings( 'typography.fontFamilies' );
 	if ( ! fontFamilies ) {
 		fontFamilies = blockLevelFontFamilies;
 	}

package/src/components/font-sizes/font-size-picker.js

@@ -6,17 +6,19 @@ import { FontSizePicker as BaseFontSizePicker } from '@wordpress/components';
 /**
  * Internal dependencies
  */
-import useSetting from '../use-setting';
+import { useSettings } from '../use-settings';
 
 function FontSizePicker( props ) {
-	const fontSizes = useSetting( 'typography.fontSizes' );
-	const disableCustomFontSizes = ! useSetting( 'typography.customFontSize' );
+	const [ fontSizes, customFontSize ] = useSettings(
+		'typography.fontSizes',
+		'typography.customFontSize'
+	);
 
 	return (
 		<BaseFontSizePicker
 			{ ...props }
 			fontSizes={ fontSizes }
-			disableCustomFontSizes={ disableCustomFontSizes }
+			disableCustomFontSizes={ ! customFontSize }
 		/>
 	);
 }