@wordpress/block-editor 15.8.1-next.16d95556a.0 → 15.8.1-next.dc3f6d3c1.0

package/src/components/block-toolbar/block-toolbar-icon.js

@@ -4,7 +4,7 @@
 import { ToolbarButton } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
-import { copy } from '@wordpress/icons';
+import { copy, symbol } from '@wordpress/icons';
 import { getBlockType, store as blocksStore } from '@wordpress/blocks';
 import { store as preferencesStore } from '@wordpress/preferences';
 
@@ -24,7 +24,6 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getBlockName,
 		getBlockAttributes,
 		getBlockParentsByBlockName,
-		isSectionBlock,
 		canRemoveBlocks,
 		getTemplateLock,
 		getBlockEditingMode,
@@ -40,8 +39,8 @@ function getBlockIconVariant( { select, clientIds } ) {
 	const blockName = isSingleBlock && getBlockName( clientIds[ 0 ] );
 	const hasBlockStyles =
 		isSingleBlock && !! getBlockStyles( blockName )?.length;
-	const isSectionInSelection = clientIds.some( ( id ) =>
-		isSectionBlock( id )
+	const hasPatternNameInSelection = clientIds.some(
+		( id ) => !! getBlockAttributes( id )?.metadata?.patternName
 	);
 	const hasPatternOverrides = clientIds.every( ( clientId ) =>
 		hasPatternOverridesDefaultBinding(
@@ -59,7 +58,7 @@ function getBlockIconVariant( { select, clientIds } ) {
 		getBlockEditingMode( clientIds[ 0 ] ) === 'default';
 	const _hideTransformsForSections =
 		window?.__experimentalContentOnlyPatternInsertion &&
-		isSectionInSelection;
+		hasPatternNameInSelection;
 	const _showBlockSwitcher =
 		! _hideTransformsForSections &&
 		isDefaultEditingMode &&
@@ -81,19 +80,24 @@ function getBlockIcon( { select, clientIds } ) {
 	const { getBlockName, getBlockAttributes } = unlock(
 		select( blockEditorStore )
 	);
-	const { getActiveBlockVariation } = select( blocksStore );
 
 	const _isSingleBlock = clientIds.length === 1;
 	const firstClientId = clientIds[ 0 ];
+	const blockAttributes = getBlockAttributes( firstClientId );
+	if (
+		_isSingleBlock &&
+		blockAttributes?.metadata?.patternName &&
+		window?.__experimentalContentOnlyPatternInsertion
+	) {
+		return symbol;
+	}
 
 	const blockName = getBlockName( firstClientId );
 	const blockType = getBlockType( blockName );
 
 	if ( _isSingleBlock ) {
-		const match = getActiveBlockVariation(
-			blockName,
-			getBlockAttributes( firstClientId )
-		);
+		const { getActiveBlockVariation } = select( blocksStore );
+		const match = getActiveBlockVariation( blockName, blockAttributes );
 		return match?.icon || blockType?.icon;
 	}
 

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

@@ -147,41 +147,102 @@ function VariationsToggleGroupControl( {
 
 function __experimentalBlockVariationTransforms( { blockClientId } ) {
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
-	const { activeBlockVariation, variations, isContentOnly, isSection } =
-		useSelect(
-			( select ) => {
-				const { getActiveBlockVariation, getBlockVariations } =
-					select( blocksStore );
-
-				const {
-					getBlockName,
-					getBlockAttributes,
-					getBlockEditingMode,
-					isSectionBlock,
-				} = unlock( select( blockEditorStore ) );
-
-				const name = blockClientId && getBlockName( blockClientId );
-
-				const { hasContentRoleAttribute } = unlock(
-					select( blocksStore )
-				);
-				const isContentBlock = hasContentRoleAttribute( name );
-
-				return {
-					activeBlockVariation: getActiveBlockVariation(
-						name,
-						getBlockAttributes( blockClientId ),
-						'transform'
-					),
-					variations: name && getBlockVariations( name, 'transform' ),
-					isContentOnly:
-						getBlockEditingMode( blockClientId ) ===
-							'contentOnly' && ! isContentBlock,
-					isSection: isSectionBlock( blockClientId ),
-				};
-			},
-			[ blockClientId ]
-		);
+	const {
+		activeBlockVariation,
+		unfilteredVariations,
+		blockName,
+		isContentOnly,
+		isSection,
+	} = useSelect(
+		( select ) => {
+			const { getActiveBlockVariation, getBlockVariations } =
+				select( blocksStore );
+
+			const {
+				getBlockName,
+				getBlockAttributes,
+				getBlockEditingMode,
+				isSectionBlock,
+			} = unlock( select( blockEditorStore ) );
+
+			const name = blockClientId && getBlockName( blockClientId );
+
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			const isContentBlock = hasContentRoleAttribute( name );
+
+			return {
+				activeBlockVariation: getActiveBlockVariation(
+					name,
+					getBlockAttributes( blockClientId ),
+					'transform'
+				),
+				unfilteredVariations:
+					name && getBlockVariations( name, 'transform' ),
+				blockName: name,
+				isContentOnly:
+					getBlockEditingMode( blockClientId ) === 'contentOnly' &&
+					! isContentBlock,
+				isSection: isSectionBlock( blockClientId ),
+			};
+		},
+		[ blockClientId ]
+	);
+
+	/*
+	 * Hack for WordPress 6.9
+	 *
+	 * The Stretchy blocks shipped in 6.9 were ultimately
+	 * implemented as block variations of the base types Paragraph
+	 * and Heading. See #73056 for discussion and trade-offs.
+	 *
+	 * The main drawback of this choice is that the Variations API
+	 * doesn't offer enough control over how prominent and how tied
+	 * to the base type a variation should be.
+	 *
+	 * In order to ship these new "blocks" with an acceptable UX,
+	 * we need two hacks until the Variations API is improved:
+	 *
+	 * - Don't show the variations switcher in the block inspector
+	 *   for Paragraph, Heading, Stretchy Paragraph and Stretchy
+	 *   Heading (implemented below). Transformations are still
+	 *   available in the block switcher.
+	 *
+	 * - Move the stretchy variations to the end of the core blocks
+	 *   list in the block inserter (implemented in
+	 *   getInserterItems in #73056).
+	 */
+	const variations = useMemo( () => {
+		if ( blockName === 'core/paragraph' ) {
+			// Always hide options when active variation is stretchy, but
+			// ensure that there are no third-party variations before doing the
+			// same elsewhere.
+			if (
+				activeBlockVariation?.name === 'stretchy-paragraph' ||
+				unfilteredVariations.every( ( v ) =>
+					[ 'paragraph', 'stretchy-paragraph' ].includes( v.name )
+				)
+			) {
+				return [];
+			}
+			// If there are other variations, only hide the stretchy one.
+			return unfilteredVariations.filter(
+				( v ) => v.name !== 'stretchy-paragraph'
+			);
+		} else if ( blockName === 'core/heading' ) {
+			if (
+				activeBlockVariation?.name === 'stretchy-heading' ||
+				unfilteredVariations.every( ( v ) =>
+					[ 'heading', 'stretchy-heading' ].includes( v.name )
+				)
+			) {
+				return [];
+			}
+			return unfilteredVariations.filter(
+				( v ) => v.name !== 'stretchy-heading'
+			);
+		}
+		return unfilteredVariations;
+	}, [ activeBlockVariation?.name, blockName, unfilteredVariations ] );
 
 	const selectedValue = activeBlockVariation?.name;
 

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

@@ -74,6 +74,7 @@ export default function SingleInputControl( {
 	const onChangeUnit = ( next ) => {
 		const newUnits = { ...selectedUnits };
 		if ( corner === 'all' ) {
+			newUnits.flat = next;
 			newUnits.topLeft = next;
 			newUnits.topRight = next;
 			newUnits.bottomLeft = next;

package/src/components/content-only-controls/index.js

@@ -0,0 +1,296 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blocksStore } from '@wordpress/blocks';
+import {
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalHStack as HStack,
+	Icon,
+	Navigator,
+} from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { __ } from '@wordpress/i18n';
+import { arrowLeft, arrowRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+import { store as blockEditorStore } from '../../store';
+import BlockIcon from '../block-icon';
+import useBlockDisplayTitle from '../block-title/use-block-display-title';
+import useBlockDisplayInformation from '../use-block-display-information';
+import { useInspectorPopoverPlacement } from './use-inspector-popover-placement';
+
+// controls
+import PlainText from './plain-text';
+import RichText from './rich-text';
+import Media from './media';
+import Link from './link';
+
+const controls = {
+	PlainText,
+	RichText,
+	Media,
+	Link,
+};
+
+function BlockAttributeToolsPanelItem( {
+	clientId,
+	control,
+	blockType,
+	attributeValues,
+} ) {
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+	const ControlComponent = controls[ control.type ];
+
+	if ( ! ControlComponent ) {
+		return null;
+	}
+
+	return (
+		<ControlComponent
+			clientId={ clientId }
+			control={ control }
+			blockType={ blockType }
+			attributeValues={ attributeValues }
+			updateAttributes={ ( attributes ) =>
+				updateBlockAttributes( clientId, attributes )
+			}
+		/>
+	);
+}
+
+function BlockFields( { clientId } ) {
+	const { attributes, blockType } = useSelect(
+		( select ) => {
+			const { getBlockAttributes, getBlockName } =
+				select( blockEditorStore );
+			const { getBlockType } = select( blocksStore );
+			const blockName = getBlockName( clientId );
+			return {
+				attributes: getBlockAttributes( clientId ),
+				blockType: getBlockType( blockName ),
+			};
+		},
+		[ clientId ]
+	);
+
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const blockInformation = useBlockDisplayInformation( clientId );
+	const popoverPlacementProps = useInspectorPopoverPlacement();
+
+	if ( ! blockType?.fields?.length ) {
+		// TODO - we might still want to show a placeholder for blocks with no fields.
+		// for example, a way to select the block.
+		return null;
+	}
+
+	return (
+		<ToolsPanel
+			label={
+				<HStack spacing={ 1 }>
+					<BlockIcon icon={ blockInformation?.icon } />
+					<div>{ blockTitle }</div>
+				</HStack>
+			}
+			panelId={ clientId }
+			dropdownMenuProps={ popoverPlacementProps }
+		>
+			{ blockType?.fields?.map( ( field, index ) => (
+				<BlockAttributeToolsPanelItem
+					key={ `${ clientId }/${ index }` }
+					clientId={ clientId }
+					control={ field }
+					blockType={ blockType }
+					attributeValues={ attributes }
+				/>
+			) ) }
+		</ToolsPanel>
+	);
+}
+
+function DrillDownButton( { clientId } ) {
+	const blockTitle = useBlockDisplayTitle( {
+		clientId,
+		context: 'list-view',
+	} );
+	const blockInformation = useBlockDisplayInformation( clientId );
+	return (
+		<div className="block-editor-content-only-controls__button-panel">
+			<Navigator.Button
+				path={ `/${ clientId }` }
+				className="block-editor-content-only-controls__drill-down-button"
+			>
+				<HStack expanded justify="space-between">
+					<HStack justify="flex-start" spacing={ 1 }>
+						<BlockIcon icon={ blockInformation?.icon } />
+						<div>{ blockTitle }</div>
+					</HStack>
+					<Icon icon={ arrowRight } />
+				</HStack>
+			</Navigator.Button>
+		</div>
+	);
+}
+
+function ContentOnlyControlsScreen( {
+	rootClientId,
+	contentClientIds,
+	parentClientIds,
+	isNested,
+} ) {
+	const isRootContentBlock = useSelect(
+		( select ) => {
+			const { getBlockName } = select( blockEditorStore );
+			const blockName = getBlockName( rootClientId );
+			const { hasContentRoleAttribute } = unlock( select( blocksStore ) );
+			return hasContentRoleAttribute( blockName );
+		},
+		[ rootClientId ]
+	);
+
+	if ( ! isRootContentBlock && ! contentClientIds.length ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ isNested && (
+				<div className="block-editor-content-only-controls__button-panel">
+					<Navigator.BackButton className="block-editor-content-only-controls__back-button">
+						<HStack expanded spacing={ 1 } justify="flex-start">
+							<Icon icon={ arrowLeft } />
+							<div>{ __( 'Back' ) }</div>
+						</HStack>
+					</Navigator.BackButton>
+				</div>
+			) }
+			{ isRootContentBlock && <BlockFields clientId={ rootClientId } /> }
+			{ contentClientIds.map( ( clientId ) => {
+				if ( parentClientIds?.[ clientId ] ) {
+					return (
+						<DrillDownButton
+							key={ clientId }
+							clientId={ clientId }
+						/>
+					);
+				}
+
+				return <BlockFields key={ clientId } clientId={ clientId } />;
+			} ) }
+		</>
+	);
+}
+
+export default function ContentOnlyControls( { rootClientId } ) {
+	const { updatedRootClientId, nestedContentClientIds, contentClientIds } =
+		useSelect(
+			( select ) => {
+				const { getClientIdsOfDescendants, getBlockEditingMode } =
+					select( blockEditorStore );
+
+				// _nestedContentClientIds is for content blocks within 'drilldowns'.
+				// It's an object where the key is the parent clientId, and the element is
+				// an array of child clientIds whose controls are shown within the drilldown.
+				const _nestedContentClientIds = {};
+
+				// _contentClientIds is the list of contentClientIds for blocks being
+				// shown at the root level. Includes parent blocks that might have a drilldown,
+				// but not the children of those blocks.
+				const _contentClientIds = [];
+
+				// An array of all nested client ids. Used for ensuring blocks within drilldowns
+				// don't appear at the root level.
+				let allNestedClientIds = [];
+
+				// A flattened list of all content clientIds to arrange into the
+				// groups above.
+				const allContentClientIds = getClientIdsOfDescendants(
+					rootClientId
+				).filter(
+					( clientId ) =>
+						getBlockEditingMode( clientId ) === 'contentOnly'
+				);
+
+				for ( const clientId of allContentClientIds ) {
+					const childClientIds = getClientIdsOfDescendants(
+						clientId
+					).filter(
+						( childClientId ) =>
+							getBlockEditingMode( childClientId ) ===
+							'contentOnly'
+					);
+
+					// If there's more than one child block, use a drilldown.
+					if (
+						childClientIds.length > 1 &&
+						! allNestedClientIds.includes( clientId )
+					) {
+						_nestedContentClientIds[ clientId ] = childClientIds;
+						allNestedClientIds = [
+							allNestedClientIds,
+							...childClientIds,
+						];
+					}
+
+					if ( ! allNestedClientIds.includes( clientId ) ) {
+						_contentClientIds.push( clientId );
+					}
+				}
+
+				// Avoid showing only one drilldown block at the root.
+				if (
+					_contentClientIds.length === 1 &&
+					Object.keys( _nestedContentClientIds ).length === 1
+				) {
+					const onlyParentClientId = Object.keys(
+						_nestedContentClientIds
+					)[ 0 ];
+					return {
+						updatedRootClientId: onlyParentClientId,
+						contentClientIds:
+							_nestedContentClientIds[ onlyParentClientId ],
+						nestedContentClientIds: {},
+					};
+				}
+
+				return {
+					nestedContentClientIds: _nestedContentClientIds,
+					contentClientIds: _contentClientIds,
+				};
+			},
+			[ rootClientId ]
+		);
+
+	return (
+		<Navigator initialPath="/">
+			<Navigator.Screen
+				path="/"
+				className="block-editor-content-only-controls__screen"
+			>
+				<ContentOnlyControlsScreen
+					rootClientId={ updatedRootClientId ?? rootClientId }
+					contentClientIds={ contentClientIds }
+					parentClientIds={ nestedContentClientIds }
+				/>
+			</Navigator.Screen>
+			{ Object.keys( nestedContentClientIds ).map( ( clientId ) => (
+				<Navigator.Screen
+					key={ clientId }
+					path={ `/${ clientId }` }
+					className="block-editor-content-only-controls__screen"
+				>
+					<ContentOnlyControlsScreen
+						isNested
+						rootClientId={ clientId }
+						contentClientIds={ nestedContentClientIds[ clientId ] }
+					/>
+				</Navigator.Screen>
+			) ) }
+		</Navigator>
+	);
+}

package/src/components/content-only-controls/link/index.js

@@ -0,0 +1,195 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalGrid as Grid,
+	Popover,
+} from '@wordpress/components';
+import { useMemo, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { link } from '@wordpress/icons';
+import { prependHTTP } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import LinkControl from '../../link-control';
+import { useInspectorPopoverPlacement } from '../use-inspector-popover-placement';
+
+export const NEW_TAB_REL = 'noreferrer noopener';
+export const NEW_TAB_TARGET = '_blank';
+export const NOFOLLOW_REL = 'nofollow';
+
+/**
+ * Updates the link attributes.
+ *
+ * @param {Object}  attributes               The current block attributes.
+ * @param {string}  attributes.rel           The current link rel attribute.
+ * @param {string}  attributes.url           The current link url.
+ * @param {boolean} attributes.opensInNewTab Whether the link should open in a new window.
+ * @param {boolean} attributes.nofollow      Whether the link should be marked as nofollow.
+ */
+export function getUpdatedLinkAttributes( {
+	rel = '',
+	url = '',
+	opensInNewTab,
+	nofollow,
+} ) {
+	let newLinkTarget;
+	// Since `rel` is editable attribute, we need to check for existing values and proceed accordingly.
+	let updatedRel = rel;
+
+	if ( opensInNewTab ) {
+		newLinkTarget = NEW_TAB_TARGET;
+		updatedRel = updatedRel?.includes( NEW_TAB_REL )
+			? updatedRel
+			: updatedRel + ` ${ NEW_TAB_REL }`;
+	} else {
+		const relRegex = new RegExp( `\\b${ NEW_TAB_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	if ( nofollow ) {
+		updatedRel = updatedRel?.includes( NOFOLLOW_REL )
+			? updatedRel
+			: ( updatedRel + ` ${ NOFOLLOW_REL }` ).trim();
+	} else {
+		const relRegex = new RegExp( `\\b${ NOFOLLOW_REL }\\s*`, 'g' );
+		updatedRel = updatedRel?.replace( relRegex, '' ).trim();
+	}
+
+	return {
+		url: prependHTTP( url ),
+		linkTarget: newLinkTarget,
+		rel: updatedRel || undefined,
+	};
+}
+
+export default function Link( {
+	clientId,
+	control,
+	blockType,
+	attributeValues,
+	updateAttributes,
+} ) {
+	const [ isLinkControlOpen, setIsLinkControlOpen ] = useState( false );
+	const { popoverProps } = useInspectorPopoverPlacement( {
+		isControl: true,
+	} );
+	const hrefKey = control.mapping.href;
+	const relKey = control.mapping.rel;
+	const targetKey = control.mapping.target;
+	const destinationKey = control.mapping.destination;
+
+	const href = attributeValues[ hrefKey ];
+	const rel = attributeValues[ relKey ];
+	const target = attributeValues[ targetKey ];
+	const destination = attributeValues[ destinationKey ];
+
+	const hrefDefaultValue =
+		blockType.attributes[ href ]?.defaultValue ?? undefined;
+	const relDefaultValue =
+		blockType.attributes[ rel ]?.defaultValue ?? undefined;
+	const targetDefaultValue =
+		blockType.attributes[ target ]?.defaultValue ?? undefined;
+	const destinationDefaultValue =
+		blockType.attributes[ destination ]?.defaultValue ?? undefined;
+
+	const opensInNewTab = target === NEW_TAB_TARGET;
+	const nofollow = rel === NOFOLLOW_REL;
+
+	// Memoize link value to avoid overriding the LinkControl's internal state.
+	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/51256.
+	const linkValue = useMemo(
+		() => ( { url: href, opensInNewTab, nofollow } ),
+		[ href, opensInNewTab, nofollow ]
+	);
+
+	return (
+		<ToolsPanelItem
+			panelId={ clientId }
+			label={ control.label }
+			hasValue={ () => !! href }
+			onDeselect={ () => {
+				updateAttributes( {
+					[ hrefKey ]: hrefDefaultValue,
+					[ relKey ]: relDefaultValue,
+					[ targetKey ]: targetDefaultValue,
+					[ destinationKey ]: destinationDefaultValue,
+				} );
+			} }
+			isShownByDefault={ control.shownByDefault }
+		>
+			<Button
+				__next40pxDefaultSize
+				className="block-editor-content-only-controls__link"
+				onClick={ () => {
+					setIsLinkControlOpen( true );
+				} }
+			>
+				<Grid
+					rowGap={ 0 }
+					columnGap={ 8 }
+					templateColumns="24px 1fr"
+					className="block-editor-content-only-controls__link-row"
+				>
+					{ href && (
+						<>
+							<Icon icon={ link } size={ 24 } />
+							<span className="block-editor-content-only-controls__link-title">
+								{ href }
+							</span>
+						</>
+					) }
+					{ ! href && (
+						<>
+							<Icon
+								icon={ link }
+								size={ 24 }
+								style={ { opacity: 0.3 } }
+							/>
+							<span className="block-editor-content-only-controls__link-title">
+								{ __( 'Link' ) }
+							</span>
+						</>
+					) }
+				</Grid>
+			</Button>
+			{ isLinkControlOpen && (
+				<Popover
+					onClose={ () => {
+						setIsLinkControlOpen( false );
+					} }
+					{ ...( popoverProps ?? {} ) }
+				>
+					<LinkControl
+						value={ linkValue }
+						onChange={ ( newValues ) => {
+							const updatedAttrs = getUpdatedLinkAttributes( {
+								rel,
+								...newValues,
+							} );
+
+							updateAttributes( {
+								[ hrefKey ]: updatedAttrs.url,
+								[ relKey ]: updatedAttrs.rel,
+								[ targetKey ]: updatedAttrs.linkTarget,
+							} );
+						} }
+						onRemove={ () => {
+							updateAttributes( {
+								[ hrefKey ]: hrefDefaultValue,
+								[ relKey ]: relDefaultValue,
+								[ targetKey ]: targetDefaultValue,
+								[ destinationKey ]: destinationDefaultValue,
+							} );
+						} }
+					/>
+				</Popover>
+			) }
+		</ToolsPanelItem>
+	);
+}