@wordpress/block-library 6.0.23 → 7.0.0

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block justify content sets Justify items left option 1`] = `
+"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"left\\"}} -->
+<div class=\\"wp-block-buttons\\"><!-- wp:button /--></div>
+<!-- /wp:buttons -->"
+`;
+
+exports[`Buttons block justify content sets Justify items right option 1`] = `
+"<!-- wp:buttons {\\"layout\\":{\\"type\\":\\"flex\\",\\"justifyContent\\":\\"right\\"}} -->
+<div class=\\"wp-block-buttons\\"><!-- 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\\"}}} -->
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"\\" style=\\"border-radius:6px\\">Hello</a></div>
+<!-- /wp:button --></div>
+<!-- /wp:buttons -->"
+`;

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

@@ -27,59 +27,89 @@ afterAll( () => {
 	} );
 } );
 
-describe( 'when a button is shown', () => {
-	it( 'adjusts the border radius', async () => {
-		const initialHtml = `<!-- wp:buttons -->
-		<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
-		<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5px" >Hello</a></div>
-		<!-- /wp:button --></div>
-		<!-- /wp:buttons -->`;
-		const { getByA11yLabel } = await initializeEditor( {
-			initialHtml,
-		} );
+describe( 'Buttons block', () => {
+	describe( 'when a button is shown', () => {
+		it( 'adjusts the border radius', async () => {
+			const initialHtml = `<!-- wp:buttons -->
+			<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
+			<div class="wp-block-button"><a class="wp-block-button__link" style="border-radius:5px" >Hello</a></div>
+			<!-- /wp:button --></div>
+			<!-- /wp:buttons -->`;
+			const { getByA11yLabel } = await initializeEditor( {
+				initialHtml,
+			} );
 
-		const buttonsBlock = await waitFor( () =>
-			getByA11yLabel( /Buttons Block\. Row 1/ )
-		);
-		fireEvent.press( buttonsBlock );
+			const buttonsBlock = await waitFor( () =>
+				getByA11yLabel( /Buttons Block\. Row 1/ )
+			);
+			fireEvent.press( buttonsBlock );
 
-		// onLayout event has to be explicitly dispatched in BlockList component,
-		// otherwise the inner blocks are not rendered.
-		const innerBlockListWrapper = await waitFor( () =>
-			within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
-		);
-		fireEvent( innerBlockListWrapper, 'layout', {
-			nativeEvent: {
-				layout: {
-					width: 100,
+			// onLayout event has to be explicitly dispatched in BlockList component,
+			// otherwise the inner blocks are not rendered.
+			const innerBlockListWrapper = await waitFor( () =>
+				within( buttonsBlock ).getByTestId( 'block-list-wrapper' )
+			);
+			fireEvent( innerBlockListWrapper, 'layout', {
+				nativeEvent: {
+					layout: {
+						width: 100,
+					},
 				},
-			},
+			} );
+
+			const buttonInnerBlock = await waitFor( () =>
+				within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ )
+			);
+			fireEvent.press( buttonInnerBlock );
+
+			const settingsButton = await waitFor( () =>
+				getByA11yLabel( 'Open Settings' )
+			);
+			fireEvent.press( settingsButton );
+
+			const radiusStepper = await waitFor( () =>
+				getByA11yLabel( /Border Radius/ )
+			);
+
+			const incrementButton = await waitFor( () =>
+				within( radiusStepper ).getByTestId( 'Increment' )
+			);
+			fireEvent( incrementButton, 'onPressIn' );
+
+			expect( getEditorHtml() ).toMatchSnapshot();
 		} );
+	} );
 
-		const buttonInnerBlock = await waitFor( () =>
-			within( buttonsBlock ).getByA11yLabel( /Button Block\. Row 1/ )
-		);
-		fireEvent.press( buttonInnerBlock );
+	describe( 'justify content', () => {
+		[
+			'Justify items left',
+			'Justify items center',
+			'Justify items right',
+		].forEach( ( justificationOption ) =>
+			it( `sets ${ justificationOption } option`, async () => {
+				const initialHtml = `<!-- wp:buttons -->
+				<div class="wp-block-buttons"><!-- wp:button /--></div>
+				<!-- /wp:buttons -->`;
+				const { getByA11yLabel, getByText } = await initializeEditor( {
+					initialHtml,
+				} );
 
-		const settingsButton = await waitFor( () =>
-			getByA11yLabel( 'Open Settings' )
-		);
-		fireEvent.press( settingsButton );
+				const block = await waitFor( () =>
+					getByA11yLabel( /Buttons Block\. Row 1/ )
+				);
+				fireEvent.press( block );
 
-		const radiusStepper = await waitFor( () =>
-			getByA11yLabel( /Border Radius/ )
-		);
+				fireEvent.press(
+					getByA11yLabel( 'Change items justification' )
+				);
+
+				// Select alignment option
+				fireEvent.press(
+					await waitFor( () => getByText( justificationOption ) )
+				);
 
-		const incrementButton = await waitFor( () =>
-			within( radiusStepper ).getByTestId( 'Increment' )
+				expect( getEditorHtml() ).toMatchSnapshot();
+			} )
 		);
-		fireEvent( incrementButton, 'onPressIn' );
-
-		const expectedHtml = `<!-- wp:buttons -->
-<div class="wp-block-buttons"><!-- wp:button {"style":{"border":{"radius":"6px"}}} -->
-<div class="wp-block-button"><a class="wp-block-button__link" href="" style="border-radius:6px">Hello</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->`;
-		expect( getEditorHtml() ).toBe( expectedHtml );
 	} );
 } );

package/src/calendar/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/calendar",
 	"title": "Calendar",

package/src/calendar/index.js

@@ -8,6 +8,7 @@ import { calendar as icon } from '@wordpress/icons';
  */
 import metadata from './block.json';
 import edit from './edit';
+import transforms from './transforms';
 
 const { name } = metadata;
 
@@ -17,4 +18,5 @@ export const settings = {
 	icon,
 	example: {},
 	edit,
+	transforms,
 };

package/src/calendar/index.php

@@ -107,51 +107,47 @@ function block_core_calendar_update_has_published_posts() {
 	return $has_published_posts;
 }
 
-/**
- * Handler for updating the has published posts flag when a post is deleted.
- *
- * @param int $post_id Deleted post ID.
- */
-function block_core_calendar_update_has_published_post_on_delete( $post_id ) {
-	if ( is_multisite() ) {
-		return;
-	}
-
-	$post = get_post( $post_id );
+// We only want to register these functions and actions when
+// we are on single sites. On multi sites we use `post_count` option.
+if ( ! is_multisite() ) {
+	/**
+	 * Handler for updating the has published posts flag when a post is deleted.
+	 *
+	 * @param int $post_id Deleted post ID.
+	 */
+	function block_core_calendar_update_has_published_post_on_delete( $post_id ) {
+		$post = get_post( $post_id );
+
+		if ( ! $post || 'publish' !== $post->post_status || 'post' !== $post->post_type ) {
+			return;
+		}
 
-	if ( ! $post || 'publish' !== $post->post_status || 'post' !== $post->post_type ) {
-		return;
+		block_core_calendar_update_has_published_posts();
 	}
 
-	block_core_calendar_update_has_published_posts();
-}
-
-/**
- * Handler for updating the has published posts flag when a post status changes.
- *
- * @param string  $new_status The status the post is changing to.
- * @param string  $old_status The status the post is changing from.
- * @param WP_Post $post       Post object.
- */
-function block_core_calendar_update_has_published_post_on_transition_post_status( $new_status, $old_status, $post ) {
-	if ( is_multisite() ) {
-		return;
-	}
+	/**
+	 * Handler for updating the has published posts flag when a post status changes.
+	 *
+	 * @param string  $new_status The status the post is changing to.
+	 * @param string  $old_status The status the post is changing from.
+	 * @param WP_Post $post       Post object.
+	 */
+	function block_core_calendar_update_has_published_post_on_transition_post_status( $new_status, $old_status, $post ) {
+		if ( $new_status === $old_status ) {
+			return;
+		}
 
-	if ( $new_status === $old_status ) {
-		return;
-	}
+		if ( 'post' !== get_post_type( $post ) ) {
+			return;
+		}
 
-	if ( 'post' !== get_post_type( $post ) ) {
-		return;
-	}
+		if ( 'publish' !== $new_status && 'publish' !== $old_status ) {
+			return;
+		}
 
-	if ( 'publish' !== $new_status && 'publish' !== $old_status ) {
-		return;
+		block_core_calendar_update_has_published_posts();
 	}
 
-	block_core_calendar_update_has_published_posts();
+	add_action( 'delete_post', 'block_core_calendar_update_has_published_post_on_delete' );
+	add_action( 'transition_post_status', 'block_core_calendar_update_has_published_post_on_transition_post_status', 10, 3 );
 }
-
-add_action( 'delete_post', 'block_core_calendar_update_has_published_post_on_delete' );
-add_action( 'transition_post_status', 'block_core_calendar_update_has_published_post_on_transition_post_status', 10, 3 );

package/src/calendar/transforms.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createBlock } from '@wordpress/blocks';
+
+const transforms = {
+	from: [
+		{
+			type: 'block',
+			blocks: [ 'core/archives' ],
+			transform: () => createBlock( 'core/calendar' ),
+		},
+	],
+	to: [
+		{
+			type: 'block',
+			blocks: [ 'core/archives' ],
+			transform: () => createBlock( 'core/archives' ),
+		},
+	],
+};
+
+export default transforms;

package/src/categories/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/categories",
 	"title": "Categories",

package/src/categories/index.php

@@ -31,7 +31,7 @@ function render_block_core_categories( $attributes ) {
 		$id                       = 'wp-block-categories-' . $block_id;
 		$args['id']               = $id;
 		$args['show_option_none'] = __( 'Select Category' );
-		$wrapper_markup           = '<div %1$s><label class="screen-reader-text" for="' . $id . '">' . __( 'Categories' ) . '</label>%2$s</div>';
+		$wrapper_markup           = '<div %1$s><label class="screen-reader-text" for="' . esc_attr( $id ) . '">' . __( 'Categories' ) . '</label>%2$s</div>';
 		$items_markup             = wp_dropdown_categories( $args );
 		$type                     = 'dropdown';
 

package/src/code/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/code",
 	"title": "Code",
@@ -34,12 +35,20 @@
 			"radius": true,
 			"color": true,
 			"width": true,
-			"style": true
+			"style": true,
+			"__experimentalDefaultControls": {
+				"width": true,
+				"color": true
+			}
 		},
 		"color": {
 			"text": true,
 			"background": true,
-			"gradients": true
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		}
 	},
 	"style": "wp-block-code"

package/src/code/theme.scss

@@ -1,7 +1,9 @@
+.wp-block-code {
+	border: 1px solid #ccc;
+	border-radius: 4px;
+}
+
 .wp-block-code > code {
-	font-family: $editor-html-font;
-	color: $gray-900;
+	font-family: Menlo, Consolas, monaco, monospace;
 	padding: 0.8em 1em;
-	border: 1px solid $gray-300;
-	border-radius: 4px;
 }

package/src/code/transforms.js

@@ -12,7 +12,7 @@ const transforms = {
 		},
 		{
 			type: 'block',
-			blocks: [ 'core/html' ],
+			blocks: [ 'core/html', 'core/paragraph' ],
 			transform: ( { content } ) => {
 				return createBlock( 'core/code', {
 					content,

package/src/column/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/column",
 	"title": "Column",
@@ -27,7 +28,11 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
 			"padding": true,

package/src/columns/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/columns",
 	"title": "Columns",
@@ -20,14 +21,28 @@
 		"html": false,
 		"color": {
 			"gradients": true,
-			"link": true
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
 		},
 		"spacing": {
+			"blockGap": true,
 			"margin": [ "top", "bottom" ],
 			"padding": true,
 			"__experimentalDefaultControls": {
 				"padding": true
 			}
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"allowEditing": false,
+			"default": {
+				"type": "flex",
+				"flexWrap": "nowrap"
+			}
 		}
 	},
 	"editorStyle": "wp-block-columns-editor",

package/src/columns/editor.scss

@@ -8,21 +8,6 @@
 	margin-right: 0;
 }
 
-// To do: remove horizontal margin override by the editor.
-@include break-small() {
-	.editor-styles-wrapper
-	.block-editor-block-list__block.wp-block-column:nth-child(even) {
-		margin-left: var(--wp--style--block-gap, 2em);
-	}
-}
-
-@include break-medium() {
-	.editor-styles-wrapper
-	.block-editor-block-list__block.wp-block-column:not(:first-child) {
-		margin-left: var(--wp--style--block-gap, 2em);
-	}
-}
-
 // Individual columns do not have top and bottom margins on the frontend.
 // So we make the editor match that.
 // We use :where to provide minimum specificity, so that intentional margins,

package/src/columns/style.scss

@@ -4,15 +4,15 @@
 	box-sizing: border-box;
 
 	// Responsiveness: Allow wrapping on mobile.
-	flex-wrap: wrap;
+	flex-wrap: wrap !important;
 
 	@include break-medium() {
-		flex-wrap: nowrap;
+		flex-wrap: nowrap !important;
 	}
 
-	&:where(.has-background) {
-		padding: $block-bg-padding--v $block-bg-padding--h;
-	}
+	// Ensure full vertical column stretch when alignment is not set.
+	// This overrides the Layout block support's default align-items setting of `center`.
+	align-items: initial !important;
 
 	/**
 	* All Columns Alignment
@@ -30,30 +30,12 @@
 	}
 
 	&:not(.is-not-stacked-on-mobile) > .wp-block-column {
-		@media (max-width: #{ ($break-small - 1) }) {
+		@media (max-width: #{ ($break-medium - 1) }) {
 			// Responsiveness: Show at most one columns on mobile. This must be
 			// important since the Column assigns its own width as an inline style.
 			flex-basis: 100% !important;
 		}
 
-		// Between mobile and large viewports, allow 2 columns.
-		@media (min-width: #{ ($break-small) }) and (max-width: #{ ($break-medium - 1) }) {
-			// Only add two column styling if there are two or more columns
-			&:not(:only-child) {
-				// As with mobile styles, this must be important since the Column
-				// assigns its own width as an inline style, which should take effect
-				// starting at `break-medium`.
-				flex-basis: calc(50% - calc(var(--wp--style--block-gap, 2em) / 2)) !important;
-				flex-grow: 0;
-			}
-
-			// Add space between the multiple columns. Themes can customize this if they wish to work differently.
-			// Only apply this beyond the mobile breakpoint, as there's only a single column on mobile.
-			&:nth-child(even) {
-				margin-left: var(--wp--style--block-gap, 2em);
-			}
-		}
-
 		// At large viewports, show all columns horizontally.
 		@include break-medium() {
 			// Available space should be divided equally amongst columns without an
@@ -71,36 +53,33 @@
 			&[style*="flex-basis"] {
 				flex-grow: 0;
 			}
-
-			// When columns are in a single row, add space before all except the first.
-			&:not(:first-child) {
-				margin-left: var(--wp--style--block-gap, 2em);
-			}
 		}
 	}
 
 	&.is-not-stacked-on-mobile {
-		flex-wrap: nowrap;
+		flex-wrap: nowrap !important;
 
 		> .wp-block-column {
 			// Available space should be divided equally amongst columns.
 			flex-basis: 0;
-			flex-grow: 1;
 
+			flex-grow: 1;
 			// Columns with an explicitly-assigned width should maintain their
 			// `flex-basis` width and not grow.
 			&[style*="flex-basis"] {
 				flex-grow: 0;
 			}
-
-			// When columns are in a single row, add space before all except the first.
-			&:not(:first-child) {
-				margin-left: var(--wp--style--block-gap, 2em);
-			}
 		}
 	}
 }
 
+// Add low specificity default padding to columns blocks with backgrounds.
+:where(.wp-block-columns.has-background) {
+	// Matches paragraph block padding.
+	padding: $block-bg-padding--v $block-bg-padding--h;
+}
+
+
 .wp-block-column {
 	flex-grow: 1;
 

package/src/comment-author-avatar/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/comment-author-avatar",
 	"title": "Comment Author Avatar",
@@ -28,7 +29,14 @@
 		"color": {
 			"background": true,
 			"text": false,
-			"links": false
+			"__experimentalDefaultControls": {
+				"background": true
+			}
+		},
+		"spacing": {
+			"__experimentalSkipSerialization": true,
+			"margin": true,
+			"padding": true
 		}
 	}
 }

package/src/comment-author-avatar/edit.js

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import {
+	InspectorControls,
+	useBlockProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+} from '@wordpress/block-editor';
 import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
 import { useEntityProp } from '@wordpress/core-data';
 import { __, _x, isRTL } from '@wordpress/i18n';
@@ -10,6 +14,7 @@ export default function Edit( {
 	attributes,
 	context: { commentId },
 	setAttributes,
+	isSelected,
 } ) {
 	const { height, width } = attributes;
 
@@ -31,6 +36,7 @@ export default function Edit( {
 	const minSize = sizes ? sizes[ 0 ] : 24;
 	const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96;
 	const blockProps = useBlockProps();
+	const spacingProps = useSpacingProps( attributes );
 	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
 
 	const inspectorControls = (
@@ -59,6 +65,7 @@ export default function Edit( {
 				width,
 				height,
 			} }
+			showHandle={ isSelected }
 			onResizeStop={ ( event, direction, elt, delta ) => {
 				setAttributes( {
 					height: parseInt( height + delta.height, 10 ),
@@ -90,7 +97,7 @@ export default function Edit( {
 	return (
 		<>
 			{ inspectorControls }
-			<div>{ displayAvatar }</div>
+			<div { ...spacingProps }>{ displayAvatar }</div>
 		</>
 	);
 }

package/src/comment-author-avatar/index.php

@@ -25,15 +25,31 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 
 	// This is the only way to retreive style and classes on different instances.
 	$wrapper_attributes = WP_Block_Supports::get_instance()->apply_block_supports();
-	$width              = isset( $attributes['width'] ) ? $attributes['width'] : 96;
-	$height             = isset( $attributes['height'] ) ? $attributes['height'] : 96;
-	$styles             = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
-	$classes            = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
+
+	/**
+	 * We get the spacing attributes and transform the array provided into a string formatted for being applied as a style html tag.
+	 * Good candidate to be moved to a separate function in core.
+	*/
+	$spacing_attributes = isset( $attributes['style']['spacing'] ) ? $attributes['style']['spacing'] : null;
+	if ( isset( $spacing_attributes ) && ! empty( $spacing_attributes ) ) {
+		$spacing_array = array();
+		foreach ( $spacing_attributes as $spacing_attribute_key => $spacing_attribute_value ) {
+			foreach ( $spacing_attribute_value as $position_key => $position_value ) {
+				$spacing_array[] = $spacing_attribute_key . '-' . $position_key . ': ' . $position_value;
+			}
+		}
+		$spacing_string = implode( ';', $spacing_array );
+	}
+
+	$width   = isset( $attributes['width'] ) ? $attributes['width'] : 96;
+	$height  = isset( $attributes['height'] ) ? $attributes['height'] : 96;
+	$styles  = isset( $wrapper_attributes['style'] ) ? $wrapper_attributes['style'] : '';
+	$classes = isset( $wrapper_attributes['class'] ) ? $wrapper_attributes['class'] : '';
 
 	/* translators: %s is the Comment Author name */
 	$alt = sprintf( __( '%s Avatar' ), $comment->comment_author );
 
-	$avatar_string = get_avatar(
+	$avatar_block = get_avatar(
 		$comment,
 		null,
 		'',
@@ -45,7 +61,10 @@ function render_block_core_comment_author_avatar( $attributes, $content, $block
 			'class'      => $classes,
 		)
 	);
-	return $avatar_string;
+	if ( isset( $spacing_attributes ) ) {
+		return sprintf( '<div style="%1s">%2s</div>', esc_attr( $spacing_string ), $avatar_block );
+	}
+	return sprintf( '<div>%1s</div>', $avatar_block );
 }
 
 /**