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

List view: show context menu for content-only blocks in posts #62354

Merged
merged 6 commits into from
Jun 11, 2024
Merged

List view: show context menu for content-only blocks in posts #62354

Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3dd2c05
Ensure the Edit template context menu is shown in the post editor/sit…
ramonjd Jun 6, 2024
5c129b9
Check for an entity before showing the canUser message.
ramonjd Jun 6, 2024
2024781
Rename variable
ramonjd Jun 6, 2024
a61b9cd
Use existing component but disable the edit button and update the copy
ramonjd Jun 6, 2024
e17d37d
Check for content blocks
ramonjd Jun 7, 2024
77a02a4
Use `getContentLockingParent`
ramonjd Jun 11, 2024
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
Next Next commit
Ensure the Edit template context menu is shown in the post editor/sit… 
…e editor pages by checking only for a templateId.

Previously it was only shown for pages and there was no check if the user can edit template.
Show a not-very-pretty dialogue box where a user cannot edit a template.
  • Loading branch information
@ramonjd
ramonjd committed Jun 11, 2024
commit 3dd2c05bd2e8c727c3fb4226227d58bfac486d96
111 changes: 70 additions & 41 deletions packages/editor/src/components/block-settings-menu/content-only-settings-menu.js
View file
Original file line number Diff line number Diff line change
@@ -11,6 +11,7 @@ import { store as coreStore } from '@wordpress/core-data';
import { __experimentalText as Text, MenuItem } from '@wordpress/components';
import { useSelect, useDispatch } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { lockSmall as lock } from '@wordpress/icons';

/**
* Internal dependencies
@@ -19,53 +20,81 @@ import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';

function ContentOnlySettingsMenuItems( { clientId, onClose } ) {
const { entity, onNavigateToEntityRecord } = useSelect(
( select ) => {
const {
getBlockEditingMode,
getBlockParentsByBlockName,
getSettings,
getBlockAttributes,
} = select( blockEditorStore );
const contentOnly =
getBlockEditingMode( clientId ) === 'contentOnly';
if ( ! contentOnly ) {
return {};
}
const patternParent = getBlockParentsByBlockName(
clientId,
'core/block',
true
)[ 0 ];
const { entity, onNavigateToEntityRecord, canEditTemplateParts } =
useSelect(
( select ) => {
const {
getBlockEditingMode,
getBlockParentsByBlockName,
getSettings,
getBlockAttributes,
} = select( blockEditorStore );
const contentOnly =
getBlockEditingMode( clientId ) === 'contentOnly';
if ( ! contentOnly ) {
return {};
}
const patternParent = getBlockParentsByBlockName(
clientId,
'core/block',
true
)[ 0 ];

let record;
if ( patternParent ) {
record = select( coreStore ).getEntityRecord(
'postType',
'wp_block',
getBlockAttributes( patternParent ).ref
let record;
const _canEditTemplateParts = select( coreStore ).canUser(
'create',
'templates'
);
} else {
const { getCurrentPostType, getCurrentTemplateId } =
select( editorStore );
const currentPostType = getCurrentPostType();
const templateId = getCurrentTemplateId();
if ( currentPostType === 'page' && templateId ) {
if ( patternParent ) {
record = select( coreStore ).getEntityRecord(
'postType',
'wp_template',
templateId
'wp_block',
getBlockAttributes( patternParent ).ref
);
} else {
const { getCurrentTemplateId } = select( editorStore );
const templateId = getCurrentTemplateId();
if ( templateId && _canEditTemplateParts ) {
record = select( coreStore ).getEntityRecord(
'postType',
'wp_template',
templateId
);
}
}
}
return {
entity: record,
onNavigateToEntityRecord:
getSettings().onNavigateToEntityRecord,
};
},
[ clientId ]
);
return {
canEditTemplateParts: _canEditTemplateParts,
entity: record,
onNavigateToEntityRecord:
getSettings().onNavigateToEntityRecord,
};
},
[ clientId ]
);

if ( ! canEditTemplateParts ) {
Copy link
Member Author

Choose a reason for hiding this comment

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

I also looked into just showing a lock icon like Gutenberg did before.

I can't do a canUser check in the list item component as it's from the core store and can't be imported into the block editor package.

Open to suggestions!

return (
<>
<BlockSettingsMenuFirstItem>
<MenuItem
Copy link
Member Author

Choose a reason for hiding this comment

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

So this was hacked together and needs review.

There are two items — MenuItem and Text — because there is a line separating the two that persists.

Ideally, the dropdown wouldn't be required at all and we'd replace the ellipsis menu with a lock icon.

Ran out of time to investigate that today.

Copy link
Contributor

Choose a reason for hiding this comment

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

I don't think the lock icon is desired, as users can still edit the content of blocks like Post Title, even with low permissions. So this is on the right track, but the copy needs to be adjusted.

I think some text like "Only users with permissions to edit the template can move or delete this block" is more in the spirit of #61127. Perhaps with an aria-disabled 'Edit Template' button.

@jameskoster may have some suggestions.

TLDR for you - the question is around what to show in list view here when the user doesn't have permissions to edit the template:
Screenshot 2024-06-06 at 3 03 25 pm

Copy link
Member Author

Choose a reason for hiding this comment

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

I don't think the lock icon is desired, as users can still edit the content of blocks like Post Title, even with low permissions. So this is on the right track, but the copy needs to be adjusted.

I think some text like "Only users with permissions to edit the template can move or delete this block" is more in the spirit of #61127.

I like this. I've updated the PR so that we're using the existing component, but disabling the button and adding the suggested text for now, until further design guidance 😄

icon={ lock }
iconPosition="left"
role="none"
disabled
>
{ __( 'Locked' ) }
</MenuItem>
</BlockSettingsMenuFirstItem>
<Text
variant="muted"
as="p"
className="editor-content-only-settings-menu__description"
>
{ __( 'Sorry, you cannot edit this block.' ) }
</Text>
</>
);
}

if ( ! entity ) {
return (