@wordpress/block-editor 12.19.2 → 12.19.4

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

@@ -5,28 +5,36 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
-	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
 	FlexItem,
 	Dropdown,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
+
 /**
  * External dependencies
  */
 import classNames from 'classnames';
 
-export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
-	const defaultShadows = settings?.shadow?.presets?.default;
-	const themeShadows = settings?.shadow?.presets?.theme;
-	const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
 
-	const shadows = [
-		...( defaultPresetsEnabled ? defaultShadows : [] ),
-		...( themeShadows || [] ),
-	];
+/**
+ * Shared reference to an empty array for cases where it is important to avoid
+ * returning a new array reference on every invocation.
+ *
+ * @type {Array}
+ */
+const EMPTY_ARRAY = [];
+
+export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
+	const shadows = useShadowPresets( settings );
 
 	return (
 		<div className="block-editor-global-styles__shadow-popover-container">
@@ -37,42 +45,76 @@ export function ShadowPopoverContainer( { shadow, onShadowChange, settings } ) {
 					activeShadow={ shadow }
 					onSelect={ onShadowChange }
 				/>
+				<div className="block-editor-global-styles__clear-shadow">
+					<Button
+						variant="tertiary"
+						onClick={ () => onShadowChange( undefined ) }
+					>
+						{ __( 'Clear' ) }
+					</Button>
+				</div>
 			</VStack>
 		</div>
 	);
 }
 
 export function ShadowPresets( { presets, activeShadow, onSelect } ) {
+	const { CompositeV2: Composite, useCompositeStoreV2: useCompositeStore } =
+		unlock( componentsPrivateApis );
+	const compositeStore = useCompositeStore();
 	return ! presets ? null : (
-		<Grid columns={ 6 } gap={ 0 } align="center" justify="center">
+		<Composite
+			store={ compositeStore }
+			role="listbox"
+			className="block-editor-global-styles__shadow__list"
+			aria-label={ __( 'Drop shadows' ) }
+		>
 			{ presets.map( ( { name, slug, shadow } ) => (
 				<ShadowIndicator
 					key={ slug }
 					label={ name }
 					isActive={ shadow === activeShadow }
+					type={ slug === 'unset' ? 'unset' : 'preset' }
 					onSelect={ () =>
 						onSelect( shadow === activeShadow ? undefined : shadow )
 					}
 					shadow={ shadow }
 				/>
 			) ) }
-		</Grid>
+		</Composite>
 	);
 }
 
-export function ShadowIndicator( { label, isActive, onSelect, shadow } ) {
+export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
+	const { CompositeItemV2: CompositeItem } = unlock( componentsPrivateApis );
 	return (
-		<div className="block-editor-global-styles__shadow-indicator-wrapper">
-			<Button
-				className="block-editor-global-styles__shadow-indicator"
-				onClick={ onSelect }
-				label={ label }
-				style={ { boxShadow: shadow } }
-				showTooltip
-			>
-				{ isActive && <Icon icon={ check } /> }
-			</Button>
-		</div>
+		<CompositeItem
+			role="option"
+			aria-label={ label }
+			aria-selected={ isActive }
+			className={ classNames(
+				'block-editor-global-styles__shadow__item',
+				{
+					'is-active': isActive,
+				}
+			) }
+			render={
+				<Button
+					className={ classNames(
+						'block-editor-global-styles__shadow-indicator',
+						{
+							unset: type === 'unset',
+						}
+					) }
+					onClick={ onSelect }
+					label={ label }
+					style={ { boxShadow: shadow } }
+					showTooltip
+				>
+					{ isActive && <Icon icon={ check } /> }
+				</Button>
+			}
+		/>
 	);
 }
 
@@ -123,3 +165,30 @@ function renderShadowToggle() {
 		);
 	};
 }
+
+export function useShadowPresets( settings ) {
+	return useMemo( () => {
+		if ( ! settings?.shadow ) {
+			return EMPTY_ARRAY;
+		}
+
+		const defaultPresetsEnabled = settings?.shadow?.defaultPresets;
+		const { default: defaultShadows, theme: themeShadows } =
+			settings?.shadow?.presets ?? {};
+		const unsetShadow = {
+			name: __( 'Unset' ),
+			slug: 'unset',
+			shadow: 'none',
+		};
+
+		const shadowPresets = [
+			...( ( defaultPresetsEnabled && defaultShadows ) || EMPTY_ARRAY ),
+			...( themeShadows || EMPTY_ARRAY ),
+		];
+		if ( shadowPresets.length ) {
+			shadowPresets.unshift( unsetShadow );
+		}
+
+		return shadowPresets;
+	}, [ settings ] );
+}

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

@@ -2,10 +2,24 @@
 	fill: currentColor;
 }
 
+// @todo: Ideally, popover, swatch size, and gap values should be CSS variables
+// to apply precise grid layouts.
+// https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
 .block-editor-global-styles__shadow-popover-container {
 	width: 230px;
 }
 
+.block-editor-global-styles__shadow__list {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+	padding-bottom: $grid-unit-10;
+}
+
+.block-editor-global-styles__clear-shadow {
+	text-align: right;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
 	display: block;
@@ -21,14 +35,6 @@
 	}
 }
 
-// wrapper to clip the shadow beyond 6px
-.block-editor-global-styles__shadow-indicator-wrapper {
-	padding: $grid-unit-15 * 0.5;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
 	color: $gray-800;
@@ -37,8 +43,25 @@
 	cursor: pointer;
 	padding: 0;
 
-	height: $button-size-small;
-	width: $button-size-small;
+	height: $button-size-small + 2 * $border-width;
+	width: $button-size-small + 2 * $border-width;
+	box-sizing: border-box;
+
+	transform: scale(1);
+	transition: transform 0.1s ease;
+	will-change: transform;
+
+	&:focus {
+		border: #{ $border-width * 2 } solid $gray-700;
+	}
+
+	&:hover {
+		transform: scale(1.2);
+	}
+
+	&.unset {
+		background: linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
+	}
 }
 
 .block-editor-global-styles-advanced-panel__custom-css-input textarea {
@@ -47,13 +70,3 @@
 	/*rtl:ignore*/
 	direction: ltr;
 }
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
-	position: absolute;
-	bottom: $grid-unit-20;
-	right: $grid-unit * 3;
-}
-
-.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
-	fill: $alert-red;
-}

package/src/components/inserter/media-tab/media-preview.js

@@ -195,7 +195,12 @@ export function MediaPreview( { media, onClick, category } ) {
 			createSuccessNotice,
 		]
 	);
-	const title = media.title?.rendered || media.title;
+
+	const title =
+		typeof media.title === 'string'
+			? media.title
+			: media.title?.rendered || __( 'no title' );
+
 	let truncatedTitle;
 	if ( title.length > MAXIMUM_TITLE_LENGTH ) {
 		const omission = '...';

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -11,10 +11,10 @@ import { __ } from '@wordpress/i18n';
 import BlockStyles from '../block-styles';
 import DefaultStylePicker from '../default-style-picker';
 import InspectorControls from '../inspector-controls';
-import { getBorderPanelLabel } from '../../hooks/border';
+import { useBorderPanelLabel } from '../../hooks/border';
 
 const StylesTab = ( { blockName, clientId, hasBlockStyles } ) => {
-	const borderPanelLabel = getBorderPanelLabel( { blockName } );
+	const borderPanelLabel = useBorderPanelLabel( { blockName } );
 
 	return (
 		<>

package/src/components/link-control/link-preview.js

@@ -16,8 +16,9 @@ import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
 import { Icon, globe, info, linkOff, edit, copySmall } from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
-import { useDispatch } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
+import { store as preferencesStore } from '@wordpress/preferences';
 
 /**
  * Internal dependencies
@@ -33,6 +34,12 @@ export default function LinkPreview( {
 	hasUnlinkControl = false,
 	onRemove,
 } ) {
+	const showIconLabels = useSelect(
+		( select ) =>
+			select( preferencesStore ).get( 'core', 'showIconLabels' ),
+		[]
+	);
+
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
 
@@ -139,7 +146,7 @@ export default function LinkPreview( {
 					label={ sprintf(
 						// Translators: %s is a placeholder for the link URL and an optional colon, (if a Link URL is present).
 						__( 'Copy link%s' ), // Ends up looking like "Copy link: https://example.com".
-						isEmptyURL ? '' : ': ' + value.url
+						isEmptyURL || showIconLabels ? '' : ': ' + value.url
 					) }
 					ref={ ref }
 					disabled={ isEmptyURL }

package/src/components/link-control/style.scss

@@ -34,6 +34,15 @@ $block-editor-link-control-number-of-actions: 1;
 				content: attr(aria-label);
 			}
 		}
+
+		.block-editor-link-control__search-item-top {
+			gap: $grid-unit-10;
+
+			.components-button.has-icon {
+				min-width: inherit;
+				width: min-content;
+			}
+		}
 	}
 }
 

package/src/components/rich-text/index.js

@@ -19,13 +19,14 @@ import {
 	removeFormat,
 } from '@wordpress/rich-text';
 import { Popover } from '@wordpress/components';
-import { getBlockType } from '@wordpress/blocks';
+import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import { useBlockEditorAutocompleteProps } from '../autocomplete';
 import { useBlockEditContext } from '../block-edit';
+import { blockBindingsKey } from '../block-edit/context';
 import FormatToolbarContainer from './format-toolbar-container';
 import { store as blockEditorStore } from '../../store';
 import { useUndoAutomaticChange } from './use-undo-automatic-change';
@@ -109,6 +110,7 @@ export function RichTextWrapper(
 		__unstableDisableFormats: disableFormats,
 		disableLineBreaks,
 		__unstableAllowPrefixTransformations,
+		disableEditing,
 		...props
 	},
 	forwardedRef
@@ -116,11 +118,9 @@ export function RichTextWrapper(
 	props = removeNativeProps( props );
 
 	const anchorRef = useRef();
-	const {
-		clientId,
-		isSelected: isBlockSelected,
-		name: blockName,
-	} = useBlockEditContext();
+	const context = useBlockEditContext();
+	const { clientId, isSelected: isBlockSelected, name: blockName } = context;
+	const blockBindings = context[ blockBindingsKey ];
 	const selector = ( select ) => {
 		// Avoid subscribing to the block editor store if the block is not
 		// selected.
@@ -128,12 +128,10 @@ export function RichTextWrapper(
 			return { isSelected: false };
 		}
 
-		const { getSelectionStart, getSelectionEnd, getBlockAttributes } =
+		const { getSelectionStart, getSelectionEnd } =
 			select( blockEditorStore );
 		const selectionStart = getSelectionStart();
 		const selectionEnd = getSelectionEnd();
-		const blockBindings =
-			getBlockAttributes( clientId )?.metadata?.bindings;
 
 		let isSelected;
 
@@ -146,43 +144,60 @@ export function RichTextWrapper(
 			isSelected = selectionStart.clientId === clientId;
 		}
 
-		// Disable Rich Text editing if block bindings specify that.
-		let shouldDisableEditing = false;
-		if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) {
-			const blockTypeAttributes = getBlockType( blockName ).attributes;
-			const { getBlockBindingsSource } = unlock(
-				select( blockEditorStore )
-			);
-			for ( const [ attribute, args ] of Object.entries(
-				blockBindings
-			) ) {
-				// If any of the attributes with source "rich-text" is part of the bindings,
-				// has a source with `lockAttributesEditing`, disable it.
-				if (
-					blockTypeAttributes?.[ attribute ]?.source ===
-						'rich-text' &&
-					getBlockBindingsSource( args.source )?.lockAttributesEditing
-				) {
-					shouldDisableEditing = true;
-					break;
-				}
-			}
-		}
-
 		return {
 			selectionStart: isSelected ? selectionStart.offset : undefined,
 			selectionEnd: isSelected ? selectionEnd.offset : undefined,
 			isSelected,
-			shouldDisableEditing,
 		};
 	};
-	const { selectionStart, selectionEnd, isSelected, shouldDisableEditing } =
-		useSelect( selector, [
-			clientId,
-			identifier,
-			originalIsSelected,
-			isBlockSelected,
-		] );
+	const { selectionStart, selectionEnd, isSelected } = useSelect( selector, [
+		clientId,
+		identifier,
+		originalIsSelected,
+		isBlockSelected,
+	] );
+
+	const disableBoundBlocks = useSelect(
+		( select ) => {
+			// Disable Rich Text editing if block bindings specify that.
+			let _disableBoundBlocks = false;
+			if ( blockBindings && blockName in BLOCK_BINDINGS_ALLOWED_BLOCKS ) {
+				const blockTypeAttributes =
+					getBlockType( blockName ).attributes;
+				const { getBlockBindingsSource } = unlock(
+					select( blocksStore )
+				);
+				for ( const [ attribute, args ] of Object.entries(
+					blockBindings
+				) ) {
+					if (
+						blockTypeAttributes?.[ attribute ]?.source !==
+						'rich-text'
+					) {
+						break;
+					}
+
+					// If the source is not defined, or if its value of `lockAttributesEditing` is `true`, disable it.
+					const blockBindingsSource = getBlockBindingsSource(
+						args.source
+					);
+					if (
+						! blockBindingsSource ||
+						blockBindingsSource.lockAttributesEditing
+					) {
+						_disableBoundBlocks = true;
+						break;
+					}
+				}
+			}
+
+			return _disableBoundBlocks;
+		},
+		[ blockBindings, blockName ]
+	);
+
+	const shouldDisableEditing = disableEditing || disableBoundBlocks;
+
 	const { getSelectionStart, getSelectionEnd, getBlockRootClientId } =
 		useSelect( blockEditorStore );
 	const { selectionChange } = useDispatch( blockEditorStore );
@@ -435,19 +450,34 @@ export function RichTextWrapper(
 	);
 }
 
-const ForwardedRichTextContainer = withDeprecations(
+// This is the private API for the RichText component.
+// It allows access to all props, not just the public ones.
+export const PrivateRichText = withDeprecations(
 	forwardRef( RichTextWrapper )
 );
 
-ForwardedRichTextContainer.Content = Content;
-ForwardedRichTextContainer.isEmpty = ( value ) => {
+PrivateRichText.Content = Content;
+PrivateRichText.isEmpty = ( value ) => {
 	return ! value || value.length === 0;
 };
 
+// This is the public API for the RichText component.
+// We wrap the PrivateRichText component to hide some props from the public API.
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
  */
-export default ForwardedRichTextContainer;
+const PublicForwardedRichTextContainer = forwardRef( ( props, ref ) => {
+	return (
+		<PrivateRichText ref={ ref } { ...props } disableEditing={ false } />
+	);
+} );
+
+PublicForwardedRichTextContainer.Content = Content;
+PublicForwardedRichTextContainer.isEmpty = ( value ) => {
+	return ! value || value.length === 0;
+};
+
+export default PublicForwardedRichTextContainer;
 export { RichTextShortcut } from './shortcut';
 export { RichTextToolbarButton } from './toolbar-button';
 export { __unstableRichTextInputEvent } from './input-event';

package/src/components/rich-text/use-enter.js

@@ -21,6 +21,10 @@ export function useEnter( props ) {
 	propsRef.current = props;
 	return useRefEffect( ( element ) => {
 		function onKeyDown( event ) {
+			if ( event.target.contentEditable !== 'true' ) {
+				return;
+			}
+
 			if ( event.defaultPrevented ) {
 				return;
 			}

package/src/components/rich-text/use-paste-handler.js

@@ -58,13 +58,35 @@ export function usePasteHandler( props ) {
 			const isInternal =
 				event.clipboardData.getData( 'rich-text' ) === 'true';
 
+			function pasteInline( content ) {
+				const transformed = formatTypes.reduce(
+					( accumulator, { __unstablePasteRule } ) => {
+						// Only allow one transform.
+						if ( __unstablePasteRule && accumulator === value ) {
+							accumulator = __unstablePasteRule( value, {
+								html,
+								plainText,
+							} );
+						}
+
+						return accumulator;
+					},
+					value
+				);
+				if ( transformed !== value ) {
+					onChange( transformed );
+				} else {
+					const valueToInsert = create( { html: content } );
+					addActiveFormats( valueToInsert, value.activeFormats );
+					onChange( insert( value, valueToInsert ) );
+				}
+			}
+
 			// If the data comes from a rich text instance, we can directly use it
 			// without filtering the data. The filters are only meant for externally
 			// pasted content and remove inline styles.
 			if ( isInternal ) {
-				const pastedValue = create( { html } );
-				addActiveFormats( pastedValue, value.activeFormats );
-				onChange( insert( value, pastedValue ) );
+				pasteInline( html );
 				return;
 			}
 
@@ -135,28 +157,7 @@ export function usePasteHandler( props ) {
 			} );
 
 			if ( typeof content === 'string' ) {
-				const transformed = formatTypes.reduce(
-					( accumlator, { __unstablePasteRule } ) => {
-						// Only allow one transform.
-						if ( __unstablePasteRule && accumlator === value ) {
-							accumlator = __unstablePasteRule( value, {
-								html,
-								plainText,
-							} );
-						}
-
-						return accumlator;
-					},
-					value
-				);
-
-				if ( transformed !== value ) {
-					onChange( transformed );
-				} else {
-					const valueToInsert = create( { html: content } );
-					addActiveFormats( valueToInsert, value.activeFormats );
-					onChange( insert( value, valueToInsert ) );
-				}
+				pasteInline( content );
 			} else if ( content.length > 0 ) {
 				if ( onReplace && isEmpty( value ) ) {
 					onReplace( content, content.length - 1, -1 );

package/src/components/url-popover/style.scss

@@ -58,6 +58,7 @@
 	text-overflow: ellipsis;
 	white-space: nowrap;
 	margin-right: $grid-unit-10;
+	min-width: 150px;
 	// Avoids the popover from growing too wide when the URL is long.
 	// See https://github.com/WordPress/gutenberg/issues/58599
 	max-width: $modal-min-width;

package/src/hooks/background.js

@@ -374,11 +374,14 @@ function backgroundSizeHelpText( value ) {
 }
 
 export const coordsToBackgroundPosition = ( value ) => {
-	if ( ! value || isNaN( value.x ) || isNaN( value.y ) ) {
+	if ( ! value || ( isNaN( value.x ) && isNaN( value.y ) ) ) {
 		return undefined;
 	}
 
-	return `${ value.x * 100 }% ${ value.y * 100 }%`;
+	const x = isNaN( value.x ) ? 0.5 : value.x;
+	const y = isNaN( value.y ) ? 0.5 : value.y;
+
+	return `${ x * 100 }% ${ y * 100 }%`;
 };
 
 export const backgroundPositionToCoords = ( value ) => {

package/src/hooks/block-hooks.js

@@ -35,12 +35,12 @@ function BlockHooksControlPure( { name, clientId } ) {
 
 	const { blockIndex, rootClientId, innerBlocksLength } = useSelect(
 		( select ) => {
-			const { getBlock, getBlockIndex, getBlockRootClientId } =
+			const { getBlocks, getBlockIndex, getBlockRootClientId } =
 				select( blockEditorStore );
 
 			return {
 				blockIndex: getBlockIndex( clientId ),
-				innerBlocksLength: getBlock( clientId )?.innerBlocks?.length,
+				innerBlocksLength: getBlocks( clientId )?.length,
 				rootClientId: getBlockRootClientId( clientId ),
 			};
 		},
@@ -49,7 +49,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 
 	const hookedBlockClientIds = useSelect(
 		( select ) => {
-			const { getBlock, getGlobalBlockCount } =
+			const { getBlocks, getGlobalBlockCount } =
 				select( blockEditorStore );
 
 			const _hookedBlockClientIds = hookedBlocksForCurrentBlock.reduce(
@@ -69,7 +69,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 							// Any of the current block's siblings (with the right block type) qualifies
 							// as a hooked block (inserted `before` or `after` the current one), as the block
 							// might've been automatically inserted and then moved around a bit by the user.
-							candidates = getBlock( rootClientId )?.innerBlocks;
+							candidates = getBlocks( rootClientId );
 							break;
 
 						case 'first_child':
@@ -77,7 +77,7 @@ function BlockHooksControlPure( { name, clientId } ) {
 							// Any of the current block's child blocks (with the right block type) qualifies
 							// as a hooked first or last child block, as the block might've been automatically
 							// inserted and then moved around a bit by the user.
-							candidates = getBlock( clientId ).innerBlocks;
+							candidates = getBlocks( clientId );
 							break;
 					}
 
@@ -161,6 +161,11 @@ function BlockHooksControlPure( { name, clientId } ) {
 				title={ __( 'Plugins' ) }
 				initialOpen={ true }
 			>
+				<p className="block-editor-hooks__block-hooks-helptext">
+					{ __(
+						'Manage the inclusion of blocks added automatically by plugins.'
+					) }
+				</p>
 				{ Object.keys( groupedHookedBlocks ).map( ( vendor ) => {
 					return (
 						<Fragment key={ vendor }>

package/src/hooks/block-hooks.scss

@@ -13,4 +13,10 @@
 	.components-toggle-control .components-h-stack .components-h-stack {
 		flex-direction: row;
 	}
+
+	.block-editor-hooks__block-hooks-helptext {
+		color: $gray-700;
+		font-size: $helptext-font-size;
+		margin-bottom: $grid-unit-20;
+	}
 }