@wordpress/block-library 9.14.0 → 9.15.0

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>
 		</>
 	);
 };

package/src/video/edit.js

@@ -8,25 +8,21 @@ import clsx from 'clsx';
  */
 import { isBlobURL } from '@wordpress/blob';
 import {
-	BaseControl,
-	Button,
 	Disabled,
-	PanelBody,
 	Spinner,
 	Placeholder,
+	__experimentalToolsPanel as ToolsPanel,
 } from '@wordpress/components';
 import {
 	BlockControls,
 	BlockIcon,
 	InspectorControls,
 	MediaPlaceholder,
-	MediaUpload,
-	MediaUploadCheck,
 	MediaReplaceFlow,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
 import { useDispatch } from '@wordpress/data';
 import { video as icon } from '@wordpress/icons';
@@ -35,15 +31,18 @@ import { store as noticesStore } from '@wordpress/notices';
 /**
  * Internal dependencies
  */
+import PosterImage from './poster-image';
 import { createUpgradedEmbedBlock } from '../embed/util';
-import { useUploadMediaFromBlobURL } from '../utils/hooks';
+import {
+	useUploadMediaFromBlobURL,
+	useToolsPanelDropdownMenuProps,
+} from '../utils/hooks';
 import VideoCommonSettings from './edit-common-settings';
 import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
 
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
-const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
 function VideoEdit( {
 	isSelected: isSingleSelected,
@@ -55,9 +54,9 @@ function VideoEdit( {
 } ) {
 	const instanceId = useInstanceId( VideoEdit );
 	const videoPlayer = useRef();
-	const posterImageButton = useRef();
 	const { id, controls, poster, src, tracks } = attributes;
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	useUploadMediaFromBlobURL( {
 		url: temporaryURL,
@@ -174,19 +173,6 @@ function VideoEdit( {
 		);
 	}
 
-	function onSelectPoster( image ) {
-		setAttributes( { poster: image.url } );
-	}
-
-	function onRemovePoster() {
-		setAttributes( { poster: undefined } );
-
-		// Move focus back to the Media Upload button.
-		posterImageButton.current.focus();
-	}
-
-	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
-
 	return (
 		<>
 			{ isSingleSelected && (
@@ -214,63 +200,31 @@ function VideoEdit( {
 				</>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Settings' ) }>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							autoplay: false,
+							controls: true,
+							loop: false,
+							muted: false,
+							playsInline: false,
+							preload: 'metadata',
+							poster: '',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
 					<VideoCommonSettings
 						setAttributes={ setAttributes }
 						attributes={ attributes }
 					/>
-					<MediaUploadCheck>
-						<div className="editor-video-poster-control">
-							<BaseControl.VisualLabel>
-								{ __( 'Poster image' ) }
-							</BaseControl.VisualLabel>
-							<MediaUpload
-								title={ __( 'Select poster image' ) }
-								onSelect={ onSelectPoster }
-								allowedTypes={
-									VIDEO_POSTER_ALLOWED_MEDIA_TYPES
-								}
-								render={ ( { open } ) => (
-									<Button
-										__next40pxDefaultSize
-										variant="primary"
-										onClick={ open }
-										ref={ posterImageButton }
-										aria-describedby={
-											videoPosterDescription
-										}
-									>
-										{ ! poster
-											? __( 'Select' )
-											: __( 'Replace' ) }
-									</Button>
-								) }
-							/>
-							<p id={ videoPosterDescription } hidden>
-								{ poster
-									? sprintf(
-											/* translators: %s: poster image URL. */
-											__(
-												'The current poster image url is %s'
-											),
-											poster
-									  )
-									: __(
-											'There is no poster image currently selected'
-									  ) }
-							</p>
-							{ !! poster && (
-								<Button
-									__next40pxDefaultSize
-									onClick={ onRemovePoster }
-									variant="tertiary"
-								>
-									{ __( 'Remove' ) }
-								</Button>
-							) }
-						</div>
-					</MediaUploadCheck>
-				</PanelBody>
+					<PosterImage
+						poster={ poster }
+						setAttributes={ setAttributes }
+						instanceId={ instanceId }
+					/>
+				</ToolsPanel>
 			</InspectorControls>
 			<figure { ...blockProps }>
 				{ /*

package/src/video/poster-image.js

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
+import {
+	Button,
+	BaseControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+
+function PosterImage( { poster, setAttributes, instanceId } ) {
+	const posterImageButton = useRef();
+	const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
+
+	const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;
+
+	function onSelectPoster( image ) {
+		setAttributes( { poster: image.url } );
+	}
+
+	function onRemovePoster() {
+		setAttributes( { poster: undefined } );
+
+		// Move focus back to the Media Upload button.
+		posterImageButton.current.focus();
+	}
+
+	return (
+		<ToolsPanelItem
+			label={ __( 'Poster image' ) }
+			isShownByDefault
+			hasValue={ () => !! poster }
+			onDeselect={ () => {
+				setAttributes( { poster: '' } );
+			} }
+		>
+			<MediaUploadCheck>
+				<div className="editor-video-poster-control">
+					<BaseControl.VisualLabel>
+						{ __( 'Poster image' ) }
+					</BaseControl.VisualLabel>
+					<MediaUpload
+						title={ __( 'Select poster image' ) }
+						onSelect={ onSelectPoster }
+						allowedTypes={ VIDEO_POSTER_ALLOWED_MEDIA_TYPES }
+						render={ ( { open } ) => (
+							<Button
+								__next40pxDefaultSize
+								variant="primary"
+								onClick={ open }
+								ref={ posterImageButton }
+								aria-describedby={ videoPosterDescription }
+							>
+								{ ! poster ? __( 'Select' ) : __( 'Replace' ) }
+							</Button>
+						) }
+					/>
+					<p id={ videoPosterDescription } hidden>
+						{ poster
+							? sprintf(
+									/* translators: %s: poster image URL. */
+									__( 'The current poster image url is %s' ),
+									poster
+							  )
+							: __(
+									'There is no poster image currently selected'
+							  ) }
+					</p>
+					{ !! poster && (
+						<Button
+							__next40pxDefaultSize
+							onClick={ onRemovePoster }
+							variant="tertiary"
+						>
+							{ __( 'Remove' ) }
+						</Button>
+					) }
+				</div>
+			</MediaUploadCheck>
+		</ToolsPanelItem>
+	);
+}
+
+export default PosterImage;

package/src/video/tracks-editor.js

@@ -323,7 +323,7 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 														openFileDialog();
 													} }
 												>
-													{ __( 'Upload' ) }
+													{ _x( 'Upload', 'verb' ) }
 												</MenuItem>
 											);
 										} }

package/tsconfig.json

@@ -2,8 +2,6 @@
 	"$schema": "https://json.schemastore.org/tsconfig.json",
 	"extends": "../../tsconfig.base.json",
 	"compilerOptions": {
-		"rootDir": "src",
-		"declarationDir": "build-types",
 		"types": [ "gutenberg-env" ],
 		"strictNullChecks": true
 	},

package/src/post-template/editor.scss

@@ -1,7 +0,0 @@
-.editor-styles-wrapper {
-	ul.wp-block-post-template {
-		padding-left: 0;
-		margin-left: 0;
-		list-style: none;
-	}
-}