@wordpress/block-editor 12.24.0 → 12.25.0

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

@@ -34,7 +34,9 @@ function PatternTransformationsMenu( {
 } ) {
 	const [ showTransforms, setShowTransforms ] = useState( false );
 	const patterns = useTransformedPatterns( statePatterns, blocks );
-	if ( ! patterns.length ) return null;
+	if ( ! patterns.length ) {
+		return null;
+	}
 
 	return (
 		<MenuGroup className="block-editor-block-switcher__pattern__transforms__menugroup">

package/src/components/block-switcher/use-transformed-patterns.js

@@ -62,7 +62,9 @@ export const getPatternTransformedBlocks = (
 				selectedBlock.name,
 				consumedBlocks
 			);
-			if ( ! match ) continue;
+			if ( ! match ) {
+				continue;
+			}
 			isMatch = true;
 			consumedBlocks.add( match.clientId );
 			// We update (mutate) the matching pattern block.
@@ -71,7 +73,9 @@ export const getPatternTransformedBlocks = (
 			break;
 		}
 		// Bail eary if a selected block has not been matched.
-		if ( ! isMatch ) return;
+		if ( ! isMatch ) {
+			return;
+		}
 	}
 	return _patternBlocks;
 };

package/src/components/block-switcher/utils.js

@@ -22,8 +22,12 @@ export const getMatchingBlockByName = (
 ) => {
 	const { clientId, name, innerBlocks = [] } = block;
 	// Check if block has been consumed already.
-	if ( consumedBlocks.has( clientId ) ) return;
-	if ( name === selectedBlockName ) return block;
+	if ( consumedBlocks.has( clientId ) ) {
+		return;
+	}
+	if ( name === selectedBlockName ) {
+		return block;
+	}
 	// Try to find a matching block from InnerBlocks recursively.
 	for ( const innerBlock of innerBlocks ) {
 		const match = getMatchingBlockByName(
@@ -31,7 +35,9 @@ export const getMatchingBlockByName = (
 			selectedBlockName,
 			consumedBlocks
 		);
-		if ( match ) return match;
+		if ( match ) {
+			return match;
+		}
 	}
 };
 
@@ -47,11 +53,14 @@ export const getMatchingBlockByName = (
  */
 export const getRetainedBlockAttributes = ( name, attributes ) => {
 	const contentAttributes = getBlockAttributesNamesByRole( name, 'content' );
-	if ( ! contentAttributes?.length ) return attributes;
+	if ( ! contentAttributes?.length ) {
+		return attributes;
+	}
 
 	return contentAttributes.reduce( ( _accumulator, attribute ) => {
-		if ( attributes[ attribute ] )
+		if ( attributes[ attribute ] ) {
 			_accumulator[ attribute ] = attributes[ attribute ];
+		}
 		return _accumulator;
 	}, {} );
 };

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

@@ -90,11 +90,6 @@
 		}
 	}
 
-	.block-editor-block-toolbar .components-toolbar-group,
-	.block-editor-block-toolbar .components-toolbar {
-		border-right-color: $gray-200;
-	}
-
 	& > .block-editor-block-toolbar {
 		flex-grow: initial;
 		width: initial;
@@ -109,14 +104,16 @@
 
 		// Parent selector dot divider
 		&::after {
-			content: "\00B7";
+			align-items: center;
+			background-color: $gray-900;
+			border-radius: 100%;
+			content: "";
+			display: inline-flex;
+			height: 2px;
 			position: absolute;
-			font-size: 16px;
 			right: 0;
-			height: $button-size-compact;
-			top: 0;
-			display: inline-flex;
-			align-items: center;
+			top: $grid-unit-20 - $border-width;
+			width: 2px;
 		}
 	}
 }

package/src/components/block-toolbar/use-has-block-toolbar.js

@@ -15,8 +15,7 @@ import { useHasAnyBlockControls } from '../block-controls/use-has-block-controls
  * @return {boolean} Whether the block toolbar component will be rendered.
  */
 export function useHasBlockToolbar() {
-	const hasAnyBlockControls = useHasAnyBlockControls();
-	return useSelect(
+	const { isToolbarEnabled, isDefaultEditingMode } = useSelect(
 		( select ) => {
 			const {
 				getBlockEditingMode,
@@ -28,24 +27,30 @@ export function useHasBlockToolbar() {
 			// for the toolbar, so we use getBlockSelectionStart
 			// instead of getSelectedBlockClientIds
 			const selectedBlockClientId = getBlockSelectionStart();
-			const isDefaultEditingMode =
-				getBlockEditingMode( selectedBlockClientId ) === 'default';
+
 			const blockType =
 				selectedBlockClientId &&
 				getBlockType( getBlockName( selectedBlockClientId ) );
-			const isToolbarEnabled =
-				blockType &&
-				hasBlockSupport( blockType, '__experimentalToolbar', true );
 
-			if (
-				! isToolbarEnabled ||
-				( ! isDefaultEditingMode && ! hasAnyBlockControls )
-			) {
-				return false;
-			}
-
-			return true;
+			return {
+				isToolbarEnabled:
+					blockType &&
+					hasBlockSupport( blockType, '__experimentalToolbar', true ),
+				isDefaultEditingMode:
+					getBlockEditingMode( selectedBlockClientId ) === 'default',
+			};
 		},
-		[ hasAnyBlockControls ]
+		[]
 	);
+
+	const hasAnyBlockControls = useHasAnyBlockControls();
+
+	if (
+		! isToolbarEnabled ||
+		( ! isDefaultEditingMode && ! hasAnyBlockControls )
+	) {
+		return false;
+	}
+
+	return true;
 }

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

@@ -85,7 +85,9 @@ export default function BlockTools( {
 	} = unlock( useDispatch( blockEditorStore ) );
 
 	function onKeyDown( event ) {
-		if ( event.defaultPrevented ) return;
+		if ( event.defaultPrevented ) {
+			return;
+		}
 
 		if ( isMatch( 'core/block-editor/move-up', event ) ) {
 			const clientIds = getSelectedBlockClientIds();

package/src/components/block-tools/use-show-block-tools.js

@@ -8,7 +8,6 @@ import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
  * Internal dependencies
  */
 import { store as blockEditorStore } from '../../store';
-import { useHasBlockToolbar } from '../block-toolbar/use-has-block-toolbar';
 
 /**
  * Source of truth for which block tools are showing in the block editor.
@@ -16,55 +15,44 @@ import { useHasBlockToolbar } from '../block-toolbar/use-has-block-toolbar';
  * @return {Object} Object of which block tools will be shown.
  */
 export function useShowBlockTools() {
-	const hasBlockToolbar = useHasBlockToolbar();
+	return useSelect( ( select ) => {
+		const {
+			getSelectedBlockClientId,
+			getFirstMultiSelectedBlockClientId,
+			getBlock,
+			getSettings,
+			hasMultiSelection,
+			__unstableGetEditorMode,
+			isTyping,
+		} = select( blockEditorStore );
 
-	return useSelect(
-		( select ) => {
-			const {
-				getSelectedBlockClientId,
-				getFirstMultiSelectedBlockClientId,
-				getBlock,
-				getSettings,
-				hasMultiSelection,
-				__unstableGetEditorMode,
-				isTyping,
-			} = select( blockEditorStore );
+		const clientId =
+			getSelectedBlockClientId() || getFirstMultiSelectedBlockClientId();
 
-			const clientId =
-				getSelectedBlockClientId() ||
-				getFirstMultiSelectedBlockClientId();
+		const block = getBlock( clientId ) || { name: '', attributes: {} };
+		const editorMode = __unstableGetEditorMode();
+		const hasSelectedBlock = clientId && block?.name;
+		const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( block );
+		const _showEmptyBlockSideInserter =
+			clientId &&
+			! isTyping() &&
+			editorMode === 'edit' &&
+			isEmptyDefaultBlock;
+		const maybeShowBreadcrumb =
+			hasSelectedBlock &&
+			! hasMultiSelection() &&
+			( editorMode === 'navigation' || editorMode === 'zoom-out' );
 
-			const block = getBlock( clientId ) || { name: '', attributes: {} };
-			const editorMode = __unstableGetEditorMode();
-			const hasSelectedBlock = clientId && block?.name;
-			const isEmptyDefaultBlock = isUnmodifiedDefaultBlock( block );
-			const _showEmptyBlockSideInserter =
-				clientId &&
-				! isTyping() &&
-				editorMode === 'edit' &&
-				isEmptyDefaultBlock;
-			const maybeShowBreadcrumb =
+		return {
+			showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
+			showBreadcrumb:
+				! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
+			showBlockToolbarPopover:
+				! getSettings().hasFixedToolbar &&
+				! _showEmptyBlockSideInserter &&
 				hasSelectedBlock &&
-				! hasMultiSelection() &&
-				( editorMode === 'navigation' || editorMode === 'zoom-out' );
-
-			return {
-				showEmptyBlockSideInserter: _showEmptyBlockSideInserter,
-				showBreadcrumb:
-					! _showEmptyBlockSideInserter && maybeShowBreadcrumb,
-				showBlockToolbarPopover:
-					hasBlockToolbar &&
-					! getSettings().hasFixedToolbar &&
-					! _showEmptyBlockSideInserter &&
-					hasSelectedBlock &&
-					! isEmptyDefaultBlock &&
-					! maybeShowBreadcrumb,
-				showFixedToolbar:
-					editorMode !== 'zoom-out' &&
-					hasBlockToolbar &&
-					getSettings().hasFixedToolbar,
-			};
-		},
-		[ hasBlockToolbar ]
-	);
+				! isEmptyDefaultBlock &&
+				! maybeShowBreadcrumb,
+		};
+	}, [] );
 }

package/src/components/block-tools/zoom-out-mode-inserters.js

@@ -10,11 +10,15 @@ import { useEffect, useState } from '@wordpress/element';
 import BlockPopoverInbetween from '../block-popover/inbetween';
 import { store as blockEditorStore } from '../../store';
 import Inserter from '../inserter';
+import { unlock } from '../../lock-unlock';
 
 function ZoomOutModeInserters( { __unstableContentRef } ) {
 	const [ isReady, setIsReady ] = useState( false );
 	const blockOrder = useSelect( ( select ) => {
-		return select( blockEditorStore ).getBlockOrder();
+		const { sectionRootClientId } = unlock(
+			select( blockEditorStore ).getSettings()
+		);
+		return select( blockEditorStore ).getBlockOrder( sectionRootClientId );
 	}, [] );
 
 	// Defer the initial rendering to avoid the jumps due to the animation.

package/src/components/block-variation-picker/content.scss

@@ -1,89 +1,39 @@
-.block-editor-block-variation-picker {
-	.components-placeholder__instructions {
-		// Defer to vertical margins applied by template picker options.
-		margin-bottom: 0;
-	}
-
-	.components-placeholder__fieldset {
-		// Options will render horizontally, but the immediate children of the
-		// fieldset are the options and the skip button, oriented vertically.
-		flex-direction: column;
-	}
-
-	&.has-many-variations .components-placeholder__fieldset {
-		// Allow options to occupy a greater amount of the available space if
-		// many options exist.
-		max-width: 90%;
-	}
-}
-
-.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
+.block-editor-block-variation-picker__variations,
+.block-editor-block-variation-picker__skip,
+.wp-block-group-placeholder__variations {
+	list-style: none;
 	display: flex;
 	justify-content: flex-start;
 	flex-direction: row;
 	flex-wrap: wrap;
 	width: 100%;
-	margin: $grid-unit-20 0;
 	padding: 0;
-	list-style: none;
+	margin: 0;
+	gap: $grid-unit-10;
+	font-size: $helptext-font-size;
 
-	> li {
-		list-style: none;
-		margin: $grid-unit-10 ( $grid-unit-10 + $grid-unit-15 ) 0 0;
-		flex-shrink: 1;
-		width: 75px;
-		text-align: center;
-
-		button {
-			display: inline-flex;
-			margin-right: 0;
-		}
+	svg {
+		fill: $gray-400 !important;
 	}
 
-	.block-editor-block-variation-picker__variation {
-		padding: $grid-unit-10;
+	.components-button {
+		padding: 4px;
 	}
 
-	.block-editor-block-variation-picker__variation-label {
-		font-family: $default-font;
-		font-size: 12px;
-		display: block;
-		line-height: 1.4;
+	.components-button:hover {
+		background: none !important; // !important to simplify the selector.
 	}
-}
 
-.block-editor-block-variation-picker__variation {
-	width: 100%;
-
-	&.components-button.has-icon {
-		// Override default styles inherited from <Button /> to center
-		// icon horizontally.
-		justify-content: center;
-		width: auto;
-
-		&.is-secondary {
-			background-color: $white;
-		}
-	}
-
-	&.components-button {
-		// Override default styles inherited from <Button /> to allow button
-		// to grow vertically.
-		height: auto;
-		padding: 0;
-	}
-
-	&::before {
-		// Use `padding-bottom` trick to style element as perfect square.
-		content: "";
-		padding-bottom: 100%;
-	}
-
-	&:first-child {
-		margin-left: 0;
+	.components-button:hover svg {
+		fill: var(--wp-admin-theme-color) !important;
 	}
 
-	&:last-child {
-		margin-right: 0;
+	& > li {
+		width: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: $grid-unit-05;
 	}
 }
+

package/src/components/block-variation-picker/index.js

@@ -13,7 +13,7 @@ import { layout } from '@wordpress/icons';
 function BlockVariationPicker( {
 	icon = layout,
 	label = __( 'Choose variation' ),
-	instructions = __( 'Select a variation to start with.' ),
+	instructions = __( 'Select a variation to start with:' ),
 	variations,
 	onSelect,
 	allowSkip,
@@ -42,7 +42,8 @@ function BlockVariationPicker( {
 				{ variations.map( ( variation ) => (
 					<li key={ variation.name }>
 						<Button
-							variant="secondary"
+							__next40pxDefaultSize
+							variant="tertiary"
 							icon={
 								variation.icon && variation.icon.src
 									? variation.icon.src

package/src/components/block-variation-transforms/index.js

@@ -180,7 +180,9 @@ function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	};
 
 	// Skip rendering if there are no variations
-	if ( ! variations?.length ) return null;
+	if ( ! variations?.length ) {
+		return null;
+	}
 
 	const baseClass = 'block-editor-block-variation-transforms';
 

package/src/components/floating-toolbar/index.native.js

@@ -47,8 +47,9 @@ const FloatingToolbar = ( {
 	}, [ showFloatingToolbar ] );
 
 	useEffect( () => {
-		if ( showFloatingToolbar )
+		if ( showFloatingToolbar ) {
 			setPreviousSelection( { clientId: selectedClientId, parentId } );
+		}
 	}, [ selectedClientId ] );
 
 	const translationRange =
@@ -115,7 +116,9 @@ export default compose( [
 
 		const selectedClientId = getSelectedBlockClientId();
 
-		if ( ! selectedClientId ) return;
+		if ( ! selectedClientId ) {
+			return;
+		}
 
 		const rootBlockId = getBlockHierarchyRootClientId( selectedClientId );
 

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

@@ -275,9 +275,7 @@ function BackgroundImageToolsPanelItem( {
 		};
 	}, [] );
 
-	const hasValue =
-		hasBackgroundImageValue( style ) ||
-		hasBackgroundImageValue( inheritedValue );
+	const hasValue = hasBackgroundImageValue( style );
 
 	return (
 		<ToolsPanelItem

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

@@ -587,7 +587,9 @@ export default function ColorPanel( {
 	].filter( Boolean );
 
 	elements.forEach( ( { name, label, showPanel } ) => {
-		if ( ! showPanel ) return;
+		if ( ! showPanel ) {
+			return;
+		}
 
 		const elementBackgroundColor = decodeValue(
 			inheritedValue?.elements?.[ name ]?.color?.background

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

@@ -17,7 +17,7 @@ import {
 	__experimentalView as View,
 } from '@wordpress/components';
 import { Icon, positionCenter, stretchWide } from '@wordpress/icons';
-import { useCallback, Platform } from '@wordpress/element';
+import { useCallback, useState, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -248,6 +248,10 @@ export default function DimensionsPanel( {
 		],
 	} );
 
+	//Minimum Margin Value
+	const minimumMargin = -Infinity;
+	const [ minMarginValue, setMinMarginValue ] = useState( minimumMargin );
+
 	// Content Size
 	const showContentSizeControl =
 		useHasContentSize( settings ) && includeLayoutControls;
@@ -435,6 +439,17 @@ export default function DimensionsPanel( {
 
 	const onMouseLeaveControls = () => onVisualize( false );
 
+	const inputProps = {
+		min: minMarginValue,
+		onDragStart: () => {
+			//Reset to 0 in case the value was negative.
+			setMinMarginValue( 0 );
+		},
+		onDragEnd: () => {
+			setMinMarginValue( minimumMargin );
+		},
+	};
+
 	return (
 		<Wrapper
 			resetAllFilter={ resetAllFilter }
@@ -561,6 +576,7 @@ export default function DimensionsPanel( {
 						<BoxControl
 							values={ marginValues }
 							onChange={ setMarginValues }
+							inputProps={ inputProps }
 							label={ __( 'Margin' ) }
 							sides={ marginSides }
 							units={ units }
@@ -574,6 +590,7 @@ export default function DimensionsPanel( {
 						<SpacingSizesControl
 							values={ marginValues }
 							onChange={ setMarginValues }
+							minimumCustomValue={ -Infinity }
 							label={ __( 'Margin' ) }
 							sides={ marginSides }
 							units={ units }

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

@@ -68,6 +68,7 @@ const VALID_SETTINGS = [
 	'spacing.units',
 	'typography.fluid',
 	'typography.customFontSize',
+	'typography.defaultFontSizes',
 	'typography.dropCap',
 	'typography.fontFamilies',
 	'typography.fontSizes',
@@ -240,6 +241,7 @@ export function useSettingsForBlockElement(
 				...updatedSettings.typography,
 				fontSizes: {},
 				customFontSize: false,
+				defaultFontSizes: false,
 			};
 		}
 

package/src/components/global-styles/test/utils.js

@@ -6,6 +6,7 @@ import {
 	getBlockStyleVariationSelector,
 	getPresetVariableFromValue,
 	getValueFromVariable,
+	scopeFeatureSelectors,
 } from '../utils';
 
 describe( 'editor utils', () => {
@@ -345,4 +346,24 @@ describe( 'editor utils', () => {
 			}
 		);
 	} );
+
+	describe( 'scopeFeatureSelectors', () => {
+		it( 'correctly scopes selectors while maintaining selectors object structure', () => {
+			const actual = scopeFeatureSelectors( '.custom, .secondary', {
+				color: '.my-block h1',
+				typography: {
+					root: '.my-block',
+					lineHeight: '.my-block h1',
+				},
+			} );
+
+			expect( actual ).toEqual( {
+				color: '.custom .my-block h1, .secondary .my-block h1',
+				typography: {
+					root: '.custom .my-block, .secondary .my-block',
+					lineHeight: '.custom .my-block h1, .secondary .my-block h1',
+				},
+			} );
+		} );
+	} );
 } );