@wordpress/block-library 9.13.1-next.cd6172eb0.0 → 9.15.0

package/src/table/edit.js

@@ -20,12 +20,13 @@ import {
 import { __ } from '@wordpress/i18n';
 import {
 	Button,
-	PanelBody,
 	Placeholder,
 	TextControl,
 	ToggleControl,
 	ToolbarDropdownMenu,
 	__experimentalHasSplitBorders as hasSplitBorders,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import {
 	alignLeft,
@@ -56,6 +57,7 @@ import {
 	isEmptyTableSection,
 } from './state';
 import { Caption } from '../utils/caption';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const ALIGNMENT_CONTROLS = [
 	{
@@ -108,6 +110,8 @@ function TableEdit( {
 	const tableRef = useRef();
 	const [ hasTableCreated, setHasTableCreated ] = useState( false );
 
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	/**
 	 * Updates the initial column count used for table creation.
 	 *
@@ -473,33 +477,67 @@ function TableEdit( {
 				</>
 			) }
 			<InspectorControls>
-				<PanelBody
-					title={ __( 'Settings' ) }
-					className="blocks-table-settings"
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							hasFixedLayout: true,
+							head: [],
+							foot: [],
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
 				>
-					<ToggleControl
-						__nextHasNoMarginBottom
+					<ToolsPanelItem
+						hasValue={ () => hasFixedLayout !== true }
 						label={ __( 'Fixed width table cells' ) }
-						checked={ !! hasFixedLayout }
-						onChange={ onChangeFixedLayout }
-					/>
+						onDeselect={ () =>
+							setAttributes( { hasFixedLayout: true } )
+						}
+						isShownByDefault
+					>
+						<ToggleControl
+							__nextHasNoMarginBottom
+							label={ __( 'Fixed width table cells' ) }
+							checked={ !! hasFixedLayout }
+							onChange={ onChangeFixedLayout }
+						/>
+					</ToolsPanelItem>
 					{ ! isEmpty && (
 						<>
-							<ToggleControl
-								__nextHasNoMarginBottom
+							<ToolsPanelItem
+								hasValue={ () => head && head.length }
 								label={ __( 'Header section' ) }
-								checked={ !! ( head && head.length ) }
-								onChange={ onToggleHeaderSection }
-							/>
-							<ToggleControl
-								__nextHasNoMarginBottom
+								onDeselect={ () =>
+									setAttributes( { head: [] } )
+								}
+								isShownByDefault
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Header section' ) }
+									checked={ !! ( head && head.length ) }
+									onChange={ onToggleHeaderSection }
+								/>
+							</ToolsPanelItem>
+							<ToolsPanelItem
+								hasValue={ () => foot && foot.length }
 								label={ __( 'Footer section' ) }
-								checked={ !! ( foot && foot.length ) }
-								onChange={ onToggleFooterSection }
-							/>
+								onDeselect={ () =>
+									setAttributes( { foot: [] } )
+								}
+								isShownByDefault
+							>
+								<ToggleControl
+									__nextHasNoMarginBottom
+									label={ __( 'Footer section' ) }
+									checked={ !! ( foot && foot.length ) }
+									onChange={ onToggleFooterSection }
+								/>
+							</ToolsPanelItem>
 						</>
 					) }
-				</PanelBody>
+				</ToolsPanel>
 			</InspectorControls>
 			{ ! isEmpty && (
 				<table

package/src/table-of-contents/block.json

@@ -62,57 +62,5 @@
 			}
 		}
 	},
-	"example": {
-		"innerBlocks": [
-			{
-				"name": "core/heading",
-				"attributes": {
-					"level": 2,
-					"content": "Heading"
-				}
-			},
-			{
-				"name": "core/heading",
-				"attributes": {
-					"level": 3,
-					"content": "Subheading"
-				}
-			},
-			{
-				"name": "core/heading",
-				"attributes": {
-					"level": 2,
-					"content": "Heading"
-				}
-			},
-			{
-				"name": "core/heading",
-				"attributes": {
-					"level": 3,
-					"content": "Subheading"
-				}
-			}
-		],
-		"attributes": {
-			"headings": [
-				{
-					"content": "Heading",
-					"level": 2
-				},
-				{
-					"content": "Subheading",
-					"level": 3
-				},
-				{
-					"content": "Heading",
-					"level": 2
-				},
-				{
-					"content": "Subheading",
-					"level": 3
-				}
-			]
-		}
-	},
 	"style": "wp-block-table-of-contents"
 }

package/src/table-of-contents/edit.js

@@ -122,7 +122,7 @@ export default function TableOfContentsEdit( {
 									'Only including headings from the current page (if the post is paginated).'
 							  )
 							: __(
-									'Toggle to only include headings from the current page (if the post is paginated).'
+									'Include headings from all pages (if the post is paginated).'
 							  )
 					}
 				/>

package/src/table-of-contents/index.js

@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import { tableOfContents as icon } from '@wordpress/icons';
 
 /**
@@ -19,6 +20,58 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/heading',
+				attributes: {
+					level: 2,
+					content: __( 'Heading' ),
+				},
+			},
+			{
+				name: 'core/heading',
+				attributes: {
+					level: 3,
+					content: __( 'Subheading' ),
+				},
+			},
+			{
+				name: 'core/heading',
+				attributes: {
+					level: 2,
+					content: __( 'Heading' ),
+				},
+			},
+			{
+				name: 'core/heading',
+				attributes: {
+					level: 3,
+					content: __( 'Subheading' ),
+				},
+			},
+		],
+		attributes: {
+			headings: [
+				{
+					content: __( 'Heading' ),
+					level: 2,
+				},
+				{
+					content: __( 'Subheading' ),
+					level: 3,
+				},
+				{
+					content: __( 'Heading' ),
+					level: 2,
+				},
+				{
+					content: __( 'Subheading' ),
+					level: 3,
+				},
+			],
+		},
+	},
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/tag-cloud/edit.js

@@ -4,14 +4,14 @@
 import {
 	Flex,
 	FlexItem,
-	PanelBody,
 	ToggleControl,
 	SelectControl,
 	RangeControl,
 	__experimentalUnitControl as UnitControl,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
-	__experimentalVStack as VStack,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 	Disabled,
 } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
@@ -24,6 +24,11 @@ import {
 import ServerSideRender from '@wordpress/server-side-render';
 import { store as coreStore } from '@wordpress/core-data';
 
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
 /**
  * Minimum number of tags a user can show using this block.
  *
@@ -51,6 +56,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 	} = attributes;
 
 	const [ availableUnits ] = useSettings( 'spacing.units' );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	// The `pt` unit is used as the default value and is therefore
 	// always considered an available unit.
@@ -118,10 +124,26 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<VStack
-					spacing={ 4 }
-					className="wp-block-tag-cloud__inspector-settings"
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						taxonomy: 'post_tag',
+						showTagCounts: false,
+						numberOfTags: 45,
+						smallestFontSize: '8pt',
+						largestFontSize: '22pt',
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () => taxonomy !== 'post_tag' }
+					label={ __( 'Taxonomy' ) }
+					onDeselect={ () =>
+						setAttributes( { taxonomy: 'post_tag' } )
+					}
+					isShownByDefault
 				>
 					<SelectControl
 						__nextHasNoMarginBottom
@@ -133,6 +155,20 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 							setAttributes( { taxonomy: selectedTaxonomy } )
 						}
 					/>
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					hasValue={ () =>
+						smallestFontSize !== '8pt' || largestFontSize !== '22pt'
+					}
+					label={ __( 'Font size' ) }
+					onDeselect={ () =>
+						setAttributes( {
+							smallestFontSize: '8pt',
+							largestFontSize: '22pt',
+						} )
+					}
+					isShownByDefault
+				>
 					<Flex gap={ 4 }>
 						<FlexItem isBlock>
 							<UnitControl
@@ -167,6 +203,13 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 							/>
 						</FlexItem>
 					</Flex>
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					hasValue={ () => numberOfTags !== 45 }
+					label={ __( 'Number of tags' ) }
+					onDeselect={ () => setAttributes( { numberOfTags: 45 } ) }
+					isShownByDefault
+				>
 					<RangeControl
 						__nextHasNoMarginBottom
 						__next40pxDefaultSize
@@ -179,6 +222,15 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 						max={ MAX_TAGS }
 						required
 					/>
+				</ToolsPanelItem>
+				<ToolsPanelItem
+					hasValue={ () => showTagCounts !== false }
+					label={ __( 'Show tag counts' ) }
+					onDeselect={ () =>
+						setAttributes( { showTagCounts: false } )
+					}
+					isShownByDefault
+				>
 					<ToggleControl
 						__nextHasNoMarginBottom
 						label={ __( 'Show tag counts' ) }
@@ -187,8 +239,8 @@ function TagCloudEdit( { attributes, setAttributes } ) {
 							setAttributes( { showTagCounts: ! showTagCounts } )
 						}
 					/>
-				</VStack>
-			</PanelBody>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 

package/src/tag-cloud/editor.scss

@@ -9,11 +9,3 @@
 	border: none;
 	border-radius: inherit;
 }
-
-.wp-block-tag-cloud__inspector-settings {
-	.components-base-control,
-	.components-base-control:last-child {
-		// Cancel out extra margins added by block inspector
-		margin-bottom: 0;
-	}
-}

package/src/video/edit-common-settings.js

@@ -2,7 +2,11 @@
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { ToggleControl, SelectControl } from '@wordpress/components';
+import {
+	ToggleControl,
+	SelectControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
 import { useMemo, useCallback, Platform } from '@wordpress/element';
 
 const options = [
@@ -47,50 +51,104 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 
 	return (
 		<>
-			<ToggleControl
-				__nextHasNoMarginBottom
+			<ToolsPanelItem
 				label={ __( 'Autoplay' ) }
-				onChange={ toggleFactory.autoplay }
-				checked={ !! autoplay }
-				help={ getAutoplayHelp }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! autoplay }
+				onDeselect={ () => {
+					setAttributes( { autoplay: false } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Autoplay' ) }
+					onChange={ toggleFactory.autoplay }
+					checked={ !! autoplay }
+					help={ getAutoplayHelp }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Loop' ) }
-				onChange={ toggleFactory.loop }
-				checked={ !! loop }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! loop }
+				onDeselect={ () => {
+					setAttributes( { loop: false } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Loop' ) }
+					onChange={ toggleFactory.loop }
+					checked={ !! loop }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Muted' ) }
-				onChange={ toggleFactory.muted }
-				checked={ !! muted }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! muted }
+				onDeselect={ () => {
+					setAttributes( { muted: false } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Muted' ) }
+					onChange={ toggleFactory.muted }
+					checked={ !! muted }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Playback controls' ) }
-				onChange={ toggleFactory.controls }
-				checked={ !! controls }
-			/>
-			<ToggleControl
-				__nextHasNoMarginBottom
-				/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
+				isShownByDefault
+				hasValue={ () => ! controls }
+				onDeselect={ () => {
+					setAttributes( { controls: true } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					label={ __( 'Playback controls' ) }
+					onChange={ toggleFactory.controls }
+					checked={ !! controls }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Play inline' ) }
-				onChange={ toggleFactory.playsInline }
-				checked={ !! playsInline }
-				help={ __(
-					'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
-				) }
-			/>
-			<SelectControl
-				__next40pxDefaultSize
-				__nextHasNoMarginBottom
+				isShownByDefault
+				hasValue={ () => !! playsInline }
+				onDeselect={ () => {
+					setAttributes( { playsInline: false } );
+				} }
+			>
+				<ToggleControl
+					__nextHasNoMarginBottom
+					/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
+					label={ __( 'Play inline' ) }
+					onChange={ toggleFactory.playsInline }
+					checked={ playsInline }
+					help={ __(
+						'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
+					) }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
 				label={ __( 'Preload' ) }
-				value={ preload }
-				onChange={ onChangePreload }
-				options={ options }
-				hideCancelButton
-			/>
+				isShownByDefault
+				hasValue={ () => preload !== 'metadata' }
+				onDeselect={ () => {
+					setAttributes( { preload: 'metadata' } );
+				} }
+			>
+				<SelectControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Preload' ) }
+					value={ preload }
+					onChange={ onChangePreload }
+					options={ options }
+					hideCancelButton
+				/>
+			</ToolsPanelItem>
 		</>
 	);
 };