Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Patterns: disable editing of synced patterns in post editor unless children have connected content set #56574

Closed
wants to merge 16 commits into from
Closed

Patterns: disable editing of synced patterns in post editor unless children have connected content set #56574

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
d84857e
Set pattern block edit mode to disabled
glendaviesnz Dec 8, 2023
49408fc
remove editing mode changes
glendaviesnz Dec 8, 2023
4ace123
remove extra line
glendaviesnz Nov 28, 2023
6553bcf
Modify the getBlockEditingMode selector instead of explicitly setting…
glendaviesnz Nov 28, 2023
95cec7a
Stop the between inserter showing in synced pattern blocks
glendaviesnz Nov 28, 2023
b95a0a3
Move setting of editing mode of children to the pattern block
glendaviesnz Dec 8, 2023
1a0a4ac
Remove edit locking from core block as these will be edit locked by d…
glendaviesnz Nov 28, 2023
333c205
Apply edit mode recursively so nested innerBlocks covered
glendaviesnz Dec 8, 2023
9c538c4
Only show edit button if user has edit permissions for pattern
glendaviesnz Dec 8, 2023
676b050
Show content in inspector panel
glendaviesnz Nov 28, 2023
26d3e01
Remove name edit
glendaviesnz Dec 8, 2023
cc024a3
Changes from code review
glendaviesnz Dec 8, 2023
decc373
Fix rebase conflict issues
glendaviesnz Dec 8, 2023
2dc14b7
Some more rebase tidy up
glendaviesnz Dec 8, 2023
a9f1bc5
Fix back link in site editor
glendaviesnz Dec 8, 2023
e73f531
Put all parts behind experiment
glendaviesnz Dec 12, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/block-editor/src/components/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,9 @@ const BlockInspector = ( { showNoBlockSelectedMessage = true } ) => {
blockType: _blockType,
topLevelLockedBlock:
__unstableGetContentLockingParent( _selectedBlockClientId ) ||
( getTemplateLock( _selectedBlockClientId ) === 'contentOnly'
( getTemplateLock( _selectedBlockClientId ) === 'contentOnly' ||
( _selectedBlockName === 'core/block' &&
window.__experimentalPatternPartialSyncing )
? _selectedBlockClientId
: undefined ),
};
Expand Down
5 changes: 4 additions & 1 deletion packages/block-editor/src/components/block-list/use-in-between-inserter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ export function useInBetweenInserter() {
getTemplateLock,
__unstableIsWithinBlockOverlay,
getBlockEditingMode,
getBlockName,
} = useSelect( blockEditorStore );
const { showInsertionPoint, hideInsertionPoint } =
useDispatch( blockEditorStore );
Expand Down Expand Up @@ -75,7 +76,9 @@ export function useInBetweenInserter() {

if (
getTemplateLock( rootClientId ) ||
getBlockEditingMode( rootClientId ) === 'disabled'
getBlockEditingMode( rootClientId ) === 'disabled' ||
( getBlockName( rootClientId ) === 'core/block' &&
window.__experimentalPatternPartialSyncing )
) {
return;
}
Expand Down
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/block-lock/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import useBlockDisplayInformation from '../use-block-display-information';
import { store as blockEditorStore } from '../../store';

// Entity based blocks which allow edit locking
const ALLOWS_EDIT_LOCKING = [ 'core/block', 'core/navigation' ];
const ALLOWS_EDIT_LOCKING = [ 'core/navigation' ];

function getTemplateLockValue( lock ) {
// Prevents all operations.
Expand Down
6 changes: 4 additions & 2 deletions packages/block-editor/src/store/selectors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2806,8 +2806,10 @@ export const __unstableGetContentLockingParent = createSelector(
while ( state.blocks.parents.has( current ) ) {
current = state.blocks.parents.get( current );
if (
current &&
getTemplateLock( state, current ) === 'contentOnly'
( getBlockName( state, current ) === 'core/block' &&
window.__experimentalPatternPartialSyncing ) ||
( current &&
getTemplateLock( state, current ) === 'contentOnly' )
) {
result = current;
}
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/block/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
"description": "Create and save content to reuse across your site. Update the pattern, and the changes apply everywhere it’s used.",
"keywords": [ "reusable" ],
"textdomain": "default",
"usesContext": [ "postId" ],
"attributes": {
"ref": {
"type": "number"
Expand Down
98 changes: 70 additions & 28 deletions packages/block-library/src/block/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,26 +8,27 @@ import classnames from 'classnames';
*/
import { useRegistry, useSelect, useDispatch } from '@wordpress/data';
import { useRef, useMemo, useEffect } from '@wordpress/element';
import { useEntityProp, useEntityRecord } from '@wordpress/core-data';
import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
import {
Placeholder,
Spinner,
TextControl,
PanelBody,
ToolbarButton,
ToolbarGroup,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
useInnerBlocksProps,
__experimentalRecursionProvider as RecursionProvider,
__experimentalUseHasRecursion as useHasRecursion,
InnerBlocks,
InspectorControls,
useBlockProps,
Warning,
privateApis as blockEditorPrivateApis,
store as blockEditorStore,
BlockControls,
} from '@wordpress/block-editor';
import { getBlockSupport, parse } from '@wordpress/blocks';
import { addQueryArgs } from '@wordpress/url';

/**
* Internal dependencies
Expand Down Expand Up @@ -55,6 +56,16 @@ function getPartiallySyncedAttributes( block ) {

const fullAlignments = [ 'full', 'wide', 'left', 'right' ];

function setBlockEditMode( setEditMode, blocks ) {
blocks.forEach( ( block ) => {
const editMode = isPartiallySynced( block )
? 'contentOnly'
: 'disabled';
setEditMode( block.clientId, editMode );
setBlockEditMode( setEditMode, block.innerBlocks );
} );
}

const useInferredLayout = ( blocks, parentLayout ) => {
const initialInferredAlignmentRef = useRef();

Expand Down Expand Up @@ -137,6 +148,7 @@ export default function ReusableBlockEdit( {
attributes: { ref, overrides },
__unstableParentLayout: parentLayout,
clientId: patternClientId,
context: { postId },
} ) {
const registry = useRegistry();
const hasAlreadyRendered = useHasRecursion( ref );
Expand All @@ -145,6 +157,7 @@ export default function ReusableBlockEdit( {
'wp_block',
ref
);

const isMissing = hasResolved && ! record;
const initialOverrides = useRef( overrides );
const defaultValuesRef = useRef( {} );
Expand All @@ -153,7 +166,50 @@ export default function ReusableBlockEdit( {
__unstableMarkNextChangeAsNotPersistent,
setBlockEditingMode,
} = useDispatch( blockEditorStore );
const { getBlockEditingMode } = useSelect( blockEditorStore );

const { editUrl, innerBlocks, userCanEdit, getBlockEditingMode } =
useSelect(
( select ) => {
const { canUser } = select( coreStore );
const {
getSettings,
getBlocks,
getBlockEditingMode: editingMode,
} = select( blockEditorStore );

const blocks = getBlocks( patternClientId );
const isBlockTheme = getSettings().__unstableIsBlockBasedTheme;
const canEdit = canUser( 'update', 'blocks', ref );
const defaultUrl = addQueryArgs( 'post.php', {
action: 'edit',
post: ref,
} );
const siteEditorUrl = addQueryArgs( 'site-editor.php', {
postType: 'wp_block',
postId: ref,
categoryType: 'pattern',
canvas: 'edit',
syncedPatternId: postId,
} );

// For editing link to the site editor if the theme and user permissions support it.
return {
innerBlocks: blocks,
editUrl:
canUser( 'read', 'templates' ) && isBlockTheme
? siteEditorUrl
: defaultUrl,
userCanEdit: canEdit,
getBlockEditingMode: editingMode,
};
},
[ patternClientId, postId, ref ]
);

useEffect(
() => setBlockEditMode( setBlockEditingMode, innerBlocks ),
[ innerBlocks, setBlockEditingMode ]
);

useEffect( () => {
if ( ! record?.content?.raw ) return;
Expand Down Expand Up @@ -183,18 +239,6 @@ export default function ReusableBlockEdit( {
setBlockEditingMode,
] );

const innerBlocks = useSelect(
( select ) => select( blockEditorStore ).getBlocks( patternClientId ),
[ patternClientId ]
);

const [ title, setTitle ] = useEntityProp(
'postType',
'wp_block',
'title',
ref
);

const { alignment, layout } = useInferredLayout(
innerBlocks,
parentLayout
Expand Down Expand Up @@ -268,17 +312,15 @@ export default function ReusableBlockEdit( {

return (
<RecursionProvider uniqueId={ ref }>
<InspectorControls>
<PanelBody>
<TextControl
label={ __( 'Name' ) }
value={ title }
onChange={ setTitle }
__nextHasNoMarginBottom
__next40pxDefaultSize
/>
</PanelBody>
</InspectorControls>
{ userCanEdit && (
<BlockControls>
<ToolbarGroup>
<ToolbarButton href={ editUrl }>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not a blocker for this PR, but ideally we could also use client side routing here if the user is already inside the site editor.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's wait and see what design says about the flows between editors and possibly tidy this up in a follow up.

{ __( 'Edit' ) }
</ToolbarButton>
</ToolbarGroup>
</BlockControls>
) }
{ children === null ? (
<div { ...innerBlocksProps } />
) : (
Expand Down
6 changes: 4 additions & 2 deletions packages/edit-site/src/components/block-editor/back-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { Button } from '@wordpress/components';
import { arrowLeft } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';
import { privateApis as routerPrivateApis } from '@wordpress/router';
import { getQueryArgs } from '@wordpress/url';

/**
* Internal dependencies
Expand All @@ -24,9 +25,10 @@ function BackButton() {
const isNavigationMenu = location.params.postType === NAVIGATION_POST_TYPE;
const previousTemplateId = location.state?.fromTemplateId;

const isFocusMode = isTemplatePart || isNavigationMenu;
const { syncedPatternId } = getQueryArgs( window.location.href );
const isFocusMode = isTemplatePart || isNavigationMenu || syncedPatternId;

if ( ! isFocusMode || ! previousTemplateId ) {
if ( ! isFocusMode || ( ! previousTemplateId && ! syncedPatternId ) ) {
return null;
}

Expand Down
Loading