Skip to content

Commit

Permalink
Add content only description for patterns and templates
Browse files Browse the repository at this point in the history
  • Loading branch information
kevin940726 committed Apr 26, 2024
1 parent 2a85977 commit 092fea8
Show file tree
Hide file tree
Showing 6 changed files with 140 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
{ __( 'Move to' ) }
</MenuItem>
) }
{ fillProps?.count === 1 && (
{ fillProps?.count === 1 && ! isContentOnly && (
<BlockModeToggle
clientId={ fillProps?.firstBlockClientId }
onToggle={ fillProps?.onClose }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export function BlockSettingsDropdown( {
previousBlockClientId,
selectedBlockClientIds,
openedBlockSettingsMenu,
isContentOnly,
} = useSelect(
( select ) => {
const {
Expand All @@ -76,6 +77,7 @@ export function BlockSettingsDropdown( {
getSelectedBlockClientIds,
getBlockAttributes,
getOpenedBlockSettingsMenu,
getBlockEditingMode,
} = unlock( select( blockEditorStore ) );

const { getActiveBlockVariation } = select( blocksStore );
Expand All @@ -99,6 +101,8 @@ export function BlockSettingsDropdown( {
getPreviousBlockClientId( firstBlockClientId ),
selectedBlockClientIds: getSelectedBlockClientIds(),
openedBlockSettingsMenu: getOpenedBlockSettingsMenu(),
isContentOnly:
getBlockEditingMode( firstBlockClientId ) === 'contentOnly',
};
},
[ firstBlockClientId ]
Expand Down Expand Up @@ -281,11 +285,15 @@ export function BlockSettingsDropdown( {
clientId={ firstBlockClientId }
/>
) }
<CopyMenuItem
clientIds={ clientIds }
onCopy={ onCopy }
shortcut={ displayShortcut.primary( 'c' ) }
/>
{ ! isContentOnly && (
<CopyMenuItem
clientIds={ clientIds }
onCopy={ onCopy }
shortcut={ displayShortcut.primary(
'c'
) }
/>
) }
{ canDuplicate && (
<MenuItem
onClick={ pipe(
Expand Down Expand Up @@ -321,7 +329,7 @@ export function BlockSettingsDropdown( {
</>
) }
</MenuGroup>
{ canCopyStyles && (
{ canCopyStyles && ! isContentOnly && (
<MenuGroup>
<CopyMenuItem
clientIds={ clientIds }
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
/**
* WordPress dependencies
*/
import {
BlockSettingsMenuControls,
__unstableBlockSettingsMenuFirstItem as BlockSettingsMenuFirstItem,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { store as coreStore } from '@wordpress/core-data';
import { __experimentalText as Text, MenuItem } from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';

function ContentOnlySettingsMenuItems( { clientId } ) {
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 ];

let record;
if ( patternParent ) {
record = select( coreStore ).getEntityRecord(
'postType',
'wp_block',
getBlockAttributes( patternParent ).ref
);
} else {
const templateId = select( editorStore ).getCurrentTemplateId();
if ( templateId ) {
record = select( coreStore ).getEntityRecord(
'postType',
'wp_template',
templateId
);
}
}
return {
entity: record,
onNavigateToEntityRecord:
getSettings().onNavigateToEntityRecord,
};
},
[ clientId ]
);

if ( ! entity ) return null;

const isPattern = entity.type === 'wp_block';

return (
<>
<BlockSettingsMenuFirstItem>
<Text
variant="muted"
as="p"
className="editor-content-only-settings-menu__description"
>
{ isPattern
? sprintf(
// translators: %s: pattern's title.
__(
'This block is part of the synced pattern: "%s". To move, delete, or edit other properties, you must edit the pattern.'
),
entity.title.raw
)
: sprintf(
// translators: %s: template's title.
__(
'This block is part of the template: "%s". To move, delete, or edit other properties, you must edit the template.'
),
entity.title.rendered
) }
</Text>
</BlockSettingsMenuFirstItem>
<MenuItem
onClick={ () => {
onNavigateToEntityRecord( {
postId: entity.id,
postType: entity.type,
} );
} }
>
{ isPattern ? __( 'Edit pattern' ) : __( 'Edit template' ) }
</MenuItem>
</>
);
}

export default function TemplateContentOnlySettingsMenu() {
return (
<BlockSettingsMenuControls>
{ ( { selectedClientIds } ) =>
selectedClientIds.length === 1 && (
<ContentOnlySettingsMenuItems
clientId={ selectedClientIds[ 0 ] }
/>
)
}
</BlockSettingsMenuControls>
);
}
4 changes: 4 additions & 0 deletions packages/editor/src/components/block-settings-menu/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.editor-content-only-settings-menu__description {
padding: $grid-unit;
min-width: 235px;
}
2 changes: 2 additions & 0 deletions packages/editor/src/components/provider/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import useCommands from '../commands';
import BlockRemovalWarnings from '../block-removal-warnings';
import StartPageOptions from '../start-page-options';
import KeyboardShortcutHelpModal from '../keyboard-shortcut-help-modal';
import ContentOnlySettingsMenu from '../block-settings-menu/content-only-settings-menu';

const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis );
const { PatternsMenuItems } = unlock( editPatternsPrivateApis );
Expand Down Expand Up @@ -264,6 +265,7 @@ export const ExperimentalEditorProvider = withRegistryProvider(
{ ! settings.__unstableIsPreviewMode && (
<>
<PatternsMenuItems />
<ContentOnlySettingsMenu />
{ mode === 'template-locked' && (
<DisableNonPageContentBlocks />
) }
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

@import "./components/autocompleters/style.scss";
@import "./components/block-manager/style.scss";
@import "./components/block-settings-menu/style.scss";
@import "./components/document-bar/style.scss";
@import "./components/document-outline/style.scss";
@import "./components/document-tools/style.scss";
Expand Down

0 comments on commit 092fea8

Please sign in to comment.