diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 6fc51d8451212..75f4d1143895e 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 + +A hook used to set the editor mode to zoomed out mode, invoking the hook sets the mode. + ### 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..8c2aff8819b63 --- /dev/null +++ b/packages/block-editor/src/hooks/use-zoom-out.js @@ -0,0 +1,47 @@ +/** + * WordPress dependencies + */ +import { useSelect, useDispatch } from '@wordpress/data'; +import { useEffect, useRef } from '@wordpress/element'; + +/** + * Internal dependencies + */ +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 ) => { + 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/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index 34a60e2659bf0..7dbea23d34ada 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -1,6 +1,7 @@ /** * WordPress dependencies */ +import { serialize } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { BlockSettingsMenuControls, @@ -94,6 +95,7 @@ export default function TemplatePartEdit( { clientId, } ) { const { createSuccessNotice } = useDispatch( noticesStore ); + const { editEntityRecord } = useDispatch( coreStore ); const currentTheme = useSelect( ( select ) => select( coreStore ).getCurrentTheme()?.stylesheet, [] @@ -196,12 +198,17 @@ export default function TemplatePartEdit( { mapTemplatePartToBlockPattern( templatePart ) ); - const onTemplatePartSelect = ( templatePart ) => { - setAttributes( { - slug: templatePart.slug, - theme: templatePart.theme, - area: undefined, - } ); + const onTemplatePartSelect = async ( templatePart ) => { + await editEntityRecord( + 'postType', + 'wp_template_part', + templatePartId, + { + blocks: templatePart.blocks, + content: serialize( templatePart.blocks ), + } + ); + createSuccessNotice( sprintf( /* translators: %s: template part title. */ @@ -276,9 +283,7 @@ export default function TemplatePartEdit( { { - onTemplatePartSelect( - pattern.templatePart - ); + onTemplatePartSelect( pattern ); } } /> { + await editEntityRecord( + 'postType', + 'wp_template_part', + templatePartId, + { + blocks: templatePart.blocks, + content: serialize( templatePart.blocks ), + } + ); - const onTemplatePartSelect = ( templatePart ) => { - setAttributes( { - slug: templatePart.slug, - theme: templatePart.theme, - area: undefined, - } ); createSuccessNotice( sprintf( /* translators: %s: template part title. */ @@ -98,7 +106,7 @@ export default function TemplatePartSelectionModal( { blockPatterns={ filteredTemplateParts } shownPatterns={ shownTemplateParts } onClickPattern={ ( pattern ) => { - onTemplatePartSelect( pattern.templatePart ); + onTemplatePartSelect( pattern ); } } /> 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 ( <>