@wordpress/block-library 7.14.1 → 7.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "7.14.1",
+	"version": "7.15.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,36 +31,36 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.17.0",
-		"@wordpress/api-fetch": "^6.14.0",
-		"@wordpress/autop": "^3.17.0",
-		"@wordpress/blob": "^3.17.0",
-		"@wordpress/block-editor": "^10.0.1",
-		"@wordpress/blocks": "^11.16.1",
-		"@wordpress/components": "^21.0.1",
-		"@wordpress/compose": "^5.15.1",
-		"@wordpress/core-data": "^5.0.1",
-		"@wordpress/data": "^7.1.1",
-		"@wordpress/date": "^4.17.0",
-		"@wordpress/deprecated": "^3.17.0",
-		"@wordpress/dom": "^3.17.1",
-		"@wordpress/element": "^4.15.0",
-		"@wordpress/hooks": "^3.17.0",
-		"@wordpress/html-entities": "^3.17.0",
-		"@wordpress/i18n": "^4.17.0",
-		"@wordpress/icons": "^9.8.0",
-		"@wordpress/keycodes": "^3.17.0",
-		"@wordpress/notices": "^3.17.1",
-		"@wordpress/primitives": "^3.15.0",
-		"@wordpress/reusable-blocks": "^3.15.1",
-		"@wordpress/rich-text": "^5.15.1",
-		"@wordpress/server-side-render": "^3.15.1",
-		"@wordpress/url": "^3.18.0",
-		"@wordpress/viewport": "^4.15.1",
+		"@wordpress/a11y": "^3.18.0",
+		"@wordpress/api-fetch": "^6.15.0",
+		"@wordpress/autop": "^3.18.0",
+		"@wordpress/blob": "^3.18.0",
+		"@wordpress/block-editor": "^10.1.0",
+		"@wordpress/blocks": "^11.17.0",
+		"@wordpress/components": "^21.1.0",
+		"@wordpress/compose": "^5.16.0",
+		"@wordpress/core-data": "^5.1.0",
+		"@wordpress/data": "^7.2.0",
+		"@wordpress/date": "^4.18.0",
+		"@wordpress/deprecated": "^3.18.0",
+		"@wordpress/dom": "^3.18.0",
+		"@wordpress/element": "^4.16.0",
+		"@wordpress/hooks": "^3.18.0",
+		"@wordpress/html-entities": "^3.18.0",
+		"@wordpress/i18n": "^4.18.0",
+		"@wordpress/icons": "^9.9.0",
+		"@wordpress/keycodes": "^3.18.0",
+		"@wordpress/notices": "^3.18.0",
+		"@wordpress/primitives": "^3.16.0",
+		"@wordpress/reusable-blocks": "^3.16.0",
+		"@wordpress/rich-text": "^5.16.0",
+		"@wordpress/server-side-render": "^3.16.0",
+		"@wordpress/url": "^3.19.0",
+		"@wordpress/viewport": "^4.16.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
-		"fast-average-color": "^4.3.0",
+		"fast-average-color": "^9.1.1",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
 		"micromodal": "^0.4.10",
@@ -73,5 +73,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "56ef3f5a754e44155ee79e827c7a1d0efc1ee5aa"
+	"gitHead": "23e136283fa1d3b8d9d8b33869f871ad5eb77726"
 }

package/src/avatar/block.json

@@ -4,7 +4,7 @@
 	"name": "core/avatar",
 	"title": "Avatar",
 	"category": "theme",
-	"description": "Add a user's avatar.",
+	"description": "Add a user’s avatar.",
 	"textdomain": "default",
 	"attributes": {
 		"userId": {

package/src/block/edit.native.js

@@ -163,7 +163,7 @@ export default function ReusableBlockEdit( {
 					</Text>
 					<Text style={ [ infoTextStyle, infoDescriptionStyle ] }>
 						{ __(
-							'Alternatively, you can detach and edit these blocks separately by tapping "Convert to regular blocks".'
+							'Alternatively, you can detach and edit these blocks separately by tapping “Convert to regular blocks”.'
 						) }
 					</Text>
 					<TextControl

package/src/buttons/edit.native.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { debounce } from 'lodash';
 import { View } from 'react-native';
 
 /**
@@ -14,7 +13,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { createBlock, getBlockSupport } from '@wordpress/blocks';
-import { useResizeObserver } from '@wordpress/compose';
+import { debounce, useResizeObserver } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { alignmentHelpers } from '@wordpress/components';

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

@@ -18,6 +18,28 @@ exports[`Buttons block justify content sets Justify items right option 1`] = `
 <!-- /wp:buttons -->"
 `;
 
+exports[`Buttons block when a button is shown adds another button using the inline appender 1`] = `
+"<!-- wp:buttons -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button /-->
+
+<!-- wp:button /--></div>
+<!-- /wp:buttons -->
+
+<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Buttons block when a button is shown adds another button using the inserter 1`] = `
+"<!-- wp:buttons -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button /-->
+
+<!-- wp:button -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Hello!</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;
+
 exports[`Buttons block when a button is shown adjusts the border radius 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button {\\"style\\":{\\"border\\":{\\"radius\\":\\"6px\\"}}} -->
@@ -25,3 +47,9 @@ exports[`Buttons block when a button is shown adjusts the border radius 1`] = `
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
+
+exports[`Buttons block when a button is shown removing button along with buttons block removes the button and buttons block when deleting the block using the block delete action 1`] = `
+"<!-- wp:paragraph -->
+<p></p>
+<!-- /wp:paragraph -->"
+`;

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

@@ -6,7 +6,9 @@ import {
 	waitFor,
 	getEditorHtml,
 	within,
+	getBlock,
 	initializeEditor,
+	changeTextOfRichText,
 } from 'test/helpers';
 
 /**
@@ -15,6 +17,19 @@ import {
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { registerCoreBlocks } from '@wordpress/block-library';
 
+// Mock debounce to prevent potentially belated state updates.
+jest.mock( 'lodash', () => ( {
+	...jest.requireActual( 'lodash' ),
+	debounce: ( fn ) => {
+		fn.cancel = jest.fn();
+		return fn;
+	},
+} ) );
+
+const BUTTONS_HTML = `<!-- wp:buttons -->
+<div class="wp-block-buttons"><!-- wp:button /--></div>
+<!-- /wp:buttons -->`;
+
 beforeAll( () => {
 	// Register all core blocks.
 	registerCoreBlocks();
@@ -78,6 +93,161 @@ describe( 'Buttons block', () => {
 
 			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
+
+		it( 'adds another button using the inline appender', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: BUTTONS_HTML,
+			} );
+			const { getByA11yLabel } = screen;
+
+			// Get block
+			const buttonsBlock = await getBlock( screen, 'Buttons' );
+
+			// Trigger inner blocks layout
+			const innerBlockListWrapper = await waitFor( () =>
+				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
+			);
+			fireEvent( innerBlockListWrapper, 'layout', {
+				nativeEvent: {
+					layout: {
+						width: 300,
+					},
+				},
+			} );
+
+			// Get inner button block
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Add another Button using the inline appender
+			const appenderButton =
+				within( buttonsBlock ).getByTestId( 'appender-button' );
+			fireEvent.press( appenderButton );
+
+			// Check for new button
+			const secondButtonBlock = await waitFor( () =>
+				within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 2/ )
+			);
+			expect( secondButtonBlock ).toBeVisible();
+
+			// Add a Paragraph block using the empty placeholder at the bottom
+			const paragraphPlaceholder = await waitFor( () =>
+				getByA11yLabel( 'Add paragraph block' )
+			);
+			fireEvent.press( paragraphPlaceholder );
+
+			// Check for inline appenders
+			const appenderButtons =
+				within( buttonsBlock ).queryAllByTestId( 'appender-button' );
+			expect( appenderButtons.length ).toBe( 0 );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		it( 'adds another button using the inserter', async () => {
+			const screen = await initializeEditor( {
+				initialHtml: BUTTONS_HTML,
+			} );
+			const {
+				getByA11yLabel,
+				getByTestId,
+				queryAllByA11yLabel,
+				getByText,
+			} = screen;
+
+			// Get block
+			const buttonsBlock = await getBlock( screen, 'Buttons' );
+			fireEvent.press( buttonsBlock );
+
+			// Trigger inner blocks layout
+			const innerBlockListWrapper = await waitFor( () =>
+				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
+			);
+			fireEvent( innerBlockListWrapper, 'layout', {
+				nativeEvent: {
+					layout: {
+						width: 300,
+					},
+				},
+			} );
+
+			// Get inner button block
+			const buttonBlock = await getBlock( screen, 'Button' );
+			fireEvent.press( buttonBlock );
+
+			// Open the block inserter
+			fireEvent.press( getByA11yLabel( 'Add block' ) );
+
+			const blockList = getByTestId( 'InserterUI-Blocks' );
+			// onScroll event used to force the FlatList to render all items
+			fireEvent.scroll( blockList, {
+				nativeEvent: {
+					contentOffset: { y: 0, x: 0 },
+					contentSize: { width: 100, height: 100 },
+					layoutMeasurement: { width: 100, height: 100 },
+				},
+			} );
+
+			// Check the Add block here placeholder is not visible
+			const addBlockHerePlaceholders =
+				queryAllByA11yLabel( 'ADD BLOCK HERE' );
+			expect( addBlockHerePlaceholders.length ).toBe( 0 );
+
+			// Add a new Button block
+			fireEvent.press( await waitFor( () => getByText( 'Button' ) ) );
+
+			// Get new button
+			const secondButtonBlock = await getBlock( screen, 'Button', {
+				rowIndex: 2,
+			} );
+			const secondButtonInput =
+				within( secondButtonBlock ).getByA11yLabel(
+					'Text input. Empty'
+				);
+			changeTextOfRichText( secondButtonInput, 'Hello!' );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
+		} );
+
+		describe( 'removing button along with buttons block', () => {
+			it( 'removes the button and buttons block when deleting the block using the block delete action', async () => {
+				const screen = await initializeEditor( {
+					initialHtml: BUTTONS_HTML,
+				} );
+				const { getByA11yLabel } = screen;
+
+				// Get block
+				const buttonsBlock = await getBlock( screen, 'Buttons' );
+
+				// Trigger inner blocks layout
+				const innerBlockListWrapper = await waitFor( () =>
+					within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
+				);
+				fireEvent( innerBlockListWrapper, 'layout', {
+					nativeEvent: {
+						layout: {
+							width: 300,
+						},
+					},
+				} );
+
+				// Get inner button block
+				const buttonBlock = await getBlock( screen, 'Button' );
+				fireEvent.press( buttonBlock );
+
+				// Open block actions menu
+				const blockActionsButton = getByA11yLabel(
+					/Open Block Actions Menu/
+				);
+				fireEvent.press( blockActionsButton );
+
+				// Delete block
+				const deleteButton = getByA11yLabel( /Remove block/ );
+				fireEvent.press( deleteButton );
+
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} );
+		} );
 	} );
 
 	describe( 'justify content', () => {

package/src/calendar/block.json

@@ -17,6 +17,15 @@
 	},
 	"supports": {
 		"align": true,
+		"color": {
+			"link": true,
+			"__experimentalSkipSerialization": [ "text", "background" ],
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			},
+			"__experimentalSelector": "table, th"
+		},
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,

package/src/calendar/index.php

@@ -40,11 +40,32 @@ function render_block_core_calendar( $attributes ) {
 		}
 	}
 
+	$color_block_styles = array();
+
+	// Text color.
+	$preset_text_color          = array_key_exists( 'textColor', $attributes ) ? "var:preset|color|{$attributes['textColor']}" : null;
+	$custom_text_color          = _wp_array_get( $attributes, array( 'style', 'color', 'text' ), null );
+	$color_block_styles['text'] = $preset_text_color ? $preset_text_color : $custom_text_color;
+
+	// Background Color.
+	$preset_background_color          = array_key_exists( 'backgroundColor', $attributes ) ? "var:preset|color|{$attributes['backgroundColor']}" : null;
+	$custom_background_color          = _wp_array_get( $attributes, array( 'style', 'color', 'background' ), null );
+	$color_block_styles['background'] = $preset_background_color ? $preset_background_color : $custom_background_color;
+
+	// Generate color styles and classes.
+	$styles        = gutenberg_style_engine_get_styles( array( 'color' => $color_block_styles ), array( 'convert_vars_to_classnames' => true ) );
+	$inline_styles = empty( $styles['css'] ) ? '' : sprintf( ' style="%s"', esc_attr( $styles['css'] ) );
+	$classnames    = empty( $styles['classnames'] ) ? '' : ' ' . esc_attr( $styles['classnames'] );
+
+	// Apply color classes and styles to the calendar.
+	$calendar = str_replace( '<table', '<table' . $inline_styles, get_calendar( true, false ) );
+	$calendar = str_replace( 'class="wp-calendar-table', 'class="wp-calendar-table' . $classnames, $calendar );
+
 	$wrapper_attributes = get_block_wrapper_attributes();
 	$output             = sprintf(
 		'<div %1$s>%2$s</div>',
 		$wrapper_attributes,
-		get_calendar( true, false )
+		$calendar
 	);
 
 	// phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited

package/src/calendar/style.scss

@@ -2,31 +2,44 @@
 	text-align: center;
 
 	th,
-	tbody td {
+	td {
 		padding: 0.25em;
-		border: 1px solid $gray-300;
+		border: 1px solid;
 	}
 
-	tfoot td {
-		border: none;
+	th {
+		font-weight: 400;
+	}
+
+	caption {
+		background-color: inherit;
 	}
 
 	table {
 		width: 100%;
 		border-collapse: collapse;
-	}
 
-	table th {
-		font-weight: 400;
-		background: $gray-300;
-	}
+		&:where(:not(.has-text-color)) {
+			color: #40464d;
 
-	a {
-		text-decoration: underline;
-	}
+			// Keep the hard-coded border color for backward compatibility.
+			th,
+			td {
+				border-color: $gray-300;
+			}
+		}
+
+		&.has-background th {
+			background-color: inherit;
+		}
 
-	table tbody,
-	table caption {
-		color: #40464d;
+		&.has-text-color th {
+			color: inherit;
+		}
 	}
 }
+
+// Keep the hard-coded header background color for backward compatibility.
+:where(.wp-block-calendar table:not(.has-background) th) {
+	background: $gray-300;
+}

package/src/code/index.js

@@ -24,7 +24,7 @@ export const settings = {
 			/* eslint-disable @wordpress/i18n-no-collapsible-whitespace */
 			// translators: Preserve \n markers for line breaks
 			content: __(
-				'// A "block" is the abstract term used\n// to describe units of markup that\n// when composed together, form the\n// content or layout of a page.\nregisterBlockType( name, settings );'
+				'// A “block” is the abstract term used\n// to describe units of markup that\n// when composed together, form the\n// content or layout of a page.\nregisterBlockType( name, settings );'
 			),
 			/* eslint-enable @wordpress/i18n-no-collapsible-whitespace */
 		},