@wordpress/block-library 8.6.0 → 8.8.0

package/src/quote/test/edit.native.js

@@ -0,0 +1,92 @@
+/**
+ * External dependencies
+ */
+import {
+	addBlock,
+	getBlock,
+	initializeEditor,
+	setupCoreBlocks,
+	getEditorHtml,
+	fireEvent,
+	within,
+	waitFor,
+	changeAndSelectTextOfRichText,
+} from 'test/helpers';
+
+/**
+ * WordPress dependencies
+ */
+import { ENTER } from '@wordpress/keycodes';
+
+setupCoreBlocks();
+
+describe( 'Quote', () => {
+	it( 'should produce expected markup for multiline text', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Quote' );
+		const quoteBlock = getBlock( screen, 'Quote' );
+		// A layout event must be explicitly dispatched in BlockList component,
+		// otherwise the inner blocks are not rendered.
+		fireEvent(
+			within( quoteBlock ).getByTestId( 'block-list-wrapper' ),
+			'layout',
+			{
+				nativeEvent: {
+					layout: {
+						width: 320,
+					},
+				},
+			}
+		);
+		// Await inner blocks to be rendered
+		const citationBlock = await waitFor( () =>
+			screen.getByPlaceholderText( 'Add citation' )
+		);
+
+		// Act
+		fireEvent.press( quoteBlock );
+		// screen.debug();
+		let quoteTextInput =
+			within( quoteBlock ).getByPlaceholderText( 'Start writing…' );
+		const string = 'A great statement.';
+		changeAndSelectTextOfRichText( quoteTextInput, string, {
+			selectionStart: string.length,
+			selectionEnd: string.length,
+		} );
+		fireEvent( quoteTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+		quoteTextInput =
+			within( quoteBlock ).getAllByPlaceholderText(
+				'Start writing…'
+			)[ 1 ];
+		changeAndSelectTextOfRichText( quoteTextInput, 'Again.' );
+		const citationTextInput =
+			within( citationBlock ).getByPlaceholderText( 'Add citation' );
+		changeAndSelectTextOfRichText( citationTextInput, 'A person', {
+			selectionStart: 2,
+			selectionEnd: 2,
+		} );
+		fireEvent( citationTextInput, 'onKeyDown', {
+			nativeEvent: {},
+			preventDefault() {},
+			keyCode: ENTER,
+		} );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchInlineSnapshot( `
+		"<!-- wp:quote -->
+		<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+		<p>A great statement.</p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>Again.</p>
+		<!-- /wp:paragraph --><cite>A <br>person</cite></blockquote>
+		<!-- /wp:quote -->"
+	` );
+	} );
+} );

package/src/search/index.php

@@ -116,7 +116,7 @@ function render_block_core_search( $attributes ) {
 
 			$button_internal_markup =
 				'<svg class="search-icon" viewBox="0 0 24 24" width="24" height="24">
-					<path d="M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"></path>
+					<path d="M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z"></path>
 				</svg>';
 		}
 

package/src/search/style.scss

@@ -1,5 +1,8 @@
+$button-spacing-x: $grid-unit-10 + math.div($grid-unit-05, 2); // 10px
+$button-spacing-y: math.div($grid-unit-15, 2); // 6px
+
 .wp-block-search__button {
-	margin-left: 0.625em;
+	margin-left: $button-spacing-x;
 	word-break: normal;
 
 	&.has-icon {
@@ -7,8 +10,8 @@
 	}
 
 	svg {
-		min-width: 1.5em;
-		min-height: 1.5em;
+		min-width: $grid-unit-30;
+		min-height: $grid-unit-30;
 		fill: currentColor;
 		vertical-align: text-bottom;
 	}
@@ -17,8 +20,8 @@
 // These rules are set to zero specificity to keep the default styles for search buttons.
 // They are needed for backwards compatibility.
 :where(.wp-block-search__button) {
-	border: 1px solid #ccc;
-	padding: 0.375em 0.625em;
+	border: 1px solid $gray-400;
+	padding: $button-spacing-y $button-spacing-x;
 }
 
 .wp-block-search__inside-wrapper {
@@ -33,12 +36,12 @@
 }
 
 .wp-block-search__input {
-	padding: 8px;
+	padding: $grid-unit-10;
 	flex-grow: 1;
 	margin-left: 0;
 	margin-right: 0;
-	min-width: 3em;
-	border: 1px solid #949494;
+	min-width: 3rem;
+	border: 1px solid $gray-600;
 	// !important used to forcibly prevent undesired application of
 	// text-decoration styles on the input field.
 	text-decoration: unset !important;
@@ -52,13 +55,14 @@
 
 // We are lowering the specificity so that the button element can override the rule for the button inside the search block.
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
-	padding: 4px;
-	border: 1px solid #949494;
+	padding: $grid-unit-05;
+	border: 1px solid $gray-600;
+	box-sizing: border-box;
 
 	.wp-block-search__input {
 		border-radius: 0;
 		border: none;
-		padding: 0 0 0 0.25em;
+		padding: 0 $grid-unit-05;
 
 		&:focus {
 			outline: none;
@@ -67,7 +71,7 @@
 
 	// For lower specificity.
 	:where(.wp-block-search__button) {
-		padding: 0.125em 0.5em;
+		padding: $grid-unit-05 $grid-unit-10;
 	}
 }
 

package/src/shortcode/editor.scss

@@ -1,13 +1,34 @@
 [data-type="core/shortcode"] {
-	.block-editor-plain-text {
-		max-height: 250px;
-	}
-
 	&.components-placeholder {
 		min-height: 0;
 	}
 }
 
+// The editing view for the Shortcode block is equivalent to block UI.
+// Therefore we increase specificity to avoid theme styles bleeding in.
 .blocks-shortcode__textarea {
-	@include input-control;
+	font-family: $editor-html-font !important;
+	color: $gray-900 !important;
+	background: $white !important;
+	padding: $grid-unit-15 !important;
+	border: $border-width solid $gray-900 !important;
+	box-shadow: none !important;
+	border-radius: $radius-block-ui !important;
+	box-sizing: border-box;
+	max-height: 250px;
+	resize: none;
+
+	/* Fonts smaller than 16px causes mobile safari to zoom. */
+	font-size: $mobile-text-min-font-size !important;
+	@include break-small {
+		font-size: $default-font-size !important;
+	}
+
+	&:focus {
+		border-color: var(--wp-admin-theme-color) !important;
+		box-shadow: 0 0 0 ($border-width-focus - $border-width) var(--wp-admin-theme-color) !important;
+
+		// Windows High Contrast mode will show this outline, but not the box-shadow.
+		outline: 2px solid transparent !important;
+	}
 }

package/src/spacer/controls.js

@@ -2,14 +2,21 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { InspectorControls, useSetting } from '@wordpress/block-editor';
 import {
+	InspectorControls,
+	useSetting,
+	__experimentalSpacingSizesControl as SpacingSizesControl,
+	isValueSpacingPreset,
+} from '@wordpress/block-editor';
+import {
+	BaseControl,
 	PanelBody,
 	__experimentalUseCustomUnits as useCustomUnits,
 	__experimentalUnitControl as UnitControl,
 	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 } from '@wordpress/components';
 import { useInstanceId } from '@wordpress/compose';
+import { View } from '@wordpress/primitives';
 
 /**
  * Internal dependencies
@@ -18,7 +25,7 @@ import { MIN_SPACER_SIZE } from './constants';
 
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
-
+	const spacingSizes = useSetting( 'spacing.spacingSizes' );
 	// In most contexts the spacer size cannot meaningfully be set to a
 	// percentage, since this is relative to the parent container. This
 	// unit is disabled from the UI.
@@ -38,28 +45,46 @@ function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	} );
 
 	const handleOnChange = ( unprocessedValue ) => {
-		onChange( unprocessedValue );
+		onChange( unprocessedValue.all );
 	};
 
 	// Force the unit to update to `px` when the Spacer is being resized.
 	const [ parsedQuantity, parsedUnit ] =
 		parseQuantityAndUnitFromRawValue( value );
-	const computedValue = [
-		parsedQuantity,
-		isResizing ? 'px' : parsedUnit,
-	].join( '' );
+	const computedValue = isValueSpacingPreset( value )
+		? value
+		: [ parsedQuantity, isResizing ? 'px' : parsedUnit ].join( '' );
 
 	return (
-		<UnitControl
-			label={ label }
-			id={ inputId }
-			isResetValueOnUnitChange
-			min={ MIN_SPACER_SIZE }
-			onChange={ handleOnChange }
-			__unstableInputWidth={ '80px' }
-			value={ computedValue }
-			units={ units }
-		/>
+		<>
+			{ ( ! spacingSizes || spacingSizes?.length === 0 ) && (
+				<BaseControl label={ label } id={ inputId }>
+					<UnitControl
+						id={ inputId }
+						isResetValueOnUnitChange
+						min={ MIN_SPACER_SIZE }
+						onChange={ handleOnChange }
+						style={ { maxWidth: 80 } }
+						value={ computedValue }
+						units={ units }
+					/>
+				</BaseControl>
+			) }
+
+			{ spacingSizes?.length > 0 && (
+				<View className="tools-panel-item-spacing">
+					<SpacingSizesControl
+						values={ { all: computedValue } }
+						onChange={ handleOnChange }
+						label={ label }
+						sides={ [ 'all' ] }
+						units={ units }
+						allowReset={ false }
+						splitOnAxis={ false }
+					/>
+				</View>
+			) }
+		</>
 	);
 }
 

package/src/spacer/edit.js

@@ -6,10 +6,15 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import {
+	useBlockProps,
+	getSpacingPresetCssVar,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
 import { ResizableBox } from '@wordpress/components';
 import { useState, useEffect } from '@wordpress/element';
 import { View } from '@wordpress/primitives';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -78,8 +83,21 @@ const SpacerEdit = ( {
 	setAttributes,
 	toggleSelection,
 	context,
+	__unstableParentLayout: parentLayout,
+	className,
 } ) => {
+	const disableCustomSpacingSizes = useSelect( ( select ) => {
+		const editorSettings = select( blockEditorStore ).getSettings();
+		return editorSettings?.disableCustomSpacingSizes;
+	} );
 	const { orientation } = context;
+	const { orientation: parentOrientation, type } = parentLayout || {};
+	// If the spacer is inside a flex container, it should either inherit the orientation
+	// of the parent or use the flex default orientation.
+	const inheritedOrientation =
+		! parentOrientation && type === 'flex'
+			? 'horizontal'
+			: parentOrientation || orientation;
 	const { height, width } = attributes;
 
 	const [ isResizing, setIsResizing ] = useState( false );
@@ -104,12 +122,19 @@ const SpacerEdit = ( {
 
 	const style = {
 		height:
-			orientation === 'horizontal'
+			inheritedOrientation === 'horizontal'
 				? 24
-				: temporaryHeight || height || undefined,
+				: temporaryHeight ||
+				  getSpacingPresetCssVar( height ) ||
+				  undefined,
 		width:
-			orientation === 'horizontal'
-				? temporaryWidth || width || undefined
+			inheritedOrientation === 'horizontal'
+				? temporaryWidth || getSpacingPresetCssVar( width ) || undefined
+				: undefined,
+		// In vertical flex containers, the spacer shrinks to nothing without a minimum width.
+		minWidth:
+			inheritedOrientation === 'vertical' && type === 'flex'
+				? 48
 				: undefined,
 	};
 
@@ -166,7 +191,7 @@ const SpacerEdit = ( {
 	};
 
 	useEffect( () => {
-		if ( orientation === 'horizontal' && ! width ) {
+		if ( inheritedOrientation === 'horizontal' && ! width ) {
 			setAttributes( {
 				height: '0px',
 				width: '72px',
@@ -176,14 +201,21 @@ const SpacerEdit = ( {
 
 	return (
 		<>
-			<View { ...useBlockProps( { style } ) }>
-				{ resizableBoxWithOrientation( orientation ) }
+			<View
+				{ ...useBlockProps( {
+					style,
+					className: classnames( className, {
+						'custom-sizes-disabled': disableCustomSpacingSizes,
+					} ),
+				} ) }
+			>
+				{ resizableBoxWithOrientation( inheritedOrientation ) }
 			</View>
 			<SpacerControls
 				setAttributes={ setAttributes }
 				height={ temporaryHeight || height }
 				width={ temporaryWidth || width }
-				orientation={ orientation }
+				orientation={ inheritedOrientation }
 				isResizing={ isResizing }
 			/>
 		</>

package/src/spacer/editor.scss

@@ -17,7 +17,8 @@
 }
 
 .wp-block-spacer.is-hovered .block-library-spacer__resize-container,
-.block-library-spacer__resize-container.has-show-handle {
+.block-library-spacer__resize-container.has-show-handle,
+.wp-block-spacer.is-selected.custom-sizes-disabled {
 	background: rgba($black, 0.1);
 
 	.is-dark-theme & {

package/src/spacer/save.js

@@ -1,15 +1,15 @@
 /**
  * WordPress dependencies
  */
-import { useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, getSpacingPresetCssVar } from '@wordpress/block-editor';
 
 export default function save( { attributes: { height, width } } ) {
 	return (
 		<div
 			{ ...useBlockProps.save( {
 				style: {
-					height,
-					width,
+					height: getSpacingPresetCssVar( height ),
+					width: getSpacingPresetCssVar( width ),
 				},
 				'aria-hidden': true,
 			} ) }

package/src/style.scss

@@ -11,6 +11,8 @@
 @import "./comments-pagination/style.scss";
 @import "./comment-template/style.scss";
 @import "./cover/style.scss";
+@import "./details/style.scss";
+@import "./details-summary/style.scss";
 @import "./embed/style.scss";
 @import "./file/style.scss";
 @import "./gallery/style.scss";
@@ -32,6 +34,7 @@
 @import "./post-featured-image/style.scss";
 @import "./post-navigation-link/style.scss";
 @import "./post-terms/style.scss";
+@import "./post-time-to-read/style.scss";
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";

package/src/table/state.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
 
 /**
@@ -82,33 +77,45 @@ export function updateSelectedCell( state, selection, updateCell ) {
 	const { sectionName: selectionSectionName, rowIndex: selectionRowIndex } =
 		selection;
 
-	return mapValues( tableSections, ( section, sectionName ) => {
-		if ( selectionSectionName && selectionSectionName !== sectionName ) {
-			return section;
-		}
-
-		return section.map( ( row, rowIndex ) => {
-			if ( selectionRowIndex && selectionRowIndex !== rowIndex ) {
-				return row;
+	return Object.fromEntries(
+		Object.entries( tableSections ).map( ( [ sectionName, section ] ) => {
+			if (
+				selectionSectionName &&
+				selectionSectionName !== sectionName
+			) {
+				return [ sectionName, section ];
 			}
 
-			return {
-				cells: row.cells.map( ( cellAttributes, columnIndex ) => {
-					const cellLocation = {
-						sectionName,
-						columnIndex,
-						rowIndex,
-					};
-
-					if ( ! isCellSelected( cellLocation, selection ) ) {
-						return cellAttributes;
+			return [
+				sectionName,
+				section.map( ( row, rowIndex ) => {
+					if ( selectionRowIndex && selectionRowIndex !== rowIndex ) {
+						return row;
 					}
 
-					return updateCell( cellAttributes );
+					return {
+						cells: row.cells.map(
+							( cellAttributes, columnIndex ) => {
+								const cellLocation = {
+									sectionName,
+									columnIndex,
+									rowIndex,
+								};
+
+								if (
+									! isCellSelected( cellLocation, selection )
+								) {
+									return cellAttributes;
+								}
+
+								return updateCell( cellAttributes );
+							}
+						),
+					};
 				} ),
-			};
-		} );
-	} );
+			];
+		} )
+	);
 }
 
 /**
@@ -224,31 +231,36 @@ export function insertColumn( state, { columnIndex } ) {
 		)
 	);
 
-	return mapValues( tableSections, ( section, sectionName ) => {
-		// Bail early if the table section is empty.
-		if ( isEmptyTableSection( section ) ) {
-			return section;
-		}
-
-		return section.map( ( row ) => {
-			// Bail early if the row is empty or it's an attempt to insert past
-			// the last possible index of the array.
-			if ( isEmptyRow( row ) || row.cells.length < columnIndex ) {
-				return row;
+	return Object.fromEntries(
+		Object.entries( tableSections ).map( ( [ sectionName, section ] ) => {
+			// Bail early if the table section is empty.
+			if ( isEmptyTableSection( section ) ) {
+				return [ sectionName, section ];
 			}
 
-			return {
-				cells: [
-					...row.cells.slice( 0, columnIndex ),
-					{
-						content: '',
-						tag: sectionName === 'head' ? 'th' : 'td',
-					},
-					...row.cells.slice( columnIndex ),
-				],
-			};
-		} );
-	} );
+			return [
+				sectionName,
+				section.map( ( row ) => {
+					// Bail early if the row is empty or it's an attempt to insert past
+					// the last possible index of the array.
+					if ( isEmptyRow( row ) || row.cells.length < columnIndex ) {
+						return row;
+					}
+
+					return {
+						cells: [
+							...row.cells.slice( 0, columnIndex ),
+							{
+								content: '',
+								tag: sectionName === 'head' ? 'th' : 'td',
+							},
+							...row.cells.slice( columnIndex ),
+						],
+					};
+				} ),
+			];
+		} )
+	);
 }
 
 /**
@@ -267,23 +279,28 @@ export function deleteColumn( state, { columnIndex } ) {
 		)
 	);
 
-	return mapValues( tableSections, ( section ) => {
-		// Bail early if the table section is empty.
-		if ( isEmptyTableSection( section ) ) {
-			return section;
-		}
+	return Object.fromEntries(
+		Object.entries( tableSections ).map( ( [ sectionName, section ] ) => {
+			// Bail early if the table section is empty.
+			if ( isEmptyTableSection( section ) ) {
+				return [ sectionName, section ];
+			}
 
-		return section
-			.map( ( row ) => ( {
-				cells:
-					row.cells.length >= columnIndex
-						? row.cells.filter(
-								( cell, index ) => index !== columnIndex
-						  )
-						: row.cells,
-			} ) )
-			.filter( ( row ) => row.cells.length );
-	} );
+			return [
+				sectionName,
+				section
+					.map( ( row ) => ( {
+						cells:
+							row.cells.length >= columnIndex
+								? row.cells.filter(
+										( cell, index ) => index !== columnIndex
+								  )
+								: row.cells,
+					} ) )
+					.filter( ( row ) => row.cells.length ),
+			];
+		} )
+	);
 }
 
 /**

package/src/term-description/block.json

@@ -39,6 +39,5 @@
 				"fontSize": true
 			}
 		}
-	},
-	"editorStyle": "wp-block-term-description-editor"
+	}
 }

package/src/utils/clean-empty-object.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, mapValues } from 'lodash';
+import { isEmpty } from 'lodash';
 
 /**
  * Removed empty nodes from nested objects.
@@ -18,9 +18,9 @@ const cleanEmptyObject = ( object ) => {
 		return object;
 	}
 	const cleanedNestedObjects = Object.fromEntries(
-		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
-			( [ , value ] ) => Boolean( value )
-		)
+		Object.entries( object )
+			.map( ( [ key, value ] ) => [ key, cleanEmptyObject( value ) ] )
+			.filter( ( [ , value ] ) => Boolean( value ) )
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };