diff --git a/packages/block-library/src/latest-posts/constants.js b/packages/block-library/src/latest-posts/constants.js index 70c34448a3bff6..bcb367ce9d7448 100644 --- a/packages/block-library/src/latest-posts/constants.js +++ b/packages/block-library/src/latest-posts/constants.js @@ -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; diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 82f0661d04e40f..95c72ea538b0ef 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -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'; @@ -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 @@ -77,6 +81,8 @@ function getFeaturedImageDetails( post, size ) { export default function LatestPostsEdit( { attributes, setAttributes } ) { const instanceId = useInstanceId( LatestPostsEdit ); + const dropdownMenuProps = useToolsPanelDropdownMenuProps(); + const { postsToShow, order, @@ -227,68 +233,137 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { const hasPosts = !! latestPosts?.length; const inspectorControls = ( - - + setAttributes( { + displayPostContent: false, + displayPostContentRadio: 'excerpt', + excerptLength: DEFAULT_EXCERPT_LENGTH, + } ) + } + dropdownMenuProps={ dropdownMenuProps } + > + !! displayPostContent } label={ __( 'Post content' ) } - checked={ displayPostContent } - onChange={ ( value ) => - setAttributes( { displayPostContent: value } ) + onDeselect={ () => + setAttributes( { displayPostContent: false } ) } - /> + isShownByDefault + > + + setAttributes( { displayPostContent: value } ) + } + /> + { displayPostContent && ( - 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 + > + + setAttributes( { + displayPostContentRadio: value, + } ) + } + /> + ) } { displayPostContent && displayPostContentRadio === 'excerpt' && ( - + 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 + > + + setAttributes( { excerptLength: value } ) + } + min={ MIN_EXCERPT_LENGTH } + max={ MAX_EXCERPT_LENGTH } + /> + ) } - + - - + setAttributes( { + displayAuthor: false, + displayPostDate: false, + } ) + } + dropdownMenuProps={ dropdownMenuProps } + > + !! displayAuthor } label={ __( 'Display author name' ) } - checked={ displayAuthor } - onChange={ ( value ) => - setAttributes( { displayAuthor: value } ) + onDeselect={ () => + setAttributes( { displayAuthor: false } ) } - /> - + + setAttributes( { displayAuthor: value } ) + } + /> + + !! displayPostDate } label={ __( 'Display post date' ) } - checked={ displayPostDate } - onChange={ ( value ) => - setAttributes( { displayPostDate: value } ) + onDeselect={ () => + setAttributes( { displayPostDate: false } ) } - /> - - + isShownByDefault + > + + setAttributes( { displayPostDate: value } ) + } + /> + +