diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js
index b83993831f5ef2..3a334def3e52c1 100644
--- a/packages/block-library/src/latest-posts/edit.js
+++ b/packages/block-library/src/latest-posts/edit.js
@@ -52,6 +52,7 @@ import {
MAX_EXCERPT_LENGTH,
MAX_POSTS_COLUMNS,
} from './constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
/**
* Module Constants
@@ -79,6 +80,8 @@ function getFeaturedImageDetails( post, size ) {
export default function LatestPostsEdit( { attributes, setAttributes } ) {
const instanceId = useInstanceId( LatestPostsEdit );
+ const dropdownMenuProps = useToolsPanelDropdownMenuProps(); // Moved inside the component
+
const {
postsToShow,
order,
@@ -238,9 +241,10 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
excerptLength: MIN_EXCERPT_LENGTH, // Default length for the excerpt
} )
}
+ dropdownMenuProps={ dropdownMenuProps }
>
displayPostContent !== undefined }
+ hasValue={ () => !! displayPostContent }
label={ __( 'Post content' ) }
onDeselect={ () =>
setAttributes( { displayPostContent: false } )
@@ -253,13 +257,18 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
onChange={ ( value ) =>
setAttributes( { displayPostContent: value } )
}
- className={
- displayPostContent
- ? 'latest-posts-toggle-control-margin-bottom'
- : ''
- }
/>
- { displayPostContent && (
+
+ { displayPostContent && (
+ displayPostContentRadio !== undefined }
+ label={ __( 'Show' ) }
+ onDeselect={ () =>
+ setAttributes( {
+ displayPostContentRadio: 'excerpt',
+ } )
+ }
+ >
- ) }
- { displayPostContent &&
- displayPostContentRadio === 'excerpt' && (
+
+ ) }
+ { displayPostContent &&
+ displayPostContentRadio === 'excerpt' && (
+ excerptLength !== undefined }
+ label={ __( 'Max number of words' ) }
+ onDeselect={ () =>
+ setAttributes( {
+ excerptLength: MIN_EXCERPT_LENGTH,
+ } )
+ }
+ >
- ) }
-
+
+ ) }
displayAuthor !== undefined }
+ hasValue={ () => !! displayAuthor }
label={ __( 'Display author name' ) }
onDeselect={ () =>
setAttributes( { displayAuthor: false } )
@@ -317,11 +337,10 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) {
onChange={ ( value ) =>
setAttributes( { displayAuthor: value } )
}
- className="latest-posts-toggle-control-margin-bottom"
/>
displayPostDate !== undefined }
+ hasValue={ () => !! displayPostDate }
label={ __( 'Display post date' ) }
onDeselect={ () =>
setAttributes( { displayPostDate: false } )
diff --git a/packages/block-library/src/latest-posts/editor.scss b/packages/block-library/src/latest-posts/editor.scss
index 26ef7bcd55b5ff..fe901480974461 100644
--- a/packages/block-library/src/latest-posts/editor.scss
+++ b/packages/block-library/src/latest-posts/editor.scss
@@ -18,11 +18,3 @@
padding-left: 0;
}
}
-
-.latest-posts-toggle-control-margin-bottom {
- margin-bottom: 15px !important;
-}
-
-.latest-posts-toggle-control-margin-top {
- margin-top: 15px !important;
-}