@wordpress/block-library 8.8.0 → 8.9.0

package/build-style/style-rtl.css

@@ -609,7 +609,6 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
-  overflow: hidden;
   box-sizing: border-box; direction: ltr;
   /**
    * Set a default background color for has-background-dim _unless_ it includes another
@@ -825,7 +824,7 @@
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover__inner-container {
   width: 100%;
-  z-index: 32;
+  z-index: 1;
   color: inherit; direction: rtl;
 }
 .wp-block-cover-image p:not(.has-text-color),
@@ -2883,6 +2882,8 @@ ul.wp-block-rss.is-grid li {
   min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
+  -webkit-appearance: initial;
+          appearance: initial;
 }
 
 .wp-block-search.wp-block-search__button-only .wp-block-search__button {

package/build-style/style.css

@@ -614,7 +614,6 @@
   justify-content: center;
   align-items: center;
   padding: 1em;
-  overflow: hidden;
   box-sizing: border-box;
   /*rtl:raw: direction: ltr; */
   /**
@@ -831,7 +830,7 @@
 .wp-block-cover-image .wp-block-cover__inner-container,
 .wp-block-cover .wp-block-cover__inner-container {
   width: 100%;
-  z-index: 32;
+  z-index: 1;
   color: inherit;
   /*rtl:raw: direction: rtl; */
 }
@@ -2917,6 +2916,8 @@ ul.wp-block-rss.is-grid li {
   min-width: 3rem;
   border: 1px solid #949494;
   text-decoration: unset !important;
+  -webkit-appearance: initial;
+          appearance: initial;
 }
 
 .wp-block-search.wp-block-search__button-only .wp-block-search__button {

package/build-style/template-part/editor-rtl.css

@@ -89,21 +89,17 @@
 .block-editor-template-part__selection-modal {
   z-index: 1000001;
 }
-@media (min-width: 600px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    width: calc(100% - 32px);
-    height: calc(100% - 120px);
-  }
+.block-editor-template-part__selection-modal .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
 }
-@media (min-width: 782px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    width: 750px;
+@media (min-width: 1280px) {
+  .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
+    column-count: 3;
   }
 }
-@media (min-width: 960px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    height: 70%;
-  }
+.block-editor-template-part__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
 }
 
 .block-library-template-part__selection-search {

package/build-style/template-part/editor.css

@@ -89,21 +89,17 @@
 .block-editor-template-part__selection-modal {
   z-index: 1000001;
 }
-@media (min-width: 600px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    width: calc(100% - 32px);
-    height: calc(100% - 120px);
-  }
+.block-editor-template-part__selection-modal .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
 }
-@media (min-width: 782px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    width: 750px;
+@media (min-width: 1280px) {
+  .block-editor-template-part__selection-modal .block-editor-block-patterns-list {
+    column-count: 3;
   }
 }
-@media (min-width: 960px) {
-  .block-editor-template-part__selection-modal .components-modal__frame {
-    height: 70%;
-  }
+.block-editor-template-part__selection-modal .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
 }
 
 .block-library-template-part__selection-search {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "8.8.0",
+	"version": "8.9.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,35 +31,35 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.31.0",
-		"@wordpress/api-fetch": "^6.28.0",
-		"@wordpress/autop": "^3.31.0",
-		"@wordpress/blob": "^3.31.0",
-		"@wordpress/block-editor": "^11.8.0",
-		"@wordpress/blocks": "^12.8.0",
-		"@wordpress/components": "^23.8.0",
-		"@wordpress/compose": "^6.8.0",
-		"@wordpress/core-data": "^6.8.0",
-		"@wordpress/data": "^9.1.0",
-		"@wordpress/date": "^4.31.0",
-		"@wordpress/deprecated": "^3.31.0",
-		"@wordpress/dom": "^3.31.0",
-		"@wordpress/element": "^5.8.0",
-		"@wordpress/escape-html": "^2.31.0",
-		"@wordpress/hooks": "^3.31.0",
-		"@wordpress/html-entities": "^3.31.0",
-		"@wordpress/i18n": "^4.31.0",
-		"@wordpress/icons": "^9.22.0",
-		"@wordpress/keycodes": "^3.31.0",
-		"@wordpress/notices": "^3.31.0",
-		"@wordpress/primitives": "^3.29.0",
-		"@wordpress/private-apis": "^0.13.0",
-		"@wordpress/reusable-blocks": "^4.8.0",
-		"@wordpress/rich-text": "^6.8.0",
-		"@wordpress/server-side-render": "^4.8.0",
-		"@wordpress/url": "^3.32.0",
-		"@wordpress/viewport": "^5.8.0",
-		"@wordpress/wordcount": "^3.31.0",
+		"@wordpress/a11y": "^3.32.0",
+		"@wordpress/api-fetch": "^6.29.0",
+		"@wordpress/autop": "^3.32.0",
+		"@wordpress/blob": "^3.32.0",
+		"@wordpress/block-editor": "^12.0.0",
+		"@wordpress/blocks": "^12.9.0",
+		"@wordpress/components": "^23.9.0",
+		"@wordpress/compose": "^6.9.0",
+		"@wordpress/core-data": "^6.9.0",
+		"@wordpress/data": "^9.2.0",
+		"@wordpress/date": "^4.32.0",
+		"@wordpress/deprecated": "^3.32.0",
+		"@wordpress/dom": "^3.32.0",
+		"@wordpress/element": "^5.9.0",
+		"@wordpress/escape-html": "^2.32.0",
+		"@wordpress/hooks": "^3.32.0",
+		"@wordpress/html-entities": "^3.32.0",
+		"@wordpress/i18n": "^4.32.0",
+		"@wordpress/icons": "^9.23.0",
+		"@wordpress/keycodes": "^3.32.0",
+		"@wordpress/notices": "^4.0.0",
+		"@wordpress/primitives": "^3.30.0",
+		"@wordpress/private-apis": "^0.14.0",
+		"@wordpress/reusable-blocks": "^4.9.0",
+		"@wordpress/rich-text": "^6.9.0",
+		"@wordpress/server-side-render": "^4.9.0",
+		"@wordpress/url": "^3.33.0",
+		"@wordpress/viewport": "^5.9.0",
+		"@wordpress/wordcount": "^3.32.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
+	"gitHead": "6df0c62d43b8901414ccd22ffbe56eaa99d012a6"
 }

package/src/buttons/test/__snapshots__/edit.native.js.snap

@@ -1,5 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Buttons block color customization sets a background color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"luminous-vivid-amber"} /--></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block color customization sets a gradient background color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"gradient":"light-green-cyan-to-vivid-green-cyan"} /--></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block color customization sets a text color 1`] = `
+"<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button {"textColor":"pale-pink"} /--></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons block justify content sets Justify items center option 1`] = `
 "<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
 <div class="wp-block-buttons"><!-- wp:button /--></div>

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

@@ -2,12 +2,15 @@
  * External dependencies
  */
 import {
+	addBlock,
 	fireEvent,
 	getEditorHtml,
 	within,
 	getBlock,
 	initializeEditor,
-	changeTextOfRichText,
+	triggerBlockListLayout,
+	typeInRichText,
+	waitFor,
 } from 'test/helpers';
 
 /**
@@ -196,7 +199,7 @@ describe( 'Buttons block', () => {
 				within( secondButtonBlock ).getByLabelText(
 					'Text input. Empty'
 				);
-			changeTextOfRichText( secondButtonInput, 'Hello!' );
+			typeInRichText( secondButtonInput, 'Hello!' );
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
@@ -271,4 +274,122 @@ describe( 'Buttons block', () => {
 			} )
 		);
 	} );
+
+	describe( 'color customization', () => {
+		it( 'sets a text color', async () => {
+			// Arrange
+			const screen = await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// 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( 'sets a background color', async () => {
+			// Arrange
+			const screen = await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// 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( 'Background, Default' ) );
+
+			// Tap one color
+			fireEvent.press( screen.getByLabelText( 'Luminous vivid amber' ) );
+
+			// Dismiss the Block Settings modal.
+			fireEvent( blockSettingsModal, 'backdropPress' );
+
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'sets a gradient background color', async () => {
+			// Arrange
+			const screen = await initializeEditor();
+			await addBlock( screen, 'Buttons' );
+
+			// Act
+			const buttonsBlock = getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger onLayout for the list
+			await triggerBlockListLayout( buttonsBlock );
+
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// 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( 'Background, Default' ) );
+
+			// Tap on the gradient segment
+			fireEvent.press( screen.getByLabelText( 'Gradient' ) );
+
+			// Tap one gradient color
+			fireEvent.press(
+				screen.getByLabelText( 'Light green cyan to vivid green cyan' )
+			);
+
+			// Dismiss the Block Settings modal.
+			fireEvent( blockSettingsModal, 'backdropPress' );
+
+			// Assert
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+	} );
 } );

package/src/cover/editor.scss

@@ -10,7 +10,6 @@
 		padding: 0 !important;
 		display: flex;
 		align-items: stretch;
-		overflow: visible;
 		min-height: 240px;
 
 		.components-placeholder {
@@ -97,6 +96,7 @@
 		// The inner drag handle will still have `pointer-events: all` allowing
 		// it to continue to be interacted with.
 		pointer-events: none;
+		overflow: visible;
 	}
 }
 

package/src/cover/style.scss

@@ -7,7 +7,6 @@
 	justify-content: center;
 	align-items: center;
 	padding: 1em;
-	overflow: hidden;
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 	// Keep the flex layout direction to the physical direction (LTR) in RTL languages.

package/src/cover/transforms.js

@@ -2,12 +2,15 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from './shared';
-import cleanEmptyObject from '../utils/clean-empty-object';
+import { unlock } from '../private-apis';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 const transforms = {
 	from: [

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

@@ -3,7 +3,7 @@
  */
 import {
 	act,
-	changeTextOfRichText,
+	typeInRichText,
 	fireEvent,
 	getBlock,
 	getEditorHtml,
@@ -173,7 +173,7 @@ describe( 'Gallery block', () => {
 		const captionField = within(
 			getByLabelText( /Gallery caption. Empty/ )
 		).getByPlaceholderText( 'Add caption' );
-		changeTextOfRichText(
+		typeInRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption'
 		);
@@ -197,7 +197,7 @@ describe( 'Gallery block', () => {
 		// Set gallery item caption
 		const captionField =
 			within( galleryItem ).getByPlaceholderText( 'Add caption' );
-		changeTextOfRichText(
+		typeInRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption'
 		);
@@ -537,7 +537,7 @@ describe( 'Gallery block', () => {
 		<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":${ media[ 0 ].localId }} -->
 		<figure class="wp-block-image"><img src="${ media[ 0 ].localUrl }" alt="" class="wp-image-${ media[ 0 ].localId }"/></figure>
 		<!-- /wp:image -->
-		
+
 		<!-- wp:image {"id":${ media[ 1 ].localId },"linkDestination":"attachment"} -->
 		<figure class="wp-block-image"><img src="${ media[ 1 ].localUrl }" alt="" class="wp-image-${ media[ 1 ].localId }"/></figure>
 		<!-- /wp:image --></figure>

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

@@ -104,7 +104,7 @@
 		}
 	},
 	"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": ".wp-block-image img, .wp-block-image .components-placeholder"
 		}