diff --git a/packages/block-library/src/latest-comments/edit.js b/packages/block-library/src/latest-comments/edit.js
index 85e66cf2e9dc6..432cd389efacc 100644
--- a/packages/block-library/src/latest-comments/edit.js
+++ b/packages/block-library/src/latest-comments/edit.js
@@ -4,13 +4,19 @@
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
import {
Disabled,
- PanelBody,
RangeControl,
ToggleControl,
+ __experimentalToolsPanel as ToolsPanel,
+ __experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import ServerSideRender from '@wordpress/server-side-render';
import { __ } from '@wordpress/i18n';
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
/**
* Minimum number of comments a user can show using this block.
*
@@ -36,49 +42,103 @@ export default function LatestComments( { attributes, setAttributes } ) {
},
};
+ const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
return (
-
- {
+ setAttributes( {
+ commentsToShow: 5,
+ displayAvatar: true,
+ displayDate: true,
+ displayExcerpt: true,
+ } );
+ } }
+ dropdownMenuProps={ dropdownMenuProps }
+ >
+ ! displayAvatar }
label={ __( 'Display avatar' ) }
- checked={ displayAvatar }
- onChange={ () =>
- setAttributes( { displayAvatar: ! displayAvatar } )
+ onDeselect={ () =>
+ setAttributes( { displayAvatar: true } )
}
- />
-
+
+ setAttributes( {
+ displayAvatar: ! displayAvatar,
+ } )
+ }
+ />
+
+
+ ! displayDate }
label={ __( 'Display date' ) }
- checked={ displayDate }
- onChange={ () =>
- setAttributes( { displayDate: ! displayDate } )
+ onDeselect={ () =>
+ setAttributes( { displayDate: true } )
}
- />
-
+
+ setAttributes( { displayDate: ! displayDate } )
+ }
+ />
+
+
+ ! displayExcerpt }
label={ __( 'Display excerpt' ) }
- checked={ displayExcerpt }
- onChange={ () =>
- setAttributes( {
- displayExcerpt: ! displayExcerpt,
- } )
+ onDeselect={ () =>
+ setAttributes( { displayExcerpt: true } )
}
- />
-
+
+ setAttributes( {
+ displayExcerpt: ! displayExcerpt,
+ } )
+ }
+ />
+
+
+ commentsToShow !== 5 }
label={ __( 'Number of comments' ) }
- value={ commentsToShow }
- onChange={ ( value ) =>
- setAttributes( { commentsToShow: value } )
+ onDeselect={ () =>
+ setAttributes( { commentsToShow: 5 } )
}
- min={ MIN_COMMENTS }
- max={ MAX_COMMENTS }
- required
- />
-
+ isShownByDefault
+ >
+
+ setAttributes( { commentsToShow: value } )
+ }
+ min={ MIN_COMMENTS }
+ max={ MAX_COMMENTS }
+ required
+ />
+
+