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

[pull] trunk from WordPress:trunk #84

Merged
merged 2 commits into from
Dec 13, 2024
Merged

[pull] trunk from WordPress:trunk #84

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aca8187
Storybook: Fix warnings in Layout document (#67865)
tyxla Dec 13, 2024
cbe7ef4
Refactor "Settings" panel of Date block to use ToolsPanel instead of …
Sukhendu2002 Dec 13, 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
97 changes: 72 additions & 25 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 @@ -26,7 +26,8 @@ import {
ToolbarGroup,
ToolbarButton,
ToggleControl,
PanelBody,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __, _x, sprintf } from '@wordpress/i18n';
import { edit } from '@wordpress/icons';
Expand Down Expand Up @@ -160,16 +161,36 @@ export default function PostDateEdit( {
</BlockControls>

<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<DateFormatPicker
format={ format }
defaultFormat={ siteFormat }
onChange={ ( nextFormat ) =>
setAttributes( { format: nextFormat } )
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setAttributes( {
format: undefined,
isLink: false,
displayType: 'date',
} );
} }
>
<ToolsPanelItem
hasValue={ () =>
format !== undefined && format !== siteFormat
}
label={ __( 'Date Format' ) }
onDeselect={ () =>
setAttributes( { format: undefined } )
}
/>
<ToggleControl
__nextHasNoMarginBottom
isShownByDefault
>
<DateFormatPicker
format={ format }
defaultFormat={ siteFormat }
onChange={ ( nextFormat ) =>
setAttributes( { format: nextFormat } )
}
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => isLink !== false }
label={
postType?.labels.singular_name
? sprintf(
Expand All @@ -179,23 +200,49 @@ export default function PostDateEdit( {
)
: __( 'Link to post' )
}
onChange={ () => setAttributes( { isLink: ! isLink } ) }
checked={ isLink }
/>
<ToggleControl
__nextHasNoMarginBottom
onDeselect={ () => setAttributes( { isLink: false } ) }
isShownByDefault
>
<ToggleControl
__nextHasNoMarginBottom
label={
postType?.labels.singular_name
? sprintf(
// translators: %s: Name of the post type e.g: "post".
__( 'Link to %s' ),
postType.labels.singular_name.toLowerCase()
)
: __( 'Link to post' )
}
onChange={ () =>
setAttributes( { isLink: ! isLink } )
}
checked={ isLink }
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => displayType !== 'date' }
label={ __( 'Display last modified date' ) }
onChange={ ( value ) =>
setAttributes( {
displayType: value ? 'modified' : 'date',
} )
onDeselect={ () =>
setAttributes( { displayType: 'date' } )
}
checked={ displayType === 'modified' }
help={ __(
'Only shows if the post has been modified'
) }
/>
</PanelBody>
isShownByDefault
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display last modified date' ) }
onChange={ ( value ) =>
setAttributes( {
displayType: value ? 'modified' : 'date',
} )
}
checked={ displayType === 'modified' }
help={ __(
'Only shows if the post has been modified'
) }
/>
</ToolsPanelItem>
</ToolsPanel>
</InspectorControls>

<div { ...blockProps }>{ postDate }</div>
Expand Down
60 changes: 31 additions & 29 deletions storybook/stories/foundations/layout.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Meta } from '@storybook/addon-docs/blocks';
import { Meta } from '@storybook/blocks';
import areas from './static/areas.svg';
import pageLayoutExample1 from './static/page-layout-example-1.svg';
import pageLayoutExample2 from './static/page-layout-example-2.svg';
Expand Down Expand Up @@ -27,32 +27,34 @@ At the highest level admin pages are comprised of _areas_, that can be arranged
Areas can be combined in different ways depending on the use case. Here are some examples.

<table>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar, Content Frame and Preview Frame
<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Preview Frame
<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Design section.
</td>
</tr>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Content Frame
<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and multiple Content Frames
<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />

Multiple content frames can be utilised as required.
</td>
</tr>
<tbody>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar, Content Frame and Preview Frame
<img src={ pageLayoutExample1 } alt="Diagram illustrating an example of the 'Sidebar, Content Frame and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Styles section of the Site Editor, and in the Pages and Templates sections when List layout is selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Preview Frame
<img src={ pageLayoutExample2 } alt="Diagram illustrating an example of the 'Sidebar and Preview Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Design section.
</td>
</tr>
<tr>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and Content Frame
<img src={ pageLayoutExample3 } alt="Diagram illustrating an example of the 'Sidebar and Content Frame' arrangement" width="100%" />

A demonstration of this arrangement can be found in the Patterns and Templates sections of the Site Editor, or in the Pages section when Table or Grid layout are selected.
</td>
<td style={{verticalAlign: 'top', width: '50%'}}>
#### Sidebar and multiple Content Frames
<img src={ pageLayoutExample4 } alt="Diagram illustrating an example of the 'Sidebar and multiple Content Frames' arrangement" width="100%" />

Multiple content frames can be utilised as required.
</td>
</tr>
</tbody>
</table>
Loading