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 + /> + +