From aa1ae1bb40519d3bb039ab2f3f59723c420251b2 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 6 Dec 2023 11:04:28 +0800 Subject: [PATCH 01/16] Fix errant scrollbar when zoomed out mode is activated (#56771) --- .../edit-site/src/components/block-editor/editor-canvas.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js index 235eaf6617aa8f..8dfcccc4688c1e 100644 --- a/packages/edit-site/src/components/block-editor/editor-canvas.js +++ b/packages/edit-site/src/components/block-editor/editor-canvas.js @@ -102,7 +102,11 @@ function EditorCanvas( { canvasMode === 'view' ? 'cursor: pointer; min-height: 100vh;' : '' - }}}` + } ${ + // In zoomed out mode, hide the normal canvas scrollbar, + // as this results in a double-scrollbar + isZoomOutMode ? 'overflow: hidden;' : '' + }}` } { children } From bf2f4410c8d15f92aa3b7e6f8d23c67be9c5c9e9 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 6 Dec 2023 15:35:46 +1200 Subject: [PATCH 02/16] Enter zoom-out mode when selecting patterns in the inserter (#56772) --- .../block-editor/src/components/inserter/menu.js | 12 +++++++++++- packages/edit-site/src/components/editor/index.js | 13 +++++++++++++ .../secondary-sidebar/inserter-sidebar.js | 8 ++++++++ 3 files changed, 32 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index a6d752848538e7..0792355ec28a72 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -16,7 +16,7 @@ import { } from '@wordpress/element'; import { VisuallyHidden, SearchControl, Popover } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { useDebouncedInput } from '@wordpress/compose'; /** @@ -57,6 +57,8 @@ function InserterMenu( const [ selectedMediaCategory, setSelectedMediaCategory ] = useState( null ); const [ selectedTab, setSelectedTab ] = useState( null ); + const { __unstableGetEditorMode } = useSelect( blockEditorStore ); + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const [ destinationRootClientId, onInsertBlocks, onToggleInsertionPoint ] = useInsertionPoint( { @@ -228,6 +230,14 @@ function InserterMenu( if ( value !== 'patterns' ) { setSelectedPatternCategory( null ); } + + // Enter the zoom-out mode when selecting the patterns tab and exit otherwise. + if ( value === 'patterns' ) { + __unstableSetEditorMode( 'zoom-out' ); + } else if ( __unstableGetEditorMode() === 'zoom-out' ) { + __unstableSetEditorMode( 'edit' ); + } + setSelectedTab( value ); }; diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 1d3fca36f5f4c0..270c45cc6c1884 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -150,6 +150,10 @@ export default function Editor( { listViewToggleElement, isLoading } ) { }; }, [] ); const { setRenderingMode } = useDispatch( editorStore ); + const { __unstableGetEditorMode: getBlockEditorMode } = + useSelect( blockEditorStore ); + const { __unstableSetEditorMode: setBlockEditorMode } = + useDispatch( blockEditorStore ); const isViewMode = canvasMode === 'view'; const isEditMode = canvasMode === 'edit'; @@ -202,6 +206,15 @@ export default function Editor( { listViewToggleElement, isLoading } ) { } }, [ canvasMode, postWithTemplate, setRenderingMode ] ); + useEffect( + function ExitZoomOutModeWhenInserterClosed() { + if ( ! shouldShowInserter && getBlockEditorMode() === 'zoom-out' ) { + setBlockEditorMode( 'edit' ); + } + }, + [ getBlockEditorMode, setBlockEditorMode, shouldShowInserter ] + ); + return ( <> { ! isReady ? : null } diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js index 5567bcc3821195..1dd346c7272399 100644 --- a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js @@ -29,6 +29,14 @@ export default function InserterSidebar() { const [ inserterDialogRef, inserterDialogProps ] = useDialog( { onClose: () => setIsInserterOpened( false ), focusOnMount: null, + // Don't close the inserter on focus outside. + // This is a temporary hack as we figure out the expected interactions + // in the zoom-out mode. + __unstableOnClose: ( eventName ) => { + if ( eventName === 'focus-outside' ) { + // Do nothing. + } + }, } ); const libraryRef = useRef(); From b8534bcc8e077020bcc257a2908e689edb68b8c8 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Wed, 6 Dec 2023 15:36:12 +1200 Subject: [PATCH 03/16] Prevent overlapping patterns menu in Site Editor (#56773) --- .../block-editor/src/components/inserter/library.js | 8 ++++++++ packages/block-editor/src/components/inserter/menu.js | 11 +++++++++-- .../block-editor/src/components/inserter/style.scss | 8 ++++++++ .../components/secondary-sidebar/inserter-sidebar.js | 7 ++++++- 4 files changed, 31 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js index 3a814638c2f48e..9c601214c9b8dd 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -21,6 +21,8 @@ function InserterLibrary( showMostUsedBlocks = false, __experimentalInsertionIndex, __experimentalFilterValue, + __experimentalOnPatternCategorySelection, + __experimentalShouldZoomPatterns = false, onSelect = noop, shouldFocusBlock = false, }, @@ -53,6 +55,12 @@ function InserterLibrary( showMostUsedBlocks={ showMostUsedBlocks } __experimentalInsertionIndex={ __experimentalInsertionIndex } __experimentalFilterValue={ __experimentalFilterValue } + __experimentalOnPatternCategorySelection={ + __experimentalOnPatternCategorySelection + } + __experimentalShouldZoomPatterns={ + __experimentalShouldZoomPatterns + } shouldFocusBlock={ shouldFocusBlock } prioritizePatterns={ prioritizePatterns } ref={ ref } diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index 0792355ec28a72..1bfbc3d6319064 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -45,6 +45,8 @@ function InserterMenu( __experimentalFilterValue = '', shouldFocusBlock = true, prioritizePatterns, + __experimentalOnPatternCategorySelection, + __experimentalShouldZoomPatterns = false, }, ref ) { @@ -125,8 +127,9 @@ function InserterMenu( ( patternCategory, filter ) => { setSelectedPatternCategory( patternCategory ); setPatternFilter( filter ); + __experimentalOnPatternCategorySelection?.(); }, - [ setSelectedPatternCategory ] + [ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ] ); const blocksTab = useMemo( @@ -241,8 +244,12 @@ function InserterMenu( setSelectedTab( value ); }; + const className = classnames( 'block-editor-inserter__menu', { + 'has-inline-patterns': __experimentalShouldZoomPatterns, + } ); + return ( -
+
select( editSiteStore ).__experimentalGetInsertionPoint(), [] @@ -66,6 +67,10 @@ export default function InserterSidebar() { insertionPoint.insertionIndex } __experimentalFilterValue={ insertionPoint.filterValue } + __experimentalOnPatternCategorySelection={ + closeGeneralSidebar + } + __experimentalShouldZoomPatterns ref={ libraryRef } />
From ddb378f11eb3473f7481eb7c2e57bec65b6975d8 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Wed, 6 Dec 2023 16:36:44 +1300 Subject: [PATCH 04/16] Remove button in toolbar (#56769) --- .../header-edit-mode/document-tools/index.js | 34 ++----------------- 1 file changed, 3 insertions(+), 31 deletions(-) diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js index f0231e1e621169..dd371f244b85af 100644 --- a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js +++ b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js @@ -6,12 +6,11 @@ import { useViewportMatch } from '@wordpress/compose'; import { ToolSelector, NavigableToolbar, - store as blockEditorStore, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { useSelect, useDispatch } from '@wordpress/data'; import { _x, __ } from '@wordpress/i18n'; -import { listView, plus, chevronUpDown } from '@wordpress/icons'; +import { listView, plus } from '@wordpress/icons'; import { Button, ToolbarItem } from '@wordpress/components'; import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts'; @@ -60,12 +59,8 @@ export default function DocumentTools( { }; }, [] ); - const { - __experimentalSetPreviewDeviceType: setPreviewDeviceType, - setIsInserterOpened, - setIsListViewOpened, - } = useDispatch( editSiteStore ); - const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); + const { setIsInserterOpened, setIsListViewOpened } = + useDispatch( editSiteStore ); const isLargeViewport = useViewportMatch( 'medium' ); @@ -105,8 +100,6 @@ export default function DocumentTools( { ); const shortLabel = ! isInserterOpen ? __( 'Add' ) : __( 'Close' ); - const isZoomedOutViewExperimentEnabled = - window?.__experimentalEnableZoomedOutView && isVisualMode; const isZoomedOutView = blockEditorMode === 'zoom-out'; return ( @@ -178,27 +171,6 @@ export default function DocumentTools( { size="compact" /> ) } - { isZoomedOutViewExperimentEnabled && - ! isDistractionFree && - ! hasFixedToolbar && ( - { - setPreviewDeviceType( 'Desktop' ); - __unstableSetEditorMode( - isZoomedOutView - ? 'edit' - : 'zoom-out' - ); - } } - size="compact" - /> - ) } ) }
From 0bc014c97b1f452dbf0d261bc698a14a167a89c0 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Wed, 6 Dec 2023 16:52:14 +1200 Subject: [PATCH 05/16] Use contextual toolbar in the zoom-out mode (#56808) --- .../block-tools/selected-block-tools.js | 15 ++++++++------- .../utils/use-should-contextual-toolbar-show.js | 3 ++- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/selected-block-tools.js b/packages/block-editor/src/components/block-tools/selected-block-tools.js index dfbd3e9ba3ca3c..ba8d6a35027467 100644 --- a/packages/block-editor/src/components/block-tools/selected-block-tools.js +++ b/packages/block-editor/src/components/block-tools/selected-block-tools.js @@ -100,7 +100,7 @@ export default function SelectedBlockTools( { resize={ false } { ...popoverProps } > - { shouldShowContextualToolbar && ( + { shouldShowContextualToolbar ? ( - ) } - { shouldShowBreadcrumb && ( - + ) : ( + shouldShowBreadcrumb && ( + + ) ) } ); diff --git a/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js b/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js index 1aae7b99cbf140..5446bfdc63838c 100644 --- a/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js +++ b/packages/block-editor/src/utils/use-should-contextual-toolbar-show.js @@ -38,6 +38,7 @@ export function useShouldContextualToolbarShow() { } = unlock( select( blockEditorStore ) ); const isEditMode = __unstableGetEditorMode() === 'edit'; + const isZoomOutMode = __unstableGetEditorMode() === 'zoom-out'; const hasFixedToolbar = getSettings().hasFixedToolbar; const isDistractionFree = getSettings().isDistractionFree; const selectedBlockId = @@ -49,7 +50,7 @@ export function useShouldContextualToolbarShow() { ); const _shouldShowContextualToolbar = - isEditMode && + ( isEditMode || isZoomOutMode ) && ! hasFixedToolbar && ( ! isDistractionFree || isNavigationMode() ) && isLargeViewport && From 6d19c32dbb49d7adab1dc0bd95dbd3c5b8d9eff4 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 8 Dec 2023 14:41:54 +1200 Subject: [PATCH 06/16] Only enter the zoom-out mode when not in the focus mode (#56885) --- .../src/components/inserter/library.js | 2 + .../src/components/inserter/menu.js | 13 ++--- .../secondary-sidebar/inserter-sidebar.js | 51 ++++++++++++++++++- 3 files changed, 54 insertions(+), 12 deletions(-) diff --git a/packages/block-editor/src/components/inserter/library.js b/packages/block-editor/src/components/inserter/library.js index 9c601214c9b8dd..f5792d5d945f8e 100644 --- a/packages/block-editor/src/components/inserter/library.js +++ b/packages/block-editor/src/components/inserter/library.js @@ -25,6 +25,7 @@ function InserterLibrary( __experimentalShouldZoomPatterns = false, onSelect = noop, shouldFocusBlock = false, + onSelectTab, }, ref ) { @@ -48,6 +49,7 @@ function InserterLibrary( return ( select( editSiteStore ).__experimentalGetInsertionPoint(), [] ); + const isFocusMode = useSelect( ( select ) => + FOCUSABLE_ENTITIES.includes( + select( editSiteStore ).getEditedPostType() + ) + ); + const { __unstableSetEditorMode: setEditorMode } = + useDispatch( blockEditorStore ); + const { __unstableGetEditorMode: getEditorMode } = + useSelect( blockEditorStore ); + const hasEditorCanvasContainer = useHasEditorCanvasContainer(); + const location = useLocation(); const isMobile = useViewportMatch( 'medium', '<' ); const TagName = ! isMobile ? VisuallyHidden : 'div'; @@ -45,6 +65,32 @@ export default function InserterSidebar() { libraryRef.current.focusSearch(); }, [] ); + const handleSelectTab = useCallback( + ( tab ) => { + // Only enter the zoom-out mode when it's not in the focus mode. + if ( ! hasEditorCanvasContainer && ! isFocusMode ) { + // Enter the zoom-out mode when selecting the patterns tab and exit otherwise. + if ( tab === 'patterns' ) { + setEditorMode( 'zoom-out' ); + } else if ( getEditorMode() === 'zoom-out' ) { + setEditorMode( 'edit' ); + } + } + }, + [ getEditorMode, setEditorMode, isFocusMode, hasEditorCanvasContainer ] + ); + + const previousLocationRef = useRef( location ); + useEffect( + function closeInserterOnNavigate() { + if ( location !== previousLocationRef.current ) { + previousLocationRef.current = location; + setIsInserterOpened( false ); + } + }, + [ location, setIsInserterOpened ] + ); + return (
From 9d216e91e122a9662588eb3c7366771c93b03953 Mon Sep 17 00:00:00 2001 From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com> Date: Fri, 8 Dec 2023 14:47:45 +1200 Subject: [PATCH 07/16] Prevent block switcher menu while in zoom out mode (#56888) --- .../src/components/block-switcher/index.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 0960dc87eaa499..49c7eb1f9eba01 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/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 @@ -138,11 +141,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 ( Date: Fri, 8 Dec 2023 14:57:07 +1200 Subject: [PATCH 08/16] Restrict available block actions in zoomed out mode (#56886) --- .../block-settings-dropdown.js | 55 +++++++++++-------- 1 file changed, 33 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index 4d43865a7f83a2..c8dbf7dad3f3d0 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/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' ) } ) } - { canInsertDefaultBlock && ( + { canInsertDefaultBlock && ! isZoomOutMode && ( <> ) } - - { typeof children === 'function' - ? children( { onClose } ) - : Children.map( ( child ) => - cloneElement( child, { onClose } ) - ) } + { ! isZoomOutMode && ( + <> + + { typeof children === 'function' + ? children( { onClose } ) + : Children.map( ( child ) => + cloneElement( child, { + onClose, + } ) + ) } + + ) } { canRemove && ( Date: Fri, 8 Dec 2023 10:58:22 +0800 Subject: [PATCH 09/16] Fix drag chip positioning when dragging over a scaled iframe (#56889) --- packages/components/src/draggable/index.tsx | 65 +++++++++++++++++++-- 1 file changed, 61 insertions(+), 4 deletions(-) diff --git a/packages/components/src/draggable/index.tsx b/packages/components/src/draggable/index.tsx index 0a3000538dbf24..f729c01fb00ccb 100644 --- a/packages/components/src/draggable/index.tsx +++ b/packages/components/src/draggable/index.tsx @@ -19,6 +19,45 @@ const cloneWrapperClass = 'components-draggable__clone'; const clonePadding = 0; const bodyClass = 'is-dragging-components-draggable'; +export const getFrameScale = ( + frameElement: HTMLElement +): { + x: number; + y: number; +} => { + if ( ! frameElement ) { + return { x: 1, y: 1 }; + } + const rect = frameElement.getBoundingClientRect(); + return { + x: rect.width / frameElement.offsetWidth, + y: rect.height / frameElement.offsetHeight, + }; +}; + +const getScaledMousePosition = ( + mousePosition: { x: number; y: number }, + scale: { x: number; y: number }, + frameElement: HTMLElement +): { x: number; y: number } => { + const rect = frameElement?.getBoundingClientRect(); + + // Only the distance traveled over the iframe is affected by scaling. + // Subtract off the position of the iframe to get that distance, + // then multiply by the scale factor to normalize the scaling. + const normalizedScaledPortion = { + x: ( mousePosition.x - rect.x ) * scale.x, + y: ( mousePosition.y - rect.y ) * scale.y, + }; + + // Add back on the position of the iframe to get the fully adjusted mouse + // position. + return { + x: normalizedScaledPortion.x + rect.x, + y: normalizedScaledPortion.y + rect.y, + }; +}; + /** * `Draggable` is a Component that provides a way to set up a cross-browser * (including IE) customizable drag image and the transfer data for the drag @@ -190,11 +229,29 @@ export function Draggable( { if ( cursorLeft === e.clientX && cursorTop === e.clientY ) { return; } - const nextX = x + e.clientX - cursorLeft; - const nextY = y + e.clientY - cursorTop; + + const targetElement = e.target as HTMLElement; + let newX = e.clientX; + let newY = e.clientY; + + // When hovering an iframe, take any scaling of the iframe into account. + // i.e. in Zoomed out mode. + if ( targetElement.nodeName === 'IFRAME' ) { + const scale = getFrameScale( targetElement ); + const scaledMousePosition = getScaledMousePosition( + { x: e.clientX, y: e.clientY }, + scale, + targetElement + ); + newX = scaledMousePosition.x; + newY = scaledMousePosition.y; + } + + const nextX = x + newX - cursorLeft; + const nextY = y + newY - cursorTop; cloneWrapper.style.transform = `translate( ${ nextX }px, ${ nextY }px )`; - cursorLeft = e.clientX; - cursorTop = e.clientY; + cursorLeft = newX; + cursorTop = newY; x = nextX; y = nextY; if ( onDragOver ) { From 3522b1af800ce516957b171323dd76e24b45ec34 Mon Sep 17 00:00:00 2001 From: Glen Davies Date: Fri, 8 Dec 2023 16:41:48 +1300 Subject: [PATCH 10/16] Show children of top level `main` container when in zoomed out view (#56890) --- .../block-tools/block-selection-button.js | 1 + .../src/components/inserter/index.js | 2 +- .../src/components/list-view/branch.js | 23 ++++++++++++++----- packages/block-editor/src/store/selectors.js | 11 ++++++--- 4 files changed, 27 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/block-selection-button.js b/packages/block-editor/src/components/block-tools/block-selection-button.js index 29cfdf2170817a..f38cc66f8703e9 100644 --- a/packages/block-editor/src/components/block-tools/block-selection-button.js +++ b/packages/block-editor/src/components/block-tools/block-selection-button.js @@ -290,6 +290,7 @@ function BlockSelectionButton( { clientId, rootClientId } ) { diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index c048ee7b3b138c..ceb3e3f0aaaf03 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/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' ); } diff --git a/packages/block-editor/src/components/list-view/branch.js b/packages/block-editor/src/components/list-view/branch.js index e2e27f5f2cb5af..741d74361b106e 100644 --- a/packages/block-editor/src/components/list-view/branch.js +++ b/packages/block-editor/src/components/list-view/branch.js @@ -105,12 +105,17 @@ function ListViewBranch( props ) { const parentBlockInformation = useBlockDisplayInformation( parentId ); const syncedBranch = isSyncedBranch || !! parentBlockInformation?.isSynced; - const canParentExpand = useSelect( + const { canParentExpand, getBlockById } = useSelect( ( select ) => { - if ( ! parentId ) { - return true; - } - return select( blockEditorStore ).canEditBlock( parentId ); + const { canEditBlock, getBlockParents, getBlockName, getBlock } = + select( blockEditorStore ); + + return { + canParentExpand: canEditBlock( parentId ), + getBlocksParents: getBlockParents, + getName: getBlockName, + getBlockById: getBlock, + }; }, [ parentId ] ); @@ -132,6 +137,10 @@ function ListViewBranch( props ) { return ( <> { filteredBlocks.map( ( block, index ) => { + const isContentSection = + getBlockById( block.clientId )?.attributes?.tagName === + 'main'; + const { clientId, innerBlocks } = block; if ( index > 0 ) { @@ -154,7 +163,8 @@ function ListViewBranch( props ) { const hasNestedBlocks = !! innerBlocks?.length; const shouldExpand = - hasNestedBlocks && shouldShowInnerBlocks + hasNestedBlocks && + ( shouldShowInnerBlocks || isContentSection ) ? expandedState[ clientId ] ?? isExpanded : undefined; @@ -221,6 +231,7 @@ function ListViewBranch( props ) { selectedClientIds={ selectedClientIds } isExpanded={ isExpanded } isSyncedBranch={ syncedBranch } + shouldShowInnerBlocks={ shouldShowInnerBlocks } /> ) } diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index c0441cd3b3755e..4725212544f36f 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -2846,9 +2846,14 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) { // In zoom-out mode, the block overlay is always active for top level blocks. if ( - editorMode === 'zoom-out' && - clientId && - ! getBlockRootClientId( state, clientId ) + ( editorMode === 'zoom-out' && + clientId && + ! getBlockRootClientId( state, clientId ) && + ! getBlock( state, clientId )?.attributes?.tagName === 'main' ) || + getBlockParents( state, clientId )?.find( + ( parentId ) => + getBlock( state, parentId )?.attributes?.tagName === 'main' + ) ) { return true; } From 9dee4b6a59646eb44ff371c4ad86606740e69924 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 8 Dec 2023 12:26:40 +0800 Subject: [PATCH 11/16] Hide sibling inserter in zoomed out mode (#56891) --- packages/block-editor/src/components/block-tools/index.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/block-editor/src/components/block-tools/index.js b/packages/block-editor/src/components/block-tools/index.js index bc2729fbb15990..056d61b7ff4760 100644 --- a/packages/block-editor/src/components/block-tools/index.js +++ b/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 && ( - - ) } ); From 2e5a4789e1dd83dddfabd8cb3e88efd7eed4ce8d Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 6 Dec 2023 18:37:26 +0900 Subject: [PATCH 12/16] Pattern inserter: fix Broken preview layout (#56814) --- packages/block-editor/src/components/block-preview/style.scss | 1 - packages/block-editor/src/components/inserter/style.scss | 4 ++++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-preview/style.scss b/packages/block-editor/src/components/block-preview/style.scss index c24de175eac9a0..9bdd85f66445f8 100644 --- a/packages/block-editor/src/components/block-preview/style.scss +++ b/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; diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 77e9e94f16a9d5..6649991138c566 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -237,6 +237,10 @@ $block-inserter-tabs-height: 44px; display: block; } + .block-editor-block-preview__container { + height: 100%; + } + .block-editor-block-card { padding-left: 0; padding-right: 0; From 7771aee32d910e270dcad426109652868011cbfb Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 8 Dec 2023 12:41:01 +0800 Subject: [PATCH 13/16] Only show pattern results when searching in zoomed out mode (#56893) * Only show pattern results when searching in zoomed out mode * Update packages/block-editor/src/components/inserter/search-results.js --------- Co-authored-by: Kai Hao --- .../src/components/inserter/search-results.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index edd99609ea916c..a6667a2e6cf1e4 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/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( { ); + if ( isZoomOutMode ) { + return ( + + { patternsUI || } + + ); + } + return ( { ! showBlockDirectory && ! hasItems && } From c875c7c952c5966dfc5842697bad3e70fae58093 Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 8 Dec 2023 16:43:21 +1200 Subject: [PATCH 14/16] Show block custom name in block toolbar (#56894) --- .../block-editor/src/components/block-switcher/index.js | 8 ++++++-- .../src/components/block-title/use-block-display-title.js | 4 +++- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 49c7eb1f9eba01..7bce815a66d3d0 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -100,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 ) { @@ -156,7 +158,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { icon={ <> - { ( isReusable || isTemplate ) && ( + { ( isReusable || isTemplate || hasCustomName ) && ( { blockTitle } @@ -209,7 +211,9 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { className="block-editor-block-switcher__toggle" showColors /> - { ( isReusable || isTemplate ) && ( + { ( isReusable || + isTemplate || + hasCustomName ) && ( { blockTitle } diff --git a/packages/block-editor/src/components/block-title/use-block-display-title.js b/packages/block-editor/src/components/block-title/use-block-display-title.js index be1e26319d671c..8bdda43d9835ac 100644 --- a/packages/block-editor/src/components/block-title/use-block-display-title.js +++ b/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 && From 296a19d7f4370d35d05f361748edbf4f6adb551e Mon Sep 17 00:00:00 2001 From: Kai Hao Date: Fri, 8 Dec 2023 16:46:42 +1200 Subject: [PATCH 15/16] Close the Pattern category when the right sidebar is open (#56892) --- .../src/components/inserter/menu.js | 4 ++- .../secondary-sidebar/inserter-sidebar.js | 32 ++++++++++++++++++- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/inserter/menu.js b/packages/block-editor/src/components/inserter/menu.js index e29e67c439947a..5181a19c45462e 100644 --- a/packages/block-editor/src/components/inserter/menu.js +++ b/packages/block-editor/src/components/inserter/menu.js @@ -126,7 +126,7 @@ function InserterMenu( ( patternCategory, filter ) => { setSelectedPatternCategory( patternCategory ); setPatternFilter( filter ); - __experimentalOnPatternCategorySelection?.(); + __experimentalOnPatternCategorySelection?.( patternCategory ); }, [ setSelectedPatternCategory, __experimentalOnPatternCategorySelection ] ); @@ -213,6 +213,8 @@ function InserterMenu( focusSearch: () => { searchRef.current.focus(); }, + getSelectedPatternCategory: () => selectedPatternCategory, + selectPatternCategory: onClickPatternCategory, } ) ); const showPatternPanel = diff --git a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js index 1acdf6901cd707..e0738b45d20849 100644 --- a/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js +++ b/packages/edit-site/src/components/secondary-sidebar/inserter-sidebar.js @@ -15,6 +15,7 @@ import { import { __ } from '@wordpress/i18n'; import { useEffect, useRef, useCallback } from '@wordpress/element'; import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { store as interfaceStore } from '@wordpress/interface'; /** * Internal dependencies @@ -38,6 +39,13 @@ export default function InserterSidebar() { select( editSiteStore ).getEditedPostType() ) ); + const isRightSidebarOpen = useSelect( + ( select ) => + !! select( interfaceStore ).getActiveComplementaryArea( + editSiteStore.name + ), + [] + ); const { __unstableSetEditorMode: setEditorMode } = useDispatch( blockEditorStore ); const { __unstableGetEditorMode: getEditorMode } = @@ -60,6 +68,15 @@ export default function InserterSidebar() { }, } ); + const onSelectPatternCategory = useCallback( + ( category ) => { + if ( !! category ) { + closeGeneralSidebar(); + } + }, + [ closeGeneralSidebar ] + ); + const libraryRef = useRef(); useEffect( () => { libraryRef.current.focusSearch(); @@ -91,6 +108,19 @@ export default function InserterSidebar() { [ location, setIsInserterOpened ] ); + useEffect( + function closePatternCategoryOnRightSidebarOpenInZoomOut() { + if ( + getEditorMode() === 'zoom-out' && + isRightSidebarOpen && + !! libraryRef.current.getSelectedPatternCategory() + ) { + libraryRef.current.selectPatternCategory( null ); + } + }, + [ getEditorMode, isRightSidebarOpen ] + ); + return (
Date: Thu, 21 Dec 2023 18:46:19 +0800 Subject: [PATCH 16/16] Force the plugin build CI job to run so this can be demoed in playground --- .github/workflows/build-plugin-zip.yml | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/.github/workflows/build-plugin-zip.yml b/.github/workflows/build-plugin-zip.yml index f0c704e10456c7..532a57c598aa9a 100644 --- a/.github/workflows/build-plugin-zip.yml +++ b/.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: