Skip to content

Hide Post Date toolbar when child of Query in contentOnly mode #71707

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

Merged
tellthemachines merged 1 commit into from
Sep 17, 2025
Merged

Hide Post Date toolbar when child of Query in contentOnly mode #71707

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
117 changes: 64 additions & 53 deletions packages/block-library/src/post-date/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {
InspectorControls,
store as blockEditorStore,
useBlockProps,
useBlockEditingMode,
__experimentalDateFormatPicker as DateFormatPicker,
__experimentalPublishDateTimePicker as PublishDateTimePicker,
} from '@wordpress/block-editor';
Expand Down Expand Up @@ -99,6 +100,8 @@ export default function PostDateEdit( {
[ postTypeSlug ]
);

const blockEditingMode = useBlockEditingMode();

let postDate = (
<time dateTime={ dateI18n( 'c', datetime ) } ref={ setPopoverAnchor }>
{ format === 'human-diff'
Expand All @@ -120,61 +123,69 @@ export default function PostDateEdit( {

return (
<>
<BlockControls group="block">
<AlignmentControl
value={ textAlign }
onChange={ ( nextAlign ) => {
setAttributes( { textAlign: nextAlign } );
} }
/>
{ displayType !== 'modified' && ! isDescendentOfQueryLoop && (
<ToolbarGroup>
<Dropdown
popoverProps={ popoverProps }
renderContent={ ( { onClose } ) => (
<PublishDateTimePicker
title={
displayType === 'date'
? __( 'Publish Date' )
: __( 'Date' )
}
currentDate={ datetime }
onChange={ ( newDatetime ) =>
setAttributes( {
datetime: newDatetime,
} )
}
is12Hour={ is12HourFormat(
siteTimeFormat
{ ( blockEditingMode === 'default' ||
Copy link
Member

@ramonjd ramonjd Sep 17, 2025

Choose a reason for hiding this comment

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

Optional readability change by extracting conditions:

const canShowBlockControls = blockEditingMode === 'default' || ! isDescendentOfQueryLoop;
const canShowDatePicker = displayType !== 'modified' && ! isDescendentOfQueryLoop;

! isDescendentOfQueryLoop ) && (
<BlockControls group="block">
<AlignmentControl
value={ textAlign }
onChange={ ( nextAlign ) => {
setAttributes( { textAlign: nextAlign } );
} }
/>

{ displayType !== 'modified' &&
! isDescendentOfQueryLoop && (
<ToolbarGroup>
<Dropdown
popoverProps={ popoverProps }
renderContent={ ( { onClose } ) => (
<PublishDateTimePicker
title={
displayType === 'date'
? __( 'Publish Date' )
: __( 'Date' )
}
currentDate={ datetime }
onChange={ ( newDatetime ) =>
setAttributes( {
datetime: newDatetime,
} )
}
is12Hour={ is12HourFormat(
siteTimeFormat
) }
onClose={ onClose }
dateOrder={
/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
_x( 'dmy', 'date order' )
}
/>
) }
onClose={ onClose }
dateOrder={
/* translators: Order of day, month, and year. Available formats are 'dmy', 'mdy', and 'ymd'. */
_x( 'dmy', 'date order' )
}
renderToggle={ ( { isOpen, onToggle } ) => {
const openOnArrowDown = ( event ) => {
if (
! isOpen &&
event.keyCode === DOWN
) {
event.preventDefault();
onToggle();
}
};
return (
<ToolbarButton
aria-expanded={ isOpen }
icon={ edit }
title={ __( 'Change Date' ) }
onClick={ onToggle }
onKeyDown={ openOnArrowDown }
/>
);
} }
/>
) }
renderToggle={ ( { isOpen, onToggle } ) => {
const openOnArrowDown = ( event ) => {
if ( ! isOpen && event.keyCode === DOWN ) {
event.preventDefault();
onToggle();
}
};
return (
<ToolbarButton
aria-expanded={ isOpen }
icon={ edit }
title={ __( 'Change Date' ) }
onClick={ onToggle }
onKeyDown={ openOnArrowDown }
/>
);
} }
/>
</ToolbarGroup>
) }
</BlockControls>
</ToolbarGroup>
) }
</BlockControls>
) }

<InspectorControls>
<ToolsPanel
Expand Down
Loading