Skip to content

Commit

Permalink
Latest Post Block: Refactor settings panel to use ToolsPanel (#67956)
Browse files Browse the repository at this point in the history 
* Image size fix in lightbox

* Revert "Image size fix in lightbox"

This reverts commit 63f81c1.

* Update toolspanel to latest posts block

* Design changes

* feedback changes

* Feedback changes

* Feedback updates

* Feedback changes

* Feedback changes

Co-authored-by: karthick-murugan <karthickmurugan@git.wordpress.org>
Co-authored-by: fabiankaegy <fabiankaegy@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
  • Loading branch information
@karthick-murugan @fabiankaegy @t-hamano
4 people authored Jan 21, 2025
1 parent 34f09ca commit 5b7f7ec
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 44 deletions.
1 change: 1 addition & 0 deletions packages/block-library/src/latest-posts/constants.js
View file
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
View file
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,
} )
}
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
hasValue={ () => !! displayPostContent }
label={ __( 'Post content' ) }
checked={ displayPostContent }
onChange={ ( value ) =>
setAttributes( { displayPostContent: value } )
onDeselect={ () =>
setAttributes( { displayPostContent: false } )
}
/>
isShownByDefault
>
<ToggleControl
__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
>
<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
>
<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,
} )
}
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
hasValue={ () => !! displayAuthor }
label={ __( 'Display author name' ) }
checked={ displayAuthor }
onChange={ ( value ) =>
setAttributes( { displayAuthor: value } )
onDeselect={ () =>
setAttributes( { displayAuthor: false } )
}
/>
<ToggleControl
__nextHasNoMarginBottom
isShownByDefault
>
<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
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Display post date' ) }
checked={ displayPostDate }
onChange={ ( value ) =>
setAttributes( { displayPostDate: value } )
}
/>
</ToolsPanelItem>
</ToolsPanel>
<PanelBody title={ __( 'Featured image' ) }>
<ToggleControl
__nextHasNoMarginBottom
Expand Down

1 comment on commit 5b7f7ec

@github-actions
Copy link

Choose a reason for hiding this comment

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

Flaky tests detected in 5b7f7ec.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12882938726
📝 Reported issues:

Please sign in to comment.