@wordpress/block-library 9.15.1 → 9.17.0

package/src/social-links/style.scss

@@ -70,8 +70,9 @@
 .wp-block-social-link {
 	display: block;
 	border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized.
-	transition: transform 0.1s ease;
-	@include reduce-motion("transition");
+	@media not (prefers-reduced-motion) {
+		transition: transform 0.1s ease;
+	}
 
 	// Dimensions.
 	height: auto;
@@ -80,7 +81,6 @@
 		align-items: center;
 		display: flex;
 		line-height: 0;
-		transition: transform 0.1s ease;
 	}
 
 	&:hover {

package/src/spacer/controls.js

@@ -24,6 +24,7 @@ import { View } from '@wordpress/primitives';
  */
 import { unlock } from '../lock-unlock';
 import { MIN_SPACER_SIZE } from './constants';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 const { useSpacingSizes } = unlock( blockEditorPrivateApis );
 
@@ -43,10 +44,6 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 		defaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 },
 	} );
 
-	const handleOnChange = ( unprocessedValue ) => {
-		onChange( unprocessedValue.all );
-	};
-
 	// Force the unit to update to `px` when the Spacer is being resized.
 	const [ parsedQuantity, parsedUnit ] =
 		parseQuantityAndUnitFromRawValue( value );
@@ -56,23 +53,24 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 
 	return (
 		<>
-			{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+			{ spacingSizes?.length < 2 ? (
 				<UnitControl
 					id={ inputId }
 					isResetValueOnUnitChange
 					min={ MIN_SPACER_SIZE }
-					onChange={ handleOnChange }
+					onChange={ onChange }
 					value={ computedValue }
 					units={ units }
 					label={ label }
 					__next40pxDefaultSize
 				/>
-			) }
-			{ spacingSizes?.length > 0 && (
+			) : (
 				<View className="tools-panel-item-spacing">
 					<SpacingSizesControl
 						values={ { all: computedValue } }
-						onChange={ handleOnChange }
+						onChange={ ( { all } ) => {
+							onChange( all );
+						} }
 						label={ label }
 						sides={ [ 'all' ] }
 						units={ units }
@@ -93,6 +91,8 @@ export default function SpacerControls( {
 	width,
 	isResizing,
 } ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
 	return (
 		<InspectorControls>
 			<ToolsPanel
@@ -103,6 +103,7 @@ export default function SpacerControls( {
 						height: '100px',
 					} );
 				} }
+				dropdownMenuProps={ dropdownMenuProps }
 			>
 				{ orientation === 'horizontal' && (
 					<ToolsPanelItem

package/src/spacer/edit.js

@@ -16,7 +16,7 @@ import {
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { View } from '@wordpress/primitives';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -124,6 +124,9 @@ const SpacerEdit = ( {
 	const onResizeStart = () => toggleSelection( false );
 	const onResizeStop = () => toggleSelection( true );
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
 	const handleOnVerticalResizeStop = ( newHeight ) => {
 		onResizeStop();
 
@@ -256,11 +259,19 @@ const SpacerEdit = ( {
 	};
 
 	useEffect( () => {
+		// To avoid interfering with undo/redo operations any changes in this
+		// effect must not make history and should be preceded by
+		// `__unstableMarkNextChangeAsNotPersistent()`.
+		const setAttributesCovertly = ( nextAttributes ) => {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( nextAttributes );
+		};
+
 		if (
 			isFlexLayout &&
 			selfStretch !== 'fill' &&
 			selfStretch !== 'fit' &&
-			! flexSize
+			flexSize === undefined
 		) {
 			if ( inheritedOrientation === 'horizontal' ) {
 				// If spacer is moving from a vertical container to a horizontal container,
@@ -269,7 +280,7 @@ const SpacerEdit = ( {
 					getCustomValueFromPreset( width, spacingSizes ) ||
 					getCustomValueFromPreset( height, spacingSizes ) ||
 					'100px';
-				setAttributes( {
+				setAttributesCovertly( {
 					width: '0px',
 					style: {
 						...blockStyle,
@@ -285,7 +296,7 @@ const SpacerEdit = ( {
 					getCustomValueFromPreset( height, spacingSizes ) ||
 					getCustomValueFromPreset( width, spacingSizes ) ||
 					'100px';
-				setAttributes( {
+				setAttributesCovertly( {
 					height: '0px',
 					style: {
 						...blockStyle,
@@ -301,26 +312,16 @@ const SpacerEdit = ( {
 			isFlexLayout &&
 			( selfStretch === 'fill' || selfStretch === 'fit' )
 		) {
-			if ( inheritedOrientation === 'horizontal' ) {
-				setAttributes( {
-					width: undefined,
-				} );
-			} else {
-				setAttributes( {
-					height: undefined,
-				} );
-			}
+			setAttributesCovertly(
+				inheritedOrientation === 'horizontal'
+					? { width: undefined }
+					: { height: undefined }
+			);
 		} else if ( ! isFlexLayout && ( selfStretch || flexSize ) ) {
-			if ( inheritedOrientation === 'horizontal' ) {
-				setAttributes( {
-					width: flexSize,
-				} );
-			} else {
-				setAttributes( {
-					height: flexSize,
-				} );
-			}
-			setAttributes( {
+			setAttributesCovertly( {
+				...( inheritedOrientation === 'horizontal'
+					? { width: flexSize }
+					: { height: flexSize } ),
 				style: {
 					...blockStyle,
 					layout: {
@@ -342,6 +343,7 @@ const SpacerEdit = ( {
 		setAttributes,
 		spacingSizes,
 		width,
+		__unstableMarkNextChangeAsNotPersistent,
 	] );
 
 	return (

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

@@ -10,11 +10,12 @@ import {
 } from '@wordpress/block-editor';
 import { createBlock } from '@wordpress/blocks';
 import {
-	PanelBody,
 	Placeholder,
 	ToggleControl,
 	ToolbarButton,
 	ToolbarGroup,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { renderToString } from '@wordpress/element';
@@ -29,6 +30,7 @@ import { tableOfContents as icon } from '@wordpress/icons';
 import TableOfContentsList from './list';
 import { linearToNestedHeadingList } from './utils';
 import { useObserveHeadings } from './hooks';
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 /** @typedef {import('./utils').HeadingData} HeadingData */
 
@@ -79,7 +81,7 @@ export default function TableOfContentsEdit( {
 	);
 
 	const { replaceBlocks } = useDispatch( blockEditorStore );
-
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const headingTree = linearToNestedHeadingList( headings );
 
 	const toolbarControls = canInsertList && (
@@ -108,25 +110,42 @@ export default function TableOfContentsEdit( {
 
 	const inspectorControls = (
 		<InspectorControls>
-			<PanelBody title={ __( 'Settings' ) }>
-				<ToggleControl
-					__nextHasNoMarginBottom
+			<ToolsPanel
+				label={ __( 'Settings' ) }
+				resetAll={ () => {
+					setAttributes( {
+						onlyIncludeCurrentPage: false,
+					} );
+				} }
+				dropdownMenuProps={ dropdownMenuProps }
+			>
+				<ToolsPanelItem
+					hasValue={ () => !! onlyIncludeCurrentPage }
 					label={ __( 'Only include current page' ) }
-					checked={ onlyIncludeCurrentPage }
-					onChange={ ( value ) =>
-						setAttributes( { onlyIncludeCurrentPage: value } )
-					}
-					help={
-						onlyIncludeCurrentPage
-							? __(
-									'Only including headings from the current page (if the post is paginated).'
-							  )
-							: __(
-									'Include headings from all pages (if the post is paginated).'
-							  )
+					onDeselect={ () =>
+						setAttributes( { onlyIncludeCurrentPage: false } )
 					}
-				/>
-			</PanelBody>
+					isShownByDefault
+				>
+					<ToggleControl
+						__nextHasNoMarginBottom
+						label={ __( 'Only include current page' ) }
+						checked={ onlyIncludeCurrentPage }
+						onChange={ ( value ) =>
+							setAttributes( { onlyIncludeCurrentPage: value } )
+						}
+						help={
+							onlyIncludeCurrentPage
+								? __(
+										'Only including headings from the current page (if the post is paginated).'
+								  )
+								: __(
+										'Include headings from all pages (if the post is paginated).'
+								  )
+						}
+					/>
+				</ToolsPanelItem>
+			</ToolsPanel>
 		</InspectorControls>
 	);
 

package/src/template-part/edit/advanced-controls.js

@@ -10,27 +10,7 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { TemplatePartImportControls } from './import-controls';
-
-const htmlElementMessages = {
-	header: __(
-		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
-	),
-	main: __(
-		'The <main> element should be used for the primary content of your document only.'
-	),
-	section: __(
-		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-	),
-	article: __(
-		'The <article> element should represent a self-contained, syndicatable portion of the document.'
-	),
-	aside: __(
-		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-	),
-	footer: __(
-		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
-	),
-};
+import { htmlElementMessages } from '../../utils/messages';
 
 export function TemplatePartAdvancedControls( {
 	tagName,

package/src/utils/messages.js

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export const htmlElementMessages = {
+	article: __(
+		'The <article> element should represent a self-contained, syndicatable portion of the document.'
+	),
+	aside: __(
+		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+	),
+	div: __(
+		'The <div> element should only be used if the block is a design element with no semantic meaning.'
+	),
+	footer: __(
+		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+	),
+	header: __(
+		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+	),
+	main: __(
+		'The <main> element should be used for the primary content of your document only.'
+	),
+	nav: __(
+		'The <nav> element should be used to identify groups of links that are intended to be used for website or page content navigation.'
+	),
+	section: __(
+		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+	),
+};

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

@@ -125,7 +125,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => {
 					/* 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 }
+					checked={ !! playsInline }
 					help={ __(
 						'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
 					) }

package/src/video/edit.native.js

@@ -72,7 +72,7 @@ class VideoEdit extends Component {
 			this.finishMediaUploadWithFailure.bind( this );
 		this.updateMediaProgress = this.updateMediaProgress.bind( this );
 		this.onVideoPressed = this.onVideoPressed.bind( this );
-		this.onVideoContanerLayout = this.onVideoContanerLayout.bind( this );
+		this.onVideoContainerLayout = this.onVideoContainerLayout.bind( this );
 		this.onFocusCaption = this.onFocusCaption.bind( this );
 	}
 
@@ -179,7 +179,7 @@ class VideoEdit extends Component {
 		}
 	}
 
-	onVideoContanerLayout( event ) {
+	onVideoContainerLayout( event ) {
 		const { width } = event.nativeEvent.layout;
 		const height = width / VIDEO_ASPECT_RATIO;
 		if ( height !== this.state.videoContainerHeight ) {
@@ -321,7 +321,7 @@ class VideoEdit extends Component {
 
 							return (
 								<View
-									onLayout={ this.onVideoContanerLayout }
+									onLayout={ this.onVideoContainerLayout }
 									style={ containerStyle }
 								>
 									{ showVideo && (

package/src/video/test/transforms.native.js

@@ -15,12 +15,12 @@ const initialHtml = `
 <figure class="wp-block-video"><video controls src="https://i.cloudup.com/YtZFJbuQCE.mov"></video><figcaption class="wp-element-caption">Cloudup video</figcaption></figure>
 <!-- /wp:video -->`;
 
-const tranformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
 const nonMediaTransforms = [ 'File' ];
 const blockTransforms = [
 	'Cover',
 	'Media & Text',
-	...tranformsWithInnerBlocks,
+	...transformsWithInnerBlocks,
 	...nonMediaTransforms,
 ];
 
@@ -31,7 +31,8 @@ describe( `${ block } block transforms`, () => {
 		const screen = await initializeEditor( { initialHtml } );
 		const newBlock = await transformBlock( screen, block, blockTransform, {
 			isMediaBlock: ! nonMediaTransforms.includes( blockTransform ),
-			hasInnerBlocks: tranformsWithInnerBlocks.includes( blockTransform ),
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
 		} );
 		expect( newBlock ).toBeVisible();
 		expect( getEditorHtml() ).toMatchSnapshot();