diff --git a/packages/block-library/src/latest-comments/edit.js b/packages/block-library/src/latest-comments/edit.js
index 85e66cf2e9dc6..222162c03a295 100644
--- a/packages/block-library/src/latest-comments/edit.js
+++ b/packages/block-library/src/latest-comments/edit.js
@@ -4,9 +4,10 @@
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';
@@ -39,46 +40,98 @@ export default function LatestComments( { attributes, setAttributes } ) {
return (
-
- {
+ setAttributes( {
+ commentsToShow: 5,
+ displayAvatar: true,
+ displayDate: true,
+ displayExcerpt: true,
+ } );
+ } }
+ className="latest-comments-tools-panel"
+ >
+ displayAvatar !== true }
label={ __( 'Display avatar' ) }
- checked={ displayAvatar }
- onChange={ () =>
- setAttributes( { displayAvatar: ! displayAvatar } )
+ onDeselect={ () =>
+ setAttributes( { displayAvatar: true } )
}
- />
-
+
+ setAttributes( {
+ displayAvatar: ! displayAvatar,
+ } )
+ }
+ />
+
+
+ displayDate !== true }
label={ __( 'Display date' ) }
- checked={ displayDate }
- onChange={ () =>
- setAttributes( { displayDate: ! displayDate } )
+ onDeselect={ () =>
+ setAttributes( { displayDate: true } )
}
- />
-
+
+ setAttributes( { displayDate: ! displayDate } )
+ }
+ />
+
+
+ displayExcerpt !== true }
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
+ />
+
+