Skip to content

Commit

Permalink
Post Template Panel: Display popover on the left side of the sidebar (#…
Browse files Browse the repository at this point in the history 
…69134)

Place the dropdown inside a PostPanelRow and update the placement from bottom-start to left-start.


Co-authored-by: t-hamano <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: carolinan <[email protected]>
  • Loading branch information
@t-hamano @Mamaduka @carolinan
4 people authored Feb 17, 2025
1 parent abeb109 commit ed4df79
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 82 deletions.
128 changes: 73 additions & 55 deletions packages/editor/src/components/post-template/block-theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,18 @@
import { useSelect, useDispatch } from '@wordpress/data';
import { decodeEntities } from '@wordpress/html-entities';
import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
import { useState, useMemo } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
import { check } from '@wordpress/icons';
import { store as noticesStore } from '@wordpress/notices';
import { store as preferencesStore } from '@wordpress/preferences';

/**
* Internal dependencies
*/
import PostPanelRow from '../post-panel-row';

/**
* Internal dependencies
*/
Expand All @@ -19,11 +25,6 @@ import ResetDefaultTemplate from './reset-default-template';
import { unlock } from '../../lock-unlock';
import CreateNewTemplate from './create-new-template';

const POPOVER_PROPS = {
className: 'editor-post-template__dropdown',
placement: 'bottom-start',
};

export default function BlockThemeControl( { id } ) {
const {
isTemplateHidden,
Expand Down Expand Up @@ -63,6 +64,21 @@ export default function BlockThemeControl( { id } ) {
[]
);

const [ popoverAnchor, setPopoverAnchor ] = useState( null );
// Memoize popoverProps to avoid returning a new object every time.
const popoverProps = useMemo(
() => ( {
// Anchor the popover to the middle of the entire row so that it doesn't
// move around when the label changes.
anchor: popoverAnchor,
className: 'editor-post-template__dropdown',
placement: 'left-start',
offset: 36,
shift: true,
} ),
[ popoverAnchor ]
);

if ( ! hasResolved ) {
return null;
}
Expand Down Expand Up @@ -90,60 +106,62 @@ export default function BlockThemeControl( { id } ) {
}
};
return (
<DropdownMenu
popoverProps={ POPOVER_PROPS }
focusOnMount
toggleProps={ {
size: 'compact',
variant: 'tertiary',
tooltipPosition: 'middle left',
} }
label={ __( 'Template options' ) }
text={ decodeEntities( template.title ) }
icon={ null }
>
{ ( { onClose } ) => (
<>
<MenuGroup>
{ canCreateTemplate && (
<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
<DropdownMenu
popoverProps={ popoverProps }
focusOnMount
toggleProps={ {
size: 'compact',
variant: 'tertiary',
tooltipPosition: 'middle left',
} }
label={ __( 'Template options' ) }
text={ decodeEntities( template.title ) }
icon={ null }
>
{ ( { onClose } ) => (
<>
<MenuGroup>
{ canCreateTemplate && (
<MenuItem
onClick={ () => {
onNavigateToEntityRecord( {
postId: template.id,
postType: 'wp_template',
} );
onClose();
mayShowTemplateEditNotice();
} }
>
{ __( 'Edit template' ) }
</MenuItem>
) }

<SwapTemplateButton onClick={ onClose } />
<ResetDefaultTemplate onClick={ onClose } />
{ canCreateTemplate && (
<CreateNewTemplate onClick={ onClose } />
) }
</MenuGroup>
<MenuGroup>
<MenuItem
icon={ ! isTemplateHidden ? check : undefined }
isSelected={ ! isTemplateHidden }
role="menuitemcheckbox"
onClick={ () => {
onNavigateToEntityRecord( {
postId: template.id,
postType: 'wp_template',
} );
onClose();
mayShowTemplateEditNotice();
setRenderingMode(
isTemplateHidden
? 'template-locked'
: 'post-only'
);
} }
>
{ __( 'Edit template' ) }
{ __( 'Show template' ) }
</MenuItem>
) }

<SwapTemplateButton onClick={ onClose } />
<ResetDefaultTemplate onClick={ onClose } />
{ canCreateTemplate && (
<CreateNewTemplate onClick={ onClose } />
) }
</MenuGroup>
<MenuGroup>
<MenuItem
icon={ ! isTemplateHidden ? check : undefined }
isSelected={ ! isTemplateHidden }
role="menuitemcheckbox"
onClick={ () => {
setRenderingMode(
isTemplateHidden
? 'template-locked'
: 'post-only'
);
} }
>
{ __( 'Show template' ) }
</MenuItem>
</MenuGroup>
</>
) }
</DropdownMenu>
</MenuGroup>
</>
) }
</DropdownMenu>
</PostPanelRow>
);
}
46 changes: 31 additions & 15 deletions packages/editor/src/components/post-template/classic-theme.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,7 @@ import { store as noticesStore } from '@wordpress/notices';
import { store as editorStore } from '../../store';
import CreateNewTemplateModal from './create-new-template-modal';
import { useAllowSwitchingTemplates } from './hooks';

const POPOVER_PROPS = {
className: 'editor-post-template__dropdown',
placement: 'bottom-start',
};
import PostPanelRow from '../post-panel-row';

function PostTemplateToggle( { isOpen, onClick } ) {
const templateTitle = useSelect( ( select ) => {
Expand Down Expand Up @@ -216,17 +212,37 @@ function PostTemplateDropdownContent( { onClose } ) {
}

function ClassicThemeControl() {
const [ popoverAnchor, setPopoverAnchor ] = useState( null );
// Memoize popoverProps to avoid returning a new object every time.
const popoverProps = useMemo(
() => ( {
// Anchor the popover to the middle of the entire row so that it doesn't
// move around when the label changes.
anchor: popoverAnchor,
className: 'editor-post-template__dropdown',
placement: 'left-start',
offset: 36,
shift: true,
} ),
[ popoverAnchor ]
);

return (
<Dropdown
popoverProps={ POPOVER_PROPS }
focusOnMount
renderToggle={ ( { isOpen, onToggle } ) => (
<PostTemplateToggle isOpen={ isOpen } onClick={ onToggle } />
) }
renderContent={ ( { onClose } ) => (
<PostTemplateDropdownContent onClose={ onClose } />
) }
/>
<PostPanelRow label={ __( 'Template' ) } ref={ setPopoverAnchor }>
<Dropdown
popoverProps={ popoverProps }
focusOnMount
renderToggle={ ( { isOpen, onToggle } ) => (
<PostTemplateToggle
isOpen={ isOpen }
onClick={ onToggle }
/>
) }
renderContent={ ( { onClose } ) => (
<PostTemplateDropdownContent onClose={ onClose } />
) }
/>
</PostPanelRow>
);
}

Expand Down
14 changes: 2 additions & 12 deletions packages/editor/src/components/post-template/panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { store as coreStore } from '@wordpress/core-data';

/**
Expand All @@ -11,7 +10,6 @@ import { store as coreStore } from '@wordpress/core-data';
import { store as editorStore } from '../../store';
import ClassicThemeControl from './classic-theme';
import BlockThemeControl from './block-theme';
import PostPanelRow from '../post-panel-row';

/**
* Displays the template controls based on the current editor settings and user permissions.
Expand Down Expand Up @@ -65,19 +63,11 @@ export default function PostTemplatePanel() {
}, [] );

if ( ( ! isBlockTheme || ! canViewTemplates ) && isVisible ) {
return (
<PostPanelRow label={ __( 'Template' ) }>
<ClassicThemeControl />
</PostPanelRow>
);
return <ClassicThemeControl />;
}

if ( isBlockTheme && !! templateId ) {
return (
<PostPanelRow label={ __( 'Template' ) }>
<BlockThemeControl id={ templateId } />
</PostPanelRow>
);
return <BlockThemeControl id={ templateId } />;
}
return null;
}

0 comments on commit ed4df79

Please sign in to comment.