@wordpress/block-editor 15.8.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-toolbar/test/__snapshots__/block-toolbar-menu.native.js.snap

@@ -68,10 +68,12 @@ exports[`Block Actions Menu block options duplicates a block 1`] = `
 <!-- /wp:heading -->"
 `;
 
-exports[`Block Actions Menu block options transforms a Paragraph block into a Pullquote block 1`] = `
-"<!-- wp:pullquote -->
-<figure class="wp-block-pullquote"><blockquote><p>Hello!</p></blockquote></figure>
-<!-- /wp:pullquote -->
+exports[`Block Actions Menu block options transforms a Paragraph block into a Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>Hello!</p>
+<!-- /wp:paragraph --></blockquote>
+<!-- /wp:quote -->
 
 <!-- wp:spacer -->
 <div style="height:100px" aria-hidden="true" class="wp-block-spacer"></div>

package/src/components/block-toolbar/test/block-toolbar-menu.native.js

@@ -357,7 +357,7 @@ describe( 'Block Actions Menu', () => {
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
 
-		it( 'transforms a Paragraph block into a Pullquote block', async () => {
+		it( 'transforms a Paragraph block into a Quote block', async () => {
 			const screen = await initializeEditor();
 			const { getByLabelText, getByRole } = screen;
 
@@ -397,7 +397,7 @@ describe( 'Block Actions Menu', () => {
 			expect( headerTitle ).toBeVisible();
 
 			// Tap on the Transform block button
-			fireEvent.press( getByLabelText( /Pullquote/ ) );
+			fireEvent.press( getByLabelText( /Quote/ ) );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );

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>
+	);
+}