@wordpress/block-editor 12.9.1-next.5a1d1283.0 → 12.10.1

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

@@ -86,9 +86,15 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 	const isFullscreen =
 		document.body.classList.contains( 'is-fullscreen-mode' );
 
+	/**
+	 * The following code is a workaround to fix the width of the toolbar
+	 * it should be removed when the toolbar will be rendered inline
+	 * FIXME: remove this layout effect when the toolbar is no longer
+	 * 				absolutely positioned
+	 */
 	useLayoutEffect( () => {
 		// don't do anything if not fixed toolbar
-		if ( ! isFixed || ! blockType ) {
+		if ( ! isFixed ) {
 			return;
 		}
 
@@ -100,6 +106,11 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			return;
 		}
 
+		if ( ! blockType ) {
+			blockToolbar.style.width = 'initial';
+			return;
+		}
+
 		if ( ! isLargerThanTabletViewport ) {
 			// set the width of the toolbar to auto
 			blockToolbar.style = {};
@@ -112,11 +123,10 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			return;
 		}
 
-		// get the width of the pinned items in the post editor
+		// get the width of the pinned items in the post editor or widget editor
 		const pinnedItems = document.querySelector(
-			'.edit-post-header__settings'
+			'.edit-post-header__settings, .edit-widgets-header__actions'
 		);
-
 		// get the width of the left header in the site editor
 		const leftHeader = document.querySelector(
 			'.edit-site-header-edit-mode__end'
@@ -132,7 +142,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 
 		const marginLeft = parseFloat( computedToolbarStyle.marginLeft );
 		const pinnedItemsWidth = computedPinnedItemsStyle
-			? parseFloat( computedPinnedItemsStyle.width ) + 10 // 10 is the pinned items padding
+			? parseFloat( computedPinnedItemsStyle.width )
 			: 0;
 		const leftHeaderWidth = computedLeftHeaderStyle
 			? parseFloat( computedLeftHeaderStyle.width )
@@ -143,6 +153,7 @@ function BlockContextualToolbar( { focusOnMount, isFixed, ...props } ) {
 			leftHeaderWidth +
 			pinnedItemsWidth +
 			marginLeft +
+			( pinnedItems || leftHeader ? 2 : 0 ) + // Prevents button focus border from being cut off
 			( isFullscreen ? 0 : 160 ) // the width of the admin sidebar expanded
 		}px)`;
 	}, [

package/src/components/block-tools/block-selection-button.js

@@ -165,7 +165,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 				selectedBlockClientId;
 		} else if ( navigateIn ) {
 			focusedBlockUid =
-				getClientIdsOfDescendants( [ selectedBlockClientId ] )[ 0 ] ??
+				getClientIdsOfDescendants( selectedBlockClientId )[ 0 ] ??
 				selectedBlockClientId;
 		}
 		const startingBlockClientId = hasBlockMovingClientId();
@@ -193,6 +193,14 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 			selectBlock( startingBlockClientId );
 			setBlockMovingClientId( null );
 		}
+		// Prevent the block from being moved into itself.
+		if (
+			startingBlockClientId &&
+			selectedBlockClientId === startingBlockClientId &&
+			navigateIn
+		) {
+			return;
+		}
 		if ( navigateDown || navigateUp || navigateOut || navigateIn ) {
 			if ( focusedBlockUid ) {
 				event.preventDefault();

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

@@ -89,9 +89,6 @@
  * Block Toolbar when contextual.
  */
 
-// Base left position for the toolbar when fixed.
-@include editor-left(".block-editor-block-contextual-toolbar.is-fixed");
-
 .block-editor-block-contextual-toolbar {
 	// Block UI appearance.
 	display: inline-flex;
@@ -105,11 +102,6 @@
 	}
 
 	&.is-fixed {
-		position: sticky;
-		top: 0;
-		z-index: z-index(".block-editor-block-popover");
-		display: block;
-		width: 100%;
 		overflow: hidden;
 
 		.block-editor-block-toolbar {
@@ -137,51 +129,8 @@
 		background: linear-gradient(to right, $white, transparent);
 	}
 
-	// on desktop and tablet viewports the toolbar is fixed
-	// on top of interface header
-	$toolbar-margin: $grid-unit-80 * 3 - 2 * $grid-unit + $grid-unit-05;
 	@include break-medium() {
 		&.is-fixed {
-			// leave room for block inserter, undo and redo, list view
-			margin-left: $toolbar-margin;
-			// position on top of interface header
-			position: fixed;
-			top: $admin-bar-height;
-			// Don't fill up when empty
-			min-height: initial;
-			// remove the border
-			border-bottom: none;
-			// has to be flex for collapse button to fit
-			display: flex;
-
-			// Mimic the height of the parent, vertically align center, and provide a max-height.
-			height: $header-height;
-			align-items: center;
-
-			&.is-collapsed {
-				width: initial;
-			}
-
-			&:empty {
-				width: initial;
-			}
-
-			.is-fullscreen-mode & {
-				// leave room for block inserter, undo and redo, list view
-				// and some margin left
-				margin-left: $grid-unit-80 * 4 - 2 * $grid-unit;
-
-				top: 0;
-
-				&.is-collapsed {
-					width: initial;
-				}
-
-				&:empty {
-					width: initial;
-				}
-			}
-
 			& > .block-editor-block-toolbar {
 				flex-grow: initial;
 				width: initial;
@@ -264,13 +213,6 @@
 			}
 
 			.show-icon-labels & {
-
-				margin-left: $grid-unit-80 + 2 * $grid-unit; // inserter and margin
-
-				.is-fullscreen-mode & {
-					margin-left: $grid-unit * 18; // site hub, inserter and margin
-				}
-
 				.block-editor-block-parent-selector .block-editor-block-parent-selector__button::after {
 					left: 0;
 				}
@@ -287,14 +229,6 @@
 					}
 				}
 			}
-
-			.blocks-widgets-container & {
-				margin-left: $grid-unit-80 * 2.4;
-
-				&.is-collapsed {
-					margin-left: $grid-unit-80 * 4.2;
-				}
-			}
 		}
 
 		&.is-fixed .block-editor-block-parent-selector {
@@ -332,38 +266,6 @@
 			}
 		}
 	}
-
-	// on tablet viewports the toolbar is fixed
-	// on top of interface header and covers the whole header
-	// except for the inserter on the left
-	@include break-medium() {
-		&.is-fixed {
-			width: calc(100% - #{$toolbar-margin});
-
-			.show-icon-labels & {
-				width: calc(100% + 40px - #{$toolbar-margin}); //there are no undo, redo and list view buttons
-			}
-
-		}
-	}
-
-	// on desktop viewports the toolbar is fixed
-	// on top of interface header and leaves room
-	// for the block inserter the publish button
-	@include break-large() {
-		&.is-fixed {
-			width: auto;
-			.show-icon-labels & {
-				width: auto; //there are no undo, redo and list view buttons
-			}
-		}
-		.is-fullscreen-mode &.is-fixed {
-			// in full screen mode we need to account for
-			// the combined with of the tools at the right of the header and the margin left
-			// of the toolbar which includes four buttons
-			width: calc(100% - 280px - #{4 * $grid-unit-80});
-		}
-	}
 }
 
 /**

package/src/components/border-radius-control/input-controls.js

@@ -68,7 +68,7 @@ export default function BoxInputControls( {
 					: selectedUnits[ corner ] || selectedUnits.flat;
 
 				return (
-					<Tooltip text={ label } position="top" key={ corner }>
+					<Tooltip text={ label } placement="top" key={ corner }>
 						<div className="components-border-radius-control__tooltip-wrapper">
 							<UnitControl
 								{ ...props }

package/src/components/border-radius-control/linked-button.js

@@ -8,19 +8,16 @@ import { __ } from '@wordpress/i18n';
 export default function LinkedButton( { isLinked, ...props } ) {
 	const label = isLinked ? __( 'Unlink radii' ) : __( 'Link radii' );
 
-	// TODO: Remove span after merging https://github.com/WordPress/gutenberg/pull/44198
 	return (
 		<Tooltip text={ label }>
-			<span>
-				<Button
-					{ ...props }
-					className="component-border-radius-control__linked-button"
-					isSmall
-					icon={ isLinked ? link : linkOff }
-					iconSize={ 24 }
-					aria-label={ label }
-				/>
-			</span>
+			<Button
+				{ ...props }
+				className="component-border-radius-control__linked-button"
+				isSmall
+				icon={ isLinked ? link : linkOff }
+				iconSize={ 24 }
+				aria-label={ label }
+			/>
 		</Tooltip>
 	);
 }

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

@@ -202,31 +202,44 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                 class="components-circular-option-picker"
               >
                 <div
-                  class="components-circular-option-picker__swatches"
+                  aria-label="Custom color picker."
+                  id="components-circular-option-picker-0"
+                  role="listbox"
                 >
                   <div
-                    class="components-circular-option-picker__option-wrapper"
+                    class="components-circular-option-picker__swatches"
                   >
-                    <button
-                      aria-label="Color: red"
-                      aria-pressed="true"
-                      class="components-button components-circular-option-picker__option is-pressed"
-                      style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-                      type="button"
-                    />
-                    <svg
-                      aria-hidden="true"
-                      fill="#000"
-                      focusable="false"
-                      height="24"
-                      viewBox="0 0 24 24"
-                      width="24"
-                      xmlns="http://www.w3.org/2000/svg"
+                    <div
+                      class="components-circular-option-picker__option-group components-circular-option-picker__swatches"
                     >
-                      <path
-                        d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
-                      />
-                    </svg>
+                      <div
+                        class="components-circular-option-picker__option-wrapper"
+                      >
+                        <button
+                          aria-label="Color: red"
+                          aria-selected="true"
+                          class="components-button components-circular-option-picker__option is-pressed"
+                          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
+                          aria-hidden="true"
+                          fill="#000"
+                          focusable="false"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          width="24"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
+                          />
+                        </svg>
+                      </div>
+                    </div>
                   </div>
                 </div>
                 <div

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

@@ -36,8 +36,9 @@ const upperFirst = ( [ firstLetter, ...rest ] ) =>
  */
 const withCustomColorPalette = ( colorsArray ) =>
 	createHigherOrderComponent(
-		( WrappedComponent ) => ( props ) =>
-			<WrappedComponent { ...props } colors={ colorsArray } />,
+		( WrappedComponent ) => ( props ) => (
+			<WrappedComponent { ...props } colors={ colorsArray } />
+		),
 		'withCustomColorPalette'
 	);
 

package/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js

@@ -34,55 +34,28 @@ export default function useConvertToGroupButtonProps( selectedClientIds ) {
 	return useSelect(
 		( select ) => {
 			const {
-				getBlockRootClientId,
 				getBlocksByClientId,
-				canInsertBlockType,
 				getSelectedBlockClientIds,
+				isUngroupable,
+				isGroupable,
 			} = select( blockEditorStore );
 			const { getGroupingBlockName, getBlockType } =
 				select( blocksStore );
 			const clientIds = selectedClientIds?.length
 				? selectedClientIds
 				: getSelectedBlockClientIds();
-			const groupingBlockName = getGroupingBlockName();
-
-			const rootClientId = clientIds?.length
-				? getBlockRootClientId( clientIds[ 0 ] )
-				: undefined;
-
-			const groupingBlockAvailable = canInsertBlockType(
-				groupingBlockName,
-				rootClientId
-			);
-
 			const blocksSelection = getBlocksByClientId( clientIds );
-			const isSingleBlockSelected = blocksSelection.length === 1;
 			const [ firstSelectedBlock ] = blocksSelection;
-			// A block is ungroupable if it is a single grouping block with inner blocks.
-			// If a block has an `ungroup` transform, it is also ungroupable, without the
-			// requirement of being the default grouping block.
-			// Do we have a single grouping Block selected and does that group have inner blocks?
-			const isUngroupable =
-				isSingleBlockSelected &&
-				( firstSelectedBlock.name === groupingBlockName ||
-					getBlockType( firstSelectedBlock.name )?.transforms
-						?.ungroup ) &&
-				!! firstSelectedBlock.innerBlocks.length;
-
-			// Do we have
-			// 1. Grouping block available to be inserted?
-			// 2. One or more blocks selected
-			const isGroupable =
-				groupingBlockAvailable && blocksSelection.length;
-
+			const _isUngroupable =
+				clientIds.length === 1 && isUngroupable( clientIds[ 0 ] );
 			return {
 				clientIds,
-				isGroupable,
-				isUngroupable,
+				isGroupable: isGroupable( clientIds ),
+				isUngroupable: _isUngroupable,
 				blocksSelection,
-				groupingBlockName,
+				groupingBlockName: getGroupingBlockName(),
 				onUngroup:
-					isUngroupable &&
+					_isUngroupable &&
 					getBlockType( firstSelectedBlock.name )?.transforms
 						?.ungroup,
 			};

package/src/components/default-block-appender/index.native.js

@@ -24,6 +24,7 @@ const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 const noop = () => {};
 
 export function DefaultBlockAppender( {
+	baseGlobalStyles,
 	isLocked,
 	isVisible,
 	onAppend,
@@ -34,6 +35,15 @@ export function DefaultBlockAppender( {
 	if ( isLocked || ! isVisible ) {
 		return null;
 	}
+	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ 'core/paragraph' ];
+	const { fontSize, lineHeight } = blockGlobalStyles?.typography || {};
+
+	const textStyles = blockGlobalStyles?.typography
+		? {
+				...( fontSize && { fontSize } ),
+				...( lineHeight && { lineHeight } ),
+		  }
+		: undefined;
 
 	const value =
 		typeof placeholder === 'string'
@@ -51,7 +61,12 @@ export function DefaultBlockAppender( {
 				{ showSeparator ? (
 					<BlockInsertionPoint />
 				) : (
-					<RichText placeholder={ value } onChange={ noop } />
+					<RichText
+						placeholder={ value }
+						onChange={ noop }
+						tagName="p"
+						style={ textStyles }
+					/>
 				) }
 			</View>
 		</Pressable>
@@ -60,16 +75,24 @@ export function DefaultBlockAppender( {
 
 export default compose(
 	withSelect( ( select, ownProps ) => {
-		const { getBlockCount, getBlockName, isBlockValid, getTemplateLock } =
-			select( blockEditorStore );
+		const {
+			getBlockCount,
+			getBlockName,
+			getSettings,
+			isBlockValid,
+			getTemplateLock,
+		} = select( blockEditorStore );
 
 		const isEmpty = ! getBlockCount( ownProps.rootClientId );
 		const isLastBlockDefault =
 			getBlockName( ownProps.lastBlockClientId ) ===
 			getDefaultBlockName();
 		const isLastBlockValid = isBlockValid( ownProps.lastBlockClientId );
+		const globalStylesBaseStyles =
+			getSettings()?.__experimentalGlobalStylesBaseStyles;
 
 		return {
+			baseGlobalStyles: globalStylesBaseStyles,
 			isVisible: isEmpty || ! isLastBlockDefault || ! isLastBlockValid,
 			isLocked: !! getTemplateLock( ownProps.rootClientId ),
 		};

package/src/components/duotone/utils.js

@@ -23,3 +23,68 @@ export function getValuesFromColors( colors = [] ) {
 
 	return values;
 }
+
+/**
+ * Stylesheet for disabling a global styles duotone filter.
+ *
+ * @param {string} selector Selector to disable the filter for.
+ *
+ * @return {string} Filter none style.
+ */
+export function getDuotoneUnsetStylesheet( selector ) {
+	return `${ selector }{filter:none}`;
+}
+
+/**
+ * SVG and stylesheet needed for rendering the duotone filter.
+ *
+ * @param {string} selector Selector to apply the filter to.
+ * @param {string} id       Unique id for this duotone filter.
+ *
+ * @return {string} Duotone filter style.
+ */
+export function getDuotoneStylesheet( selector, id ) {
+	return `${ selector }{filter:url(#${ id })}`;
+}
+
+/**
+ * The SVG part of the duotone filter.
+ *
+ * @param {string}   id     Unique id for this duotone filter.
+ * @param {string[]} colors Color strings from dark to light.
+ *
+ * @return {string} Duotone SVG.
+ */
+export function getDuotoneFilter( id, colors ) {
+	const values = getValuesFromColors( colors );
+	return `
+<svg
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 0 0"
+	width="0"
+	height="0"
+	focusable="false"
+	role="none"
+	aria-hidden="true"
+	style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;"
+>
+	<defs>
+		<filter id="${ id }">
+			<!--
+				Use sRGB instead of linearRGB so transparency looks correct.
+				Use perceptual brightness to convert to grayscale.
+			-->
+			<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 "></feColorMatrix>
+			<!-- Use sRGB instead of linearRGB to be consistent with how CSS gradients work. -->
+			<feComponentTransfer color-interpolation-filters="sRGB">
+				<feFuncR type="table" tableValues="${ values.r.join( ' ' ) }"></feFuncR>
+				<feFuncG type="table" tableValues="${ values.g.join( ' ' ) }"></feFuncG>
+				<feFuncB type="table" tableValues="${ values.b.join( ' ' ) }"></feFuncB>
+				<feFuncA type="table" tableValues="${ values.a.join( ' ' ) }"></feFuncA>
+			</feComponentTransfer>
+			<!-- Re-mask the image with the original transparency since the feColorMatrix above loses that information. -->
+			<feComposite in2="SourceGraphic" operator="in"></feComposite>
+		</filter>
+	</defs>
+</svg>`;
+}

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

@@ -10,16 +10,18 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { SVG } from '@wordpress/components';
 import { useCallback, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import transformStyles from '../../utils/transform-styles';
+import { store as blockEditorStore } from '../../store';
+import { unlock } from '../../lock-unlock';
 
-const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
 extend( [ namesPlugin, a11yPlugin ] );
 
-function useDarkThemeBodyClassName( styles ) {
+function useDarkThemeBodyClassName( styles, scope ) {
 	return useCallback(
 		( node ) => {
 			if ( ! node ) {
@@ -28,9 +30,7 @@ function useDarkThemeBodyClassName( styles ) {
 
 			const { ownerDocument } = node;
 			const { defaultView, body } = ownerDocument;
-			const canvas = ownerDocument.querySelector(
-				EDITOR_STYLES_SELECTOR
-			);
+			const canvas = scope ? ownerDocument.querySelector( scope ) : body;
 
 			let backgroundColor;
 
@@ -63,38 +63,47 @@ function useDarkThemeBodyClassName( styles ) {
 				body.classList.add( 'is-dark-theme' );
 			}
 		},
-		[ styles ]
+		[ styles, scope ]
 	);
 }
 
-export default function EditorStyles( { styles } ) {
-	const stylesArray = useMemo(
-		() => Object.values( styles ?? [] ),
-		[ styles ]
+export default function EditorStyles( { styles, scope } ) {
+	const overrides = useSelect(
+		( select ) => unlock( select( blockEditorStore ) ).getStyleOverrides(),
+		[]
 	);
-	const transformedStyles = useMemo(
-		() =>
+	const [ transformedStyles, transformedSvgs ] = useMemo( () => {
+		const _styles = Object.values( styles ?? [] );
+
+		for ( const [ id, override ] of overrides ) {
+			const index = _styles.findIndex( ( { id: _id } ) => id === _id );
+			const overrideWithId = { ...override, id };
+			if ( index === -1 ) {
+				_styles.push( overrideWithId );
+			} else {
+				_styles[ index ] = overrideWithId;
+			}
+		}
+
+		return [
 			transformStyles(
-				stylesArray.filter( ( style ) => style?.css ),
-				EDITOR_STYLES_SELECTOR
+				_styles.filter( ( style ) => style?.css ),
+				scope
 			),
-		[ stylesArray ]
-	);
-
-	const transformedSvgs = useMemo(
-		() =>
-			stylesArray
+			_styles
 				.filter( ( style ) => style.__unstableType === 'svgs' )
 				.map( ( style ) => style.assets )
 				.join( '' ),
-		[ stylesArray ]
-	);
+		];
+	}, [ styles, overrides, scope ] );
 
 	return (
 		<>
 			{ /* Use an empty style element to have a document reference,
 			     but this could be any element. */ }
-			<style ref={ useDarkThemeBodyClassName( stylesArray ) } />
+			<style
+				ref={ useDarkThemeBodyClassName( transformedStyles, scope ) }
+			/>
 			{ transformedStyles.map( ( css, index ) => (
 				<style key={ index }>{ css }</style>
 			) ) }