From 23ec951f57b9a39ff44ca0c3fbf4428894098405 Mon Sep 17 00:00:00 2001 From: scruffian Date: Tue, 12 Mar 2024 10:18:07 +0000 Subject: [PATCH 1/4] Invoke zoomed out when using the patterns tab, and create a hook --- packages/block-editor/README.md | 4 ++ .../inserter/block-patterns-tab/index.js | 6 +++ packages/block-editor/src/hooks/index.js | 1 + .../block-editor/src/hooks/use-zoom-out.js | 44 +++++++++++++++++++ packages/block-editor/src/index.js | 1 + .../global-styles/screen-style-variations.js | 39 ++-------------- 6 files changed, 60 insertions(+), 35 deletions(-) create mode 100644 packages/block-editor/src/hooks/use-zoom-out.js diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 6fc51d8451212..e527739048cdc 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -1028,6 +1028,10 @@ _Returns_ - `any[]`: Returns the values defined for the settings. +### useZoomOut + +Undocumented declaration. + ### Warning _Related_ diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index 373b96cf569b0..7d8200e5b0a55 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -20,6 +20,7 @@ import PatternsExplorerModal from '../block-patterns-explorer'; import MobileTabNavigation from '../mobile-tab-navigation'; import { PatternCategoryPreviews } from './pattern-category-previews'; import { usePatternCategories } from './use-pattern-categories'; +import { useZoomOut } from '../../../hooks/use-zoom-out'; function BlockPatternsTab( { onSelectCategory, @@ -33,6 +34,11 @@ function BlockPatternsTab( { const initialCategory = selectedCategory || categories[ 0 ]; const isMobile = useViewportMatch( 'medium', '<' ); + + // Move to zoom out mode when this component is mounted + // and back to the previous mode when unmounted. + useZoomOut(); + return ( <> { ! isMobile && ( diff --git a/packages/block-editor/src/hooks/index.js b/packages/block-editor/src/hooks/index.js index 36efe3dcf409b..9bdfd9fec1d7d 100644 --- a/packages/block-editor/src/hooks/index.js +++ b/packages/block-editor/src/hooks/index.js @@ -78,3 +78,4 @@ export { getSpacingClassesAndStyles } from './use-spacing-props'; export { getTypographyClassesAndStyles } from './use-typography-props'; export { getGapCSSValue } from './gap'; export { useCachedTruthy } from './use-cached-truthy'; +export { useZoomOut } from './use-zoom-out'; diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js new file mode 100644 index 0000000000000..501b04d103b5e --- /dev/null +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -0,0 +1,44 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { useEffect, useRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import { store as blockEditorStore } from '../store'; + +export function useZoomOut() { + const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); + const { mode } = useSelect( ( select ) => { + return { + mode: select( blockEditorStore ).__unstableGetEditorMode(), + }; + }, [] ); + + const shouldRevertInitialMode = useRef( null ); + useEffect( () => { + // ignore changes to zoom-out mode as we explictily change to it on mount. + if ( mode !== 'zoom-out' ) { + shouldRevertInitialMode.current = false; + } + }, [ mode ] ); + + // Intentionality left without any dependency. + // This effect should only run the first time the component is rendered. + // The effect opens the zoom-out view if it is not open before when applying a style variation. + useEffect( () => { + if ( mode !== 'zoom-out' ) { + __unstableSetEditorMode( 'zoom-out' ); + shouldRevertInitialMode.current = true; + return () => { + // if there were not mode changes revert to the initial mode when unmounting. + if ( shouldRevertInitialMode.current ) { + __unstableSetEditorMode( mode ); + } + }; + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [] ); +} diff --git a/packages/block-editor/src/index.js b/packages/block-editor/src/index.js index 10c1fb1077c56..53ae7dfeb778f 100644 --- a/packages/block-editor/src/index.js +++ b/packages/block-editor/src/index.js @@ -13,6 +13,7 @@ export { getGapCSSValue as __experimentalGetGapCSSValue, getShadowClassesAndStyles as __experimentalGetShadowClassesAndStyles, useCachedTruthy, + useZoomOut, } from './hooks'; export * from './components'; export * from './elements'; diff --git a/packages/edit-site/src/components/global-styles/screen-style-variations.js b/packages/edit-site/src/components/global-styles/screen-style-variations.js index cabf50531a6ae..e206fb1e443a0 100644 --- a/packages/edit-site/src/components/global-styles/screen-style-variations.js +++ b/packages/edit-site/src/components/global-styles/screen-style-variations.js @@ -3,9 +3,7 @@ */ import { Card, CardBody } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { store as blockEditorStore } from '@wordpress/block-editor'; -import { useEffect, useRef } from '@wordpress/element'; -import { useSelect, useDispatch } from '@wordpress/data'; +import { useZoomOut } from '@wordpress/block-editor'; /** * Internal dependencies @@ -14,38 +12,9 @@ import ScreenHeader from './header'; import StyleVariationsContainer from './style-variations-container'; function ScreenStyleVariations() { - const { mode } = useSelect( ( select ) => { - return { - mode: select( blockEditorStore ).__unstableGetEditorMode(), - }; - }, [] ); - - const shouldRevertInitialMode = useRef( null ); - useEffect( () => { - // ignore changes to zoom-out mode as we explictily change to it on mount. - if ( mode !== 'zoom-out' ) { - shouldRevertInitialMode.current = false; - } - }, [ mode ] ); - - // Intentionality left without any dependency. - // This effect should only run the first time the component is rendered. - // The effect opens the zoom-out view if it is not open before when applying a style variation. - useEffect( () => { - if ( mode !== 'zoom-out' ) { - __unstableSetEditorMode( 'zoom-out' ); - shouldRevertInitialMode.current = true; - return () => { - // if there were not mode changes revert to the initial mode when unmounting. - if ( shouldRevertInitialMode.current ) { - __unstableSetEditorMode( mode ); - } - }; - } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [] ); - - const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); + // Move to zoom out mode when this component is mounted + // and back to the previous mode when unmounted. + useZoomOut(); return ( <> From bcb143024101de027a1ce886f993c1bc2ad79c35 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 14 Mar 2024 11:16:38 +0000 Subject: [PATCH 2/4] Update packages/block-editor/README.md Co-authored-by: Andrei Draganescu --- packages/block-editor/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index e527739048cdc..75f4d1143895e 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -1030,7 +1030,7 @@ _Returns_ ### useZoomOut -Undocumented declaration. +A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. ### Warning From fe37fcf558a2865925e441e3874bc7c16e3e938b Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 14 Mar 2024 12:32:27 +0000 Subject: [PATCH 3/4] update docs --- packages/block-editor/src/hooks/use-zoom-out.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-editor/src/hooks/use-zoom-out.js b/packages/block-editor/src/hooks/use-zoom-out.js index 501b04d103b5e..8c2aff8819b63 100644 --- a/packages/block-editor/src/hooks/use-zoom-out.js +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -9,6 +9,9 @@ import { useEffect, useRef } from '@wordpress/element'; */ import { store as blockEditorStore } from '../store'; +/** + * A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. + */ export function useZoomOut() { const { __unstableSetEditorMode } = useDispatch( blockEditorStore ); const { mode } = useSelect( ( select ) => { From 09280c1840c5c559ef9e34339ed4ff02ec9bc444 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 22 Mar 2024 15:38:25 +0200 Subject: [PATCH 4/4] enter zoom out on category select --- .../src/components/inserter/block-patterns-tab/index.js | 5 ----- .../inserter/block-patterns-tab/pattern-category-previews.js | 5 +++++ 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index 7d8200e5b0a55..378bd996bf93b 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -20,7 +20,6 @@ import PatternsExplorerModal from '../block-patterns-explorer'; import MobileTabNavigation from '../mobile-tab-navigation'; import { PatternCategoryPreviews } from './pattern-category-previews'; import { usePatternCategories } from './use-pattern-categories'; -import { useZoomOut } from '../../../hooks/use-zoom-out'; function BlockPatternsTab( { onSelectCategory, @@ -35,10 +34,6 @@ function BlockPatternsTab( { const initialCategory = selectedCategory || categories[ 0 ]; const isMobile = useViewportMatch( 'medium', '<' ); - // Move to zoom out mode when this component is mounted - // and back to the previous mode when unmounted. - useZoomOut(); - return ( <> { ! isMobile && ( diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js index 7b8fd8e76202a..b66535f76eff2 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/pattern-category-previews.js @@ -32,6 +32,7 @@ import { myPatternsCategory, INSERTER_PATTERN_TYPES, } from './utils'; +import { useZoomOut } from '../../../hooks/use-zoom-out'; const noop = () => {}; @@ -49,6 +50,10 @@ export function PatternCategoryPreviews( { const [ patternSyncFilter, setPatternSyncFilter ] = useState( 'all' ); const [ patternSourceFilter, setPatternSourceFilter ] = useState( 'all' ); + // Move to zoom out mode when this component is mounted + // and back to the previous mode when unmounted. + useZoomOut(); + const availableCategories = usePatternCategories( rootClientId, patternSourceFilter