Skip to content

Commit

Permalink
Introduce section container selection when assembling patterns (zoom …
Browse files Browse the repository at this point in the history 
…out mode) (#59249)

* Zoom Out: Only enable the zoom-out mode within the main group

* Hide inner blocks if block has active overlay

* Account for assembling pages by using post content block as section container

* use maybedisable as a name for the disabling component

* Refactor components to hooks

* rebase fix missed isZoomedOutView changes in trunk

* don't spread the client ids

* create a new selector to find the root section block name

* correct some variable names, remove testing code

* remove useless call to function in the editor package

* remove the useEffect in the editor component of edit site, use the action that sets the context to set the section root block too

* WIP Refactor hook to store action

* Fix copy/paste mistake

* combine state and modes in the reducer correctly into one iterable

* enable selection for no root section block

* enable section selection for sections when there is no root section container

* Use registry.batch instead

* Replace bulk actions with registry.batch

* make section root selector and action private

* dispatch set block mode action

* privatize the section root block client id selector

Conflicts:
	packages/block-editor/src/store/private-selectors.js

* Remove unused reducers

* Refactor to group by if we have a sectionsContainerClientId

* Add wrapper to prevent running a bunch of loops in non-zoom out modes

* Move SET_EDITOR_MODE back to the end so prevMode works

* Add comments for two main sections

* Use constant instead of random empty string

* Revert remaining block-list changes

* Refactor to use select

* Refactor to use ROOT_CONTAINER_CLIENT_ID instead of empty string

* Move zoom-out logic to selector instead of action

* Remove registry.batch

* Update JSDoc for ROOT_CONTAINER_CLIENT_ID defaults

* Revert pattern edit.js

* Fix selectors in selectors

* Fix selection when entering zoom-out mode

* Fix case wher getBlock returns null

* Optimize selector some more

* Fix missing imports

* Revert ROOT_CONTAINER_CLIENT_ID rename

* Revert list-view changes

* Try moving post type logic into useBlockEditorSettings

* Try make sectionRootClientId a private setting

* Remove unused code

* Fix selected block in zoom out mode

* Rename _settings to blockEditorSettings

* Remove destructuing

* make templates with no root also work

* Check block list for active block overlay

* Pass rendering mode instead of type

* Fix an issue where some selectors pass null as a default value instead of undefined

* Try disabling all non-children of the sectionRoot

* don't put overlay on all blocks in zoom out, just root and section children

---------

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: getdave <[email protected]>
Co-authored-by: draganescu <[email protected]>
Co-authored-by: ajlende <[email protected]>
Co-authored-by: scruffian <[email protected]>
Co-authored-by: richtabor <[email protected]>
Co-authored-by: ellatrix <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: talldan <[email protected]>
  • Loading branch information
@getdave @youknowriad
@draganescu @scruffian @richtabor @ellatrix @Mamaduka @talldan
10 people authored Apr 11, 2024
1 parent d8215e9 commit ecf24f9
Show file tree
Hide file tree
Showing 4 changed files with 123 additions and 47 deletions.
28 changes: 22 additions & 6 deletions packages/block-editor/src/store/actions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ import {
__experimentalUpdateSettings,
privateRemoveBlocks,
} from './private-actions';
import { STORE_NAME } from './constants';
import { unlock } from '../lock-unlock';

/** @typedef {import('../components/use-on-block-drop/types').WPDropOperation} WPDropOperation */

Expand Down Expand Up @@ -1432,16 +1434,30 @@ export const setNavigationMode =
*/
export const __unstableSetEditorMode =
( mode ) =>
( { dispatch, select } ) => {
// When switching to zoom-out mode, we need to select the root block
( { dispatch, select, registry } ) => {
// When switching to zoom-out mode, we need to select the parent section
if ( mode === 'zoom-out' ) {
const firstSelectedClientId = select.getBlockSelectionStart();
if ( firstSelectedClientId ) {
dispatch.selectBlock(
select.getBlockHierarchyRootClientId(
const { sectionRootClientId } = unlock(
registry.select( STORE_NAME ).getSettings()
);
if ( sectionRootClientId ) {
const sectionClientIds =
select.getBlockOrder( sectionRootClientId );
if ( sectionClientIds ) {
const parents = select.getBlockParents(
firstSelectedClientId
)
);
const firstSectionClientId = parents.find( ( parent ) =>
sectionClientIds.includes( parent )
);
dispatch.selectBlock( firstSectionClientId );
}
} else if ( firstSelectedClientId ) {
const rootClientId = select.getBlockHierarchyRootClientId(
firstSelectedClientId
);
dispatch.selectBlock( rootClientId );
}
}

Expand Down
47 changes: 40 additions & 7 deletions packages/block-editor/src/store/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2813,13 +2813,20 @@ export function __unstableHasActiveBlockOverlayActive( state, clientId ) {

const editorMode = __unstableGetEditorMode( state );

// In zoom-out mode, the block overlay is always active for top level blocks.
if (
editorMode === 'zoom-out' &&
clientId &&
! getBlockRootClientId( state, clientId )
) {
return true;
// In zoom-out mode, the block overlay is always active for section level blocks.
if ( editorMode === 'zoom-out' ) {
const { sectionRootClientId } = unlock( getSettings( state ) );
if ( sectionRootClientId ) {
const sectionClientIds = getBlockOrder(
state,
sectionRootClientId
);
if ( sectionClientIds?.includes( clientId ) ) {
return true;
}
} else if ( clientId && ! getBlockRootClientId( state, clientId ) ) {
return true;
}
}

// In navigation mode, the block overlay is active when the block is not
Expand Down Expand Up @@ -2891,6 +2898,32 @@ export function __unstableIsWithinBlockOverlay( state, clientId ) {
export const getBlockEditingMode = createRegistrySelector(
( select ) =>
( state, clientId = '' ) => {
// Some selectors that call this provide `null` as the default
// rootClientId, but the default rootClientId is actually `''`.
if ( clientId === null ) {
clientId = '';
}
// In zoom-out mode, override the behavior set by
// __unstableSetBlockEditingMode to only allow editing the top-level
// sections.
const editorMode = __unstableGetEditorMode( state );
if ( editorMode === 'zoom-out' ) {
const { sectionRootClientId } = unlock( getSettings( state ) );
if ( clientId === '' /* ROOT_CONTAINER_CLIENT_ID */ ) {
return sectionRootClientId ? 'disabled' : 'contentOnly';
}
if ( clientId === sectionRootClientId ) {
return 'contentOnly';
}
const sectionsClientIds = getBlockOrder(
state,
sectionRootClientId
);
if ( ! sectionsClientIds?.includes( clientId ) ) {
return 'disabled';
}
}

const blockEditingMode = state.blockEditingModes.get( clientId );
if ( blockEditingMode ) {
return blockEditingMode;
Expand Down
3 changes: 2 additions & 1 deletion packages/editor/src/components/provider/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,8 @@ export const ExperimentalEditorProvider = withRegistryProvider(
const blockEditorSettings = useBlockEditorSettings(
editorSettings,
type,
id
id,
mode
);
const [ blocks, onInput, onChange ] = useBlockEditorProps(
post,
Expand Down
92 changes: 59 additions & 33 deletions packages/editor/src/components/provider/use-block-editor-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,18 @@ import { __ } from '@wordpress/i18n';
import { store as preferencesStore } from '@wordpress/preferences';
import { useViewportMatch } from '@wordpress/compose';
import { store as blocksStore } from '@wordpress/blocks';
import { privateApis } from '@wordpress/block-editor';
import {
privateApis,
store as blockEditorStore,
} from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import inserterMediaCategories from '../media-categories';
import { mediaUpload } from '../../utils';
import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';
import { lock, unlock } from '../../lock-unlock';

const EMPTY_BLOCKS_LIST = [];

Expand Down Expand Up @@ -70,6 +73,7 @@ const BLOCK_EDITOR_SETTINGS = [
'postContentAttributes',
'postsPerPage',
'readOnly',
'sectionRootClientId',
'styles',
'titlePlaceholder',
'supportsLayout',
Expand All @@ -85,13 +89,14 @@ const BLOCK_EDITOR_SETTINGS = [
/**
* React hook used to compute the block editor settings to use for the post editor.
*
* @param {Object} settings EditorProvider settings prop.
* @param {string} postType Editor root level post type.
* @param {string} postId Editor root level post ID.
* @param {Object} settings EditorProvider settings prop.
* @param {string} postType Editor root level post type.
* @param {string} postId Editor root level post ID.
* @param {string} renderingMode Editor rendering mode.
*
* @return {Object} Block Editor Settings.
*/
function useBlockEditorSettings( settings, postType, postId ) {
function useBlockEditorSettings( settings, postType, postId, renderingMode ) {
const isLargeViewport = useViewportMatch( 'medium' );
const {
allowRightClickOverrides,
Expand All @@ -108,6 +113,7 @@ function useBlockEditorSettings( settings, postType, postId ) {
pageForPosts,
userPatternCategories,
restBlockPatternCategories,
sectionRootClientId,
} = useSelect(
( select ) => {
const {
Expand All @@ -119,10 +125,25 @@ function useBlockEditorSettings( settings, postType, postId ) {
} = select( coreStore );
const { get } = select( preferencesStore );
const { getBlockTypes } = select( blocksStore );
const { getBlocksByName, getBlockAttributes } =
select( blockEditorStore );
const siteSettings = canUser( 'read', 'settings' )
? getEntityRecord( 'root', 'site' )
: undefined;

function getSectionRootBlock() {
if ( renderingMode === 'template-locked' ) {
return getBlocksByName( 'core/post-content' )?.[ 0 ] ?? '';
}

return (
getBlocksByName( 'core/group' ).find(
( clientId ) =>
getBlockAttributes( clientId )?.tagName === 'main'
) ?? ''
);
}

return {
allowRightClickOverrides: get(
'core',
Expand All @@ -146,9 +167,10 @@ function useBlockEditorSettings( settings, postType, postId ) {
pageForPosts: siteSettings?.page_for_posts,
userPatternCategories: getUserPatternCategories(),
restBlockPatternCategories: getBlockPatternCategories(),
sectionRootClientId: getSectionRootBlock(),
};
},
[ postType, postId, isLargeViewport ]
[ postType, postId, isLargeViewport, renderingMode ]
);

const settingsBlockPatterns =
Expand Down Expand Up @@ -230,8 +252,8 @@ function useBlockEditorSettings( settings, postType, postId ) {

const forceDisableFocusMode = settings.focusMode === false;

return useMemo(
() => ( {
return useMemo( () => {
const blockEditorSettings = {
...Object.fromEntries(
Object.entries( settings ).filter( ( [ key ] ) =>
BLOCK_EDITOR_SETTINGS.includes( key )
Expand Down Expand Up @@ -278,30 +300,34 @@ function useBlockEditorSettings( settings, postType, postId ) {
? [ [ 'core/navigation', {}, [] ] ]
: settings.template,
__experimentalSetIsInserterOpened: setIsInserterOpened,
} ),
[
allowedBlockTypes,
allowRightClickOverrides,
focusMode,
forceDisableFocusMode,
hasFixedToolbar,
isDistractionFree,
keepCaretInsideBlock,
settings,
hasUploadPermissions,
userPatternCategories,
blockPatterns,
blockPatternCategories,
canUseUnfilteredHTML,
undo,
createPageEntity,
userCanCreatePages,
pageOnFront,
pageForPosts,
postType,
setIsInserterOpened,
]
);
};
lock( blockEditorSettings, {
sectionRootClientId,
} );
return blockEditorSettings;
}, [
allowedBlockTypes,
allowRightClickOverrides,
focusMode,
forceDisableFocusMode,
hasFixedToolbar,
isDistractionFree,
keepCaretInsideBlock,
settings,
hasUploadPermissions,
userPatternCategories,
blockPatterns,
blockPatternCategories,
canUseUnfilteredHTML,
undo,
createPageEntity,
userCanCreatePages,
pageOnFront,
pageForPosts,
postType,
setIsInserterOpened,
sectionRootClientId,
] );
}

export default useBlockEditorSettings;

0 comments on commit ecf24f9

Please sign in to comment.