@wordpress/block-library 8.7.0 → 8.9.0

package/src/gallery/test/use-get-media.native.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { render } from 'test/helpers';
+
+/**
+ * Internal dependencies
+ */
+import useGetMedia from '../use-get-media';
+
+describe( 'useGetMedia', () => {
+	// TODO: Explore why a Gallery block would ever be without inner blocks.
+	// This test and the associated default function parameter might be unnecessary.
+	it( 'should not error when receiving zero images', () => {
+		// Arrange
+		const TestSubject = () => {
+			useGetMedia( undefined );
+			return null;
+		};
+
+		// Assert
+		expect( () => render( <TestSubject /> ) ).not.toThrow();
+	} );
+} );

package/src/gallery/use-get-media.native.js

@@ -14,7 +14,7 @@ const EMPTY_IMAGE_MEDIA = [];
  *
  * @return {Array} An array of media info options for each gallery image.
  */
-export default function useGetMedia( innerBlockImages ) {
+export default function useGetMedia( innerBlockImages = [] ) {
 	return useSelect(
 		( select ) => {
 			const imagesUploading = innerBlockImages.some(

package/src/group/block.json

@@ -15,6 +15,9 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
+		},
+		"allowedBlocks": {
+			"type": "array"
 		}
 	},
 	"supports": {

package/src/group/edit.js

@@ -90,7 +90,12 @@ function GroupEdit( {
 		[ clientId ]
 	);
 
-	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
+	const {
+		tagName: TagName = 'div',
+		templateLock,
+		allowedBlocks,
+		layout = {},
+	} = attributes;
 
 	// Layout settings.
 	const defaultLayout = useSetting( 'layout' ) || {};
@@ -131,6 +136,7 @@ function GroupEdit( {
 			: { className: 'wp-block-group__inner-container' },
 		{
 			templateLock,
+			allowedBlocks,
 			renderAppender,
 			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
@@ -153,7 +159,7 @@ function GroupEdit( {
 				}
 			/>
 			{ showPlaceholder && (
-				<View { ...innerBlocksProps }>
+				<View>
 					{ innerBlocksProps.children }
 					<GroupPlaceHolder
 						clientId={ clientId }

package/src/heading/test/__snapshots__/index.native.js.snap

@@ -5,3 +5,15 @@ exports[`Heading block inserts block 1`] = `
 <h2 class="wp-block-heading"></h2>
 <!-- /wp:heading -->"
 `;
+
+exports[`Heading block should set a background color 1`] = `
+"<!-- wp:heading {"backgroundColor":"luminous-vivid-orange"} -->
+<h2 class="wp-block-heading has-luminous-vivid-orange-background-color has-background">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Heading block should set a text color 1`] = `
+"<!-- wp:heading {"textColor":"pale-pink"} -->
+<h2 class="wp-block-heading has-pale-pink-color has-text-color">A quick brown fox jumps over the lazy dog.</h2>
+<!-- /wp:heading -->"
+`;

package/src/heading/test/index.native.js

@@ -7,6 +7,9 @@ import {
 	initializeEditor,
 	addBlock,
 	getBlock,
+	typeInRichText,
+	waitFor,
+	within,
 } from 'test/helpers';
 
 /**
@@ -41,4 +44,72 @@ describe( 'Heading block', () => {
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
+
+	it( 'should set a text color', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Heading' );
+
+		// Act
+		const headingBlock = getBlock( screen, 'Heading' );
+		fireEvent.press( headingBlock );
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Text color settings
+		fireEvent.press( screen.getByLabelText( 'Text, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Pale pink' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'should set a background color', async () => {
+		// Arrange
+		const screen = await initializeEditor();
+		await addBlock( screen, 'Heading' );
+
+		// Act
+		const headingBlock = getBlock( screen, 'Heading' );
+		fireEvent.press( headingBlock );
+		const headingTextInput =
+			within( headingBlock ).getByPlaceholderText( 'Heading' );
+		typeInRichText(
+			headingTextInput,
+			'A quick brown fox jumps over the lazy dog.'
+		);
+		// Open Block Settings.
+		fireEvent.press( screen.getByLabelText( 'Open Settings' ) );
+
+		// Wait for Block Settings to be visible.
+		const blockSettingsModal = screen.getByTestId( 'block-settings-modal' );
+		await waitFor( () => blockSettingsModal.props.isVisible );
+
+		// Open Background color settings
+		fireEvent.press( screen.getByLabelText( 'Background, Default' ) );
+
+		// Tap one color
+		fireEvent.press( screen.getByLabelText( 'Luminous vivid orange' ) );
+
+		// Dismiss the Block Settings modal.
+		fireEvent( blockSettingsModal, 'backdropPress' );
+
+		// Assert
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
 } );

package/src/html/editor.scss

@@ -10,27 +10,8 @@
 	// The editing view for the HTML block is equivalent to block UI.
 	// Therefore we increase specificity to avoid theme styles bleeding in.
 	.block-editor-plain-text {
-		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;
-
-		/* 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;
-		}
+		@include editor-input-reset();
 	}
 }

package/src/image/block.json

@@ -85,10 +85,12 @@
 	"supports": {
 		"anchor": true,
 		"color": {
-			"__experimentalDuotone": true,
 			"text": false,
 			"background": false
 		},
+		"filter": {
+			"duotone": true
+		},
 		"__experimentalBorder": {
 			"color": true,
 			"radius": true,
@@ -102,9 +104,9 @@
 		}
 	},
 	"selectors": {
-		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area",
+		"border": ".wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder",
 		"filter": {
-			"duotone": "img, .components-placeholder"
+			"duotone": ".wp-block-image img, .wp-block-image .components-placeholder"
 		}
 	},
 	"styles": [

package/src/image/edit.js

@@ -29,23 +29,6 @@ import { store as noticesStore } from '@wordpress/notices';
  */
 import Image from './image';
 
-// Much of this description is duplicated from MediaPlaceholder.
-const placeholder = ( content ) => {
-	return (
-		<Placeholder
-			className="block-editor-media-placeholder"
-			withIllustration={ true }
-			icon={ icon }
-			label={ __( 'Image' ) }
-			instructions={ __(
-				'Upload an image file, pick one from your media library, or add one with a URL.'
-			) }
-		>
-			{ content }
-		</Placeholder>
-	);
-};
-
 /**
  * Module constants
  */
@@ -345,6 +328,27 @@ export function ImageEdit( {
 		className: classes,
 	} );
 
+	// Much of this description is duplicated from MediaPlaceholder.
+	const placeholder = ( content ) => {
+		return (
+			<Placeholder
+				className={ classnames( 'block-editor-media-placeholder', {
+					[ borderProps.className ]:
+						!! borderProps.className && ! isSelected,
+				} ) }
+				withIllustration={ true }
+				icon={ icon }
+				label={ __( 'Image' ) }
+				instructions={ __(
+					'Upload an image file, pick one from your media library, or add one with a URL.'
+				) }
+				style={ isSelected ? undefined : borderProps.style }
+			>
+				{ content }
+			</Placeholder>
+		);
+	};
+
 	return (
 		<figure { ...blockProps }>
 			{ ( temporaryURL || url ) && (

package/src/image/editor.scss

@@ -10,7 +10,7 @@
 		border: none;
 
 		// Disable any duotone filter applied in the selected state.
-		filter: none;
+		filter: none !important;
 
 		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
 		border-radius: $radius-block-ui;

package/src/index.js

@@ -45,6 +45,9 @@ import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
 import * as commentsTitle from './comments-title';
 import * as cover from './cover';
+import * as details from './details';
+import * as detailsContent from './details-content';
+import * as detailsSummary from './details-summary';
 import * as embed from './embed';
 import * as file from './file';
 import * as gallery from './gallery';
@@ -121,8 +124,8 @@ import isBlockMetadataExperimental from './utils/is-block-metadata-experimental'
 /**
  * Function to get all the block-library blocks in an array
  */
-const getAllBlocks = () =>
-	[
+const getAllBlocks = () => {
+	const blocks = [
 		// Common blocks are grouped at the top to prioritize their display
 		// in various contexts — like the inserter and auto-complete components.
 		paragraph,
@@ -224,7 +227,14 @@ const getAllBlocks = () =>
 		termDescription,
 		queryTitle,
 		postAuthorBiography,
-	].filter( Boolean );
+	];
+	if ( window?.__experimentalEnableDetailsBlocks ) {
+		blocks.push( details );
+		blocks.push( detailsContent );
+		blocks.push( detailsSummary );
+	}
+	return blocks.filter( Boolean );
+};
 
 /**
  * Function to get all the core blocks in an array.

package/src/index.native.js

@@ -261,10 +261,14 @@ export const registerCoreBlocks = () => {
  * than 0, a "new" badge is displayed on the block type within the block
  * inserter.
  *
+ * With the below example, the Audio block will be displayed as "new" until its
+ * impression count reaches 0, which occurs by various actions decrementing
+ * the impression count.
+ *
+ * {
+ * 	[ audio.name ]: 40
+ * }
+ *
  * @constant {{ string, number }}
  */
-export const NEW_BLOCK_TYPES = {
-	[ embed.name ]: 40,
-	[ search.name ]: 40,
-	[ audio.name ]: 40,
-};
+export const NEW_BLOCK_TYPES = {};

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

@@ -2,8 +2,8 @@
  * External dependencies
  */
 import {
-	changeTextOfRichText,
-	changeAndSelectTextOfRichText,
+	selectRangeInRichText,
+	typeInRichText,
 	fireEvent,
 	getEditorHtml,
 	initializeEditor,
@@ -79,7 +79,7 @@ describe( 'List block', () => {
 
 		const listItemField =
 			within( listBlock ).getByPlaceholderText( 'List' );
-		changeTextOfRichText( listItemField, 'First list item' );
+		typeInRichText( listItemField, 'First list item' );
 
 		expect( getEditorHtml() ).toMatchSnapshot();
 	} );
@@ -347,7 +347,7 @@ describe( 'List block', () => {
 		// backward delete
 		const listItemField =
 			within( listItemBlock ).getByLabelText( /Text input. .*Two.*/ );
-		changeAndSelectTextOfRichText( listItemField, 'Two' );
+		selectRangeInRichText( listItemField, 0 );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
@@ -395,7 +395,7 @@ describe( 'List block', () => {
 		// backward delete
 		const listItemField =
 			within( listItemBlock ).getByLabelText( /Text input. .*One.*/ );
-		changeAndSelectTextOfRichText( listItemField, 'One' );
+		selectRangeInRichText( listItemField, 0 );
 		fireEvent( listItemField, 'onKeyDown', {
 			nativeEvent: {},
 			preventDefault() {},
@@ -406,11 +406,11 @@ describe( 'List block', () => {
 		"<!-- wp:paragraph -->
 		<p>A quick brown fox.</p>
 		<!-- /wp:paragraph -->
-		
+
 		<!-- wp:paragraph -->
 		<p>One</p>
 		<!-- /wp:paragraph -->
-		
+
 		<!-- wp:list -->
 		<ul><!-- wp:list-item -->
 		<li>Two</li>

package/src/media-text/block.json

@@ -89,6 +89,9 @@
 		},
 		"focalPoint": {
 			"type": "object"
+		},
+		"allowedBlocks": {
+			"type": "array"
 		}
 	},
 	"supports": {

package/src/media-text/edit.js

@@ -143,6 +143,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 		mediaWidth,
 		rel,
 		verticalAlignment,
+		allowedBlocks,
 	} = attributes;
 	const mediaSizeSlug = attributes.mediaSizeSlug || DEFAULT_MEDIA_SIZE_SLUG;
 
@@ -315,7 +316,7 @@ function MediaTextEdit( { attributes, isSelected, setAttributes, clientId } ) {
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{ className: 'wp-block-media-text__content' },
-		{ template: TEMPLATE }
+		{ template: TEMPLATE, allowedBlocks }
 	);
 
 	return (

package/src/media-text/media-container.js

@@ -20,11 +20,7 @@ import { useDispatch } from '@wordpress/data';
 import { forwardRef } from '@wordpress/element';
 import { isBlobURL } from '@wordpress/blob';
 import { store as noticesStore } from '@wordpress/notices';
-
-/**
- * Internal dependencies
- */
-import icon from './media-container-icon';
+import { media as icon } from '@wordpress/icons';
 
 /**
  * Constants

package/src/media-text/media-container.native.js

@@ -26,12 +26,12 @@ import { Component } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { isURL, getProtocol } from '@wordpress/url';
 import { compose, withPreferredColorScheme } from '@wordpress/compose';
+import { media as icon } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import styles from './style.scss';
-import icon from './media-container-icon';
 import SvgIconRetry from './icon-retry';
 
 /**

package/src/navigation/deprecated.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { mapValues } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -331,22 +326,23 @@ const migrateTypographyPresets = function ( attributes ) {
 		...attributes,
 		style: {
 			...attributes.style,
-			typography: mapValues(
-				attributes.style.typography,
-				( value, key ) => {
-					const prefix = TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ];
-					if ( prefix && value.startsWith( prefix ) ) {
-						const newValue = value.slice( prefix.length );
-						if (
-							'textDecoration' === key &&
-							'strikethrough' === newValue
-						) {
-							return 'line-through';
+			typography: Object.fromEntries(
+				Object.entries( attributes.style.typography ?? {} ).map(
+					( [ key, value ] ) => {
+						const prefix = TYPOGRAPHY_PRESET_DEPRECATION_MAP[ key ];
+						if ( prefix && value.startsWith( prefix ) ) {
+							const newValue = value.slice( prefix.length );
+							if (
+								'textDecoration' === key &&
+								'strikethrough' === newValue
+							) {
+								return [ key, 'line-through' ];
+							}
+							return [ key, newValue ];
 						}
-						return newValue;
+						return [ key, value ];
 					}
-					return value;
-				}
+				)
 			),
 		},
 	};