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.

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

Latest Post Block: Refactor settings panel to use ToolsPanel #67956

Merged
merged 19 commits into from
Jan 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
1 change: 1 addition & 0 deletions packages/block-library/src/latest-posts/constants.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export const MIN_EXCERPT_LENGTH = 10;
export const MAX_EXCERPT_LENGTH = 100;
export const MAX_POSTS_COLUMNS = 6;
export const DEFAULT_EXCERPT_LENGTH = 55;
163 changes: 119 additions & 44 deletions packages/block-library/src/latest-posts/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ import {
ToolbarGroup,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __, _x, sprintf } from '@wordpress/i18n';
import { dateI18n, format, getSettings } from '@wordpress/date';
Expand Down Expand Up @@ -49,7 +51,9 @@ import {
MIN_EXCERPT_LENGTH,
MAX_EXCERPT_LENGTH,
MAX_POSTS_COLUMNS,
DEFAULT_EXCERPT_LENGTH,
} from './constants';
import { useToolsPanelDropdownMenuProps } from '../utils/hooks';

/**
* Module Constants
Expand Down Expand Up @@ -77,6 +81,8 @@ function getFeaturedImageDetails( post, size ) {

export default function LatestPostsEdit( { attributes, setAttributes } ) {
const instanceId = useInstanceId( LatestPostsEdit );
const dropdownMenuProps = useToolsPanelDropdownMenuProps();

const {
postsToShow,
order,
Expand Down Expand Up @@ -227,68 +233,137 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
const hasPosts = !! latestPosts?.length;
const inspectorControls = (
<InspectorControls>
<PanelBody title={ __( 'Post content' ) }>
<ToggleControl
__nextHasNoMarginBottom
<ToolsPanel
label={ __( 'Post content' ) }
resetAll={ () =>
setAttributes( {
displayPostContent: false,
displayPostContentRadio: 'excerpt',
excerptLength: DEFAULT_EXCERPT_LENGTH,
} )
}
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
hasValue={ () => !! displayPostContent }
label={ __( 'Post content' ) }
checked={ displayPostContent }
onChange={ ( value ) =>
setAttributes( { displayPostContent: value } )
onDeselect={ () =>
setAttributes( { displayPostContent: false } )
}
/>
isShownByDefault
>
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
<ToggleControl
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
__nextHasNoMarginBottom
label={ __( 'Post content' ) }
checked={ displayPostContent }
onChange={ ( value ) =>
setAttributes( { displayPostContent: value } )
}
/>
</ToolsPanelItem>
{ displayPostContent && (
<RadioControl
<ToolsPanelItem
hasValue={ () => displayPostContentRadio !== 'excerpt' }
label={ __( 'Show' ) }
selected={ displayPostContentRadio }
options={ [
{ label: __( 'Excerpt' ), value: 'excerpt' },
{
label: __( 'Full post' ),
value: 'full_post',
},
] }
onChange={ ( value ) =>
onDeselect={ () =>
setAttributes( {
displayPostContentRadio: value,
displayPostContentRadio: 'excerpt',
} )
}
/>
isShownByDefault
>
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
<RadioControl
label={ __( 'Show' ) }
selected={ displayPostContentRadio }
options={ [
{ label: __( 'Excerpt' ), value: 'excerpt' },
{
label: __( 'Full post' ),
value: 'full_post',
},
] }
onChange={ ( value ) =>
setAttributes( {
displayPostContentRadio: value,
} )
}
/>
</ToolsPanelItem>
) }
{ displayPostContent &&
displayPostContentRadio === 'excerpt' && (
<RangeControl
__nextHasNoMarginBottom
__next40pxDefaultSize
<ToolsPanelItem
hasValue={ () =>
excerptLength !== DEFAULT_EXCERPT_LENGTH
}
label={ __( 'Max number of words' ) }
value={ excerptLength }
onChange={ ( value ) =>
setAttributes( { excerptLength: value } )
onDeselect={ () =>
setAttributes( {
excerptLength: DEFAULT_EXCERPT_LENGTH,
} )
}
min={ MIN_EXCERPT_LENGTH }
max={ MAX_EXCERPT_LENGTH }
/>
isShownByDefault
>
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
<RangeControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Max number of words' ) }
value={ excerptLength }
onChange={ ( value ) =>
setAttributes( { excerptLength: value } )
}
min={ MIN_EXCERPT_LENGTH }
max={ MAX_EXCERPT_LENGTH }
/>
</ToolsPanelItem>
) }
</PanelBody>
</ToolsPanel>

<PanelBody title={ __( 'Post meta' ) }>
<ToggleControl
__nextHasNoMarginBottom
<ToolsPanel
label={ __( 'Post meta' ) }
resetAll={ () =>
setAttributes( {
displayAuthor: false,
displayPostDate: false,
} )
}
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
hasValue={ () => !! displayAuthor }
label={ __( 'Display author name' ) }
checked={ displayAuthor }
onChange={ ( value ) =>
setAttributes( { displayAuthor: value } )
onDeselect={ () =>
setAttributes( { displayAuthor: false } )
}
/>
<ToggleControl
__nextHasNoMarginBottom
isShownByDefault
>
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display author name' ) }
checked={ displayAuthor }
onChange={ ( value ) =>
setAttributes( { displayAuthor: value } )
}
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => !! displayPostDate }
label={ __( 'Display post date' ) }
checked={ displayPostDate }
onChange={ ( value ) =>
setAttributes( { displayPostDate: value } )
onDeselect={ () =>
setAttributes( { displayPostDate: false } )
}
/>
</PanelBody>

isShownByDefault
>
t-hamano marked this conversation as resolved.
Show resolved Hide resolved
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display post date' ) }
checked={ displayPostDate }
onChange={ ( value ) =>
setAttributes( { displayPostDate: value } )
}
/>
</ToolsPanelItem>
</ToolsPanel>
<PanelBody title={ __( 'Featured image' ) }>
<ToggleControl
__nextHasNoMarginBottom
Expand Down
Loading