Zoomed Out Mode experiments

.github/workflows/build-plugin-zip.yml

@@ -1,14 +1,9 @@
 name: Build Gutenberg Plugin Zip
 
 on:
-    pull_request:
+    pull_request_target:
+        types: [opened]
     push:
-        branches: [trunk]
-    workflow_dispatch:
-        inputs:
-            version:
-                description: 'rc or stable?'
-                required: true
 
 # Cancels all previous workflow runs for pull requests that have not completed.
 concurrency:

packages/block-editor/src/components/block-preview/style.scss

@@ -7,7 +7,6 @@
 	// The preview component measures the pixel width of this item, so as to calculate the scale factor.
 	// But without this baseline width, it collapses to 0.
 	width: 100%;
-	height: 100%;
 
 	overflow: hidden;
 

packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js

@@ -96,6 +96,7 @@ export function BlockSettingsDropdown( {
 	const firstBlockClientId = blockClientIds[ 0 ];
 	const {
 		firstParentClientId,
+		isZoomOutMode,
 		onlyBlock,
 		parentBlockType,
 		previousBlockClientId,
@@ -109,6 +110,7 @@ export function BlockSettingsDropdown( {
 				getPreviousBlockClientId,
 				getSelectedBlockClientIds,
 				getBlockAttributes,
+				__unstableGetEditorMode,
 			} = select( blockEditorStore );
 
 			const { getActiveBlockVariation } = select( blocksStore );
@@ -120,6 +122,7 @@ export function BlockSettingsDropdown( {
 
 			return {
 				firstParentClientId: _firstParentClientId,
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				onlyBlock: 1 === getBlockCount( _firstParentClientId ),
 				parentBlockType:
 					_firstParentClientId &&
@@ -291,7 +294,8 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-after',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertDefaultBlock &&
+								! isZoomOutMode
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -301,7 +305,8 @@ export function BlockSettingsDropdown( {
 									'core/block-editor/insert-before',
 									event
 								) &&
-								canInsertDefaultBlock
+								canInsertDefaultBlock &&
+								! isZoomOutMode
 							) {
 								event.preventDefault();
 								setOpenedBlockSettingsMenu( undefined );
@@ -347,7 +352,7 @@ export function BlockSettingsDropdown( {
 										{ __( 'Duplicate' ) }
 									</MenuItem>
 								) }
-								{ canInsertDefaultBlock && (
+								{ canInsertDefaultBlock && ! isZoomOutMode && (
 									<>
 										<MenuItem
 											onClick={ pipe(
@@ -382,25 +387,31 @@ export function BlockSettingsDropdown( {
 									</MenuItem>
 								</MenuGroup>
 							) }
-							<BlockSettingsMenuControls.Slot
-								fillProps={ {
-									onClose,
-									canMove,
-									onMoveTo,
-									onlyBlock,
-									count,
-									firstBlockClientId,
-								} }
-								clientIds={ clientIds }
-								__unstableDisplayLocation={
-									__unstableDisplayLocation
-								}
-							/>
-							{ typeof children === 'function'
-								? children( { onClose } )
-								: Children.map( ( child ) =>
-										cloneElement( child, { onClose } )
-								  ) }
+							{ ! isZoomOutMode && (
+								<>
+									<BlockSettingsMenuControls.Slot
+										fillProps={ {
+											onClose,
+											canMove,
+											onMoveTo,
+											onlyBlock,
+											count,
+											firstBlockClientId,
+										} }
+										clientIds={ clientIds }
+										__unstableDisplayLocation={
+											__unstableDisplayLocation
+										}
+									/>
+									{ typeof children === 'function'
+										? children( { onClose } )
+										: Children.map( ( child ) =>
+												cloneElement( child, {
+													onClose,
+												} )
+										  ) }
+								</>
+							) }
 							{ canRemove && (
 								<MenuGroup>
 									<MenuItem

packages/block-editor/src/components/block-switcher/index.js

@@ -38,6 +38,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 		canRemove,
 		hasBlockStyles,
 		icon,
+		isZoomOutMode,
 		patterns,
 	} = useSelect(
 		( select ) => {
@@ -48,6 +49,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				canRemoveBlocks,
 			} = select( blockEditorStore );
 			const { getBlockStyles, getBlockType } = select( blocksStore );
+			const { __unstableGetEditorMode } = select( blockEditorStore );
 			const rootClientId = getBlockRootClientId(
 				Array.isArray( clientIds ) ? clientIds[ 0 ] : clientIds
 			);
@@ -75,6 +77,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 				canRemove: canRemoveBlocks( clientIds, rootClientId ),
 				hasBlockStyles: !! styles?.length,
 				icon: _icon,
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				patterns: __experimentalGetPatternTransformItems(
 					blocks,
 					rootClientId
@@ -97,6 +100,8 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const isSingleBlock = blocks.length === 1;
 	const isReusable = isSingleBlock && isReusableBlock( blocks[ 0 ] );
 	const isTemplate = isSingleBlock && isTemplatePart( blocks[ 0 ] );
+	const hasCustomName =
+		isSingleBlock && !! blocks[ 0 ].attributes.metadata?.name;
 
 	function selectForMultipleBlocks( insertedBlocks ) {
 		if ( insertedBlocks.length > 1 ) {
@@ -138,11 +143,12 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 	const hasPossibleBlockVariationTransformations =
 		!! blockVariationTransformations?.length;
 	const hasPatternTransformation = !! patterns?.length && canRemove;
-	if (
+	const hasNoMenu =
 		! hasBlockStyles &&
 		! hasPossibleBlockTransformations &&
-		! hasPossibleBlockVariationTransformations
-	) {
+		! hasPossibleBlockVariationTransformations;
+
+	if ( hasNoMenu || isZoomOutMode ) {
 		return (
 			<ToolbarGroup>
 				<ToolbarButton
@@ -152,7 +158,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 					icon={
 						<>
 							<BlockIcon icon={ icon } showColors />
-							{ ( isReusable || isTemplate ) && (
+							{ ( isReusable || isTemplate || hasCustomName ) && (
 								<span className="block-editor-block-switcher__toggle-text">
 									{ blockTitle }
 								</span>
@@ -205,7 +211,9 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => {
 									className="block-editor-block-switcher__toggle"
 									showColors
 								/>
-								{ ( isReusable || isTemplate ) && (
+								{ ( isReusable ||
+									isTemplate ||
+									hasCustomName ) && (
 									<span className="block-editor-block-switcher__toggle-text">
 										{ blockTitle }
 									</span>

packages/block-editor/src/components/block-title/use-block-display-title.js

@@ -72,12 +72,14 @@ export default function useBlockDisplayTitle( {
 		? getBlockLabel( blockType, attributes, context )
 		: null;
 
+	const blockCustomName = attributes.metadata?.name;
 	const label = reusableBlockTitle || blockLabel;
 	// Label will fallback to the title if no label is defined for the current
 	// label context. If the label is defined we prioritize it over a
 	// possible block variation title match.
 	const blockTitle =
-		label && label !== blockType.title ? label : blockInformation.title;
+		blockCustomName ||
+		( label && label !== blockType.title ? label : blockInformation.title );
 
 	if (
 		maximumLength &&

packages/block-editor/src/components/block-tools/block-selection-button.js

@@ -290,6 +290,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) {
 						<BlockTitle
 							clientId={ clientId }
 							maximumLength={ 35 }
+							context="list-view"
 						/>
 					</Button>
 				</FlexItem>

packages/block-editor/src/components/block-tools/index.js

@@ -211,11 +211,6 @@ export default function BlockTools( {
 					name="__unstable-block-tools-after"
 					ref={ blockToolbarAfterRef }
 				/>
-				{ isZoomOutMode && (
-					<ZoomOutModeInserters
-						__unstableContentRef={ __unstableContentRef }
-					/>
-				) }
 			</InsertionPointOpenRef.Provider>
 		</div>
 	);

packages/block-editor/src/components/block-tools/selected-block-tools.js

@@ -100,7 +100,7 @@ export default function SelectedBlockTools( {
 				resize={ false }
 				{ ...popoverProps }
 			>
-				{ shouldShowContextualToolbar && (
+				{ shouldShowContextualToolbar ? (
 					<BlockContextualToolbar
 						// If the toolbar is being shown because of being forced
 						// it should focus the toolbar right after the mount.
@@ -112,12 +112,13 @@ export default function SelectedBlockTools( {
 							initialToolbarItemIndexRef.current = index;
 						} }
 					/>
-				) }
-				{ shouldShowBreadcrumb && (
-					<BlockSelectionButton
-						clientId={ clientId }
-						rootClientId={ rootClientId }
-					/>
+				) : (
+					shouldShowBreadcrumb && (
+						<BlockSelectionButton
+							clientId={ clientId }
+							rootClientId={ rootClientId }
+						/>
+					)
 				) }
 			</BlockPopover>
 		);

packages/block-editor/src/components/inserter/index.js

@@ -46,7 +46,7 @@ const defaultRenderToggle = ( {
 			blockTitle
 		);
 	} else if ( ! label && prioritizePatterns ) {
-		label = __( 'Add pattern' );
+		label = __( 'Add section' );
 	} else if ( ! label ) {
 		label = _x( 'Add block', 'Generic label for block inserter button' );
 	}

packages/block-editor/src/components/inserter/library.js

@@ -21,8 +21,11 @@ function InserterLibrary(
 		showMostUsedBlocks = false,
 		__experimentalInsertionIndex,
 		__experimentalFilterValue,
+		__experimentalOnPatternCategorySelection,
+		__experimentalShouldZoomPatterns = false,
 		onSelect = noop,
 		shouldFocusBlock = false,
+		onSelectTab,
 	},
 	ref
 ) {
@@ -46,13 +49,20 @@ function InserterLibrary(
 	return (
 		<InserterMenu
 			onSelect={ onSelect }
+			onSelectTab={ onSelectTab }
 			rootClientId={ destinationRootClientId }
 			clientId={ clientId }
 			isAppender={ isAppender }
 			showInserterHelpPanel={ showInserterHelpPanel }
 			showMostUsedBlocks={ showMostUsedBlocks }
 			__experimentalInsertionIndex={ __experimentalInsertionIndex }
 			__experimentalFilterValue={ __experimentalFilterValue }
+			__experimentalOnPatternCategorySelection={
+				__experimentalOnPatternCategorySelection
+			}
+			__experimentalShouldZoomPatterns={
+				__experimentalShouldZoomPatterns
+			}
 			shouldFocusBlock={ shouldFocusBlock }
 			prioritizePatterns={ prioritizePatterns }
 			ref={ ref }

packages/block-editor/src/components/inserter/menu.js

@@ -45,6 +45,9 @@ function InserterMenu(
 		__experimentalFilterValue = '',
 		shouldFocusBlock = true,
 		prioritizePatterns,
+		__experimentalOnPatternCategorySelection,
+		__experimentalShouldZoomPatterns = false,
+		onSelectTab,
 	},
 	ref
 ) {
@@ -123,8 +126,9 @@ function InserterMenu(
 		( patternCategory, filter ) => {
 			setSelectedPatternCategory( patternCategory );
 			setPatternFilter( filter );
+			__experimentalOnPatternCategorySelection?.( patternCategory );
 		},
-		[ setSelectedPatternCategory ]
+		[ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ]
 	);
 
 	const blocksTab = useMemo(
@@ -209,6 +213,8 @@ function InserterMenu(
 		focusSearch: () => {
 			searchRef.current.focus();
 		},
+		getSelectedPatternCategory: () => selectedPatternCategory,
+		selectPatternCategory: onClickPatternCategory,
 	} ) );
 
 	const showPatternPanel =
@@ -228,11 +234,17 @@ function InserterMenu(
 		if ( value !== 'patterns' ) {
 			setSelectedPatternCategory( null );
 		}
+
 		setSelectedTab( value );
+		onSelectTab?.( value );
 	};
 
+	const className = classnames( 'block-editor-inserter__menu', {
+		'has-inline-patterns': __experimentalShouldZoomPatterns,
+	} );
+
 	return (
-		<div className="block-editor-inserter__menu">
+		<div className={ className }>
 			<div
 				className={ classnames( 'block-editor-inserter__main-area', {
 					'show-as-tabs': showAsTabs,

packages/block-editor/src/components/inserter/search-results.js

@@ -53,14 +53,17 @@ function InserterSearchResults( {
 } ) {
 	const debouncedSpeak = useDebounce( speak, 500 );
 
-	const { prioritizedBlocks } = useSelect(
+	const { prioritizedBlocks, isZoomOutMode } = useSelect(
 		( select ) => {
 			const blockListSettings =
 				select( blockEditorStore ).getBlockListSettings( rootClientId );
+			const editorMode =
+				select( blockEditorStore ).__unstableGetEditorMode();
 
 			return {
 				prioritizedBlocks:
 					blockListSettings?.prioritizedInserterBlocks || EMPTY_ARRAY,
+				isZoomOutMode: editorMode === 'zoom-out',
 			};
 		},
 		[ rootClientId ]
@@ -199,6 +202,14 @@ function InserterSearchResults( {
 		</InserterPanel>
 	);
 
+	if ( isZoomOutMode ) {
+		return (
+			<InserterListbox>
+				{ patternsUI || <InserterNoResults /> }
+			</InserterListbox>
+		);
+	}
+
 	return (
 		<InserterListbox>
 			{ ! showBlockDirectory && ! hasItems && <InserterNoResults /> }