@wordpress/block-library 6.0.2 → 6.0.6

package/src/buttons/deprecated.js

@@ -1,9 +1,82 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks } from '@wordpress/block-editor';
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * @param {Object} attributes Block's attributes.
+ */
+const migrateWithLayout = ( attributes ) => {
+	if ( !! attributes.layout ) {
+		return attributes;
+	}
+
+	const {
+		contentJustification,
+		orientation,
+		...updatedAttributes
+	} = attributes;
+
+	if ( contentJustification || orientation ) {
+		Object.assign( updatedAttributes, {
+			layout: {
+				type: 'flex',
+				...( contentJustification && {
+					justifyContent: contentJustification,
+				} ),
+				...( orientation && { orientation } ),
+			},
+		} );
+	}
+
+	return updatedAttributes;
+};
 
 const deprecated = [
+	{
+		attributes: {
+			contentJustification: {
+				type: 'string',
+			},
+			orientation: {
+				type: 'string',
+				default: 'horizontal',
+			},
+		},
+		supports: {
+			anchor: true,
+			align: [ 'wide', 'full' ],
+			__experimentalExposeControlsToChildren: true,
+			spacing: {
+				blockGap: true,
+				margin: [ 'top', 'bottom' ],
+				__experimentalDefaultControls: {
+					blockGap: true,
+				},
+			},
+		},
+		isEligible: ( { contentJustification, orientation } ) =>
+			!! contentJustification || !! orientation,
+		migrate: migrateWithLayout,
+		save( { attributes: { contentJustification, orientation } } ) {
+			return (
+				<div
+					{ ...useBlockProps.save( {
+						className: classnames( {
+							[ `is-content-justification-${ contentJustification }` ]: contentJustification,
+							'is-vertical': orientation === 'vertical',
+						} ),
+					} ) }
+				>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+	},
 	{
 		supports: {
 			align: [ 'center', 'left', 'right' ],
@@ -20,7 +93,7 @@ const deprecated = [
 			return align && [ 'center', 'left', 'right' ].includes( align );
 		},
 		migrate( attributes ) {
-			return {
+			return migrateWithLayout( {
 				...attributes,
 				align: undefined,
 				// Floating Buttons blocks shouldn't have been supported in the
@@ -30,7 +103,7 @@ const deprecated = [
 				// As for center-aligned Buttons blocks, the content justification
 				// equivalent will create an identical end result in most cases.
 				contentJustification: attributes.align,
-			};
+			} );
 		},
 	},
 ];

package/src/buttons/edit.js

@@ -1,16 +1,9 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import {
-	BlockControls,
 	useBlockProps,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
-	JustifyContentControl,
+	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -21,28 +14,9 @@ import { useSelect } from '@wordpress/data';
 import { name as buttonBlockName } from '../button';
 
 const ALLOWED_BLOCKS = [ buttonBlockName ];
-const LAYOUT = {
-	type: 'default',
-	alignments: [],
-};
-const VERTICAL_JUSTIFY_CONTROLS = [ 'left', 'center', 'right' ];
-const HORIZONTAL_JUSTIFY_CONTROLS = [
-	'left',
-	'center',
-	'right',
-	'space-between',
-];
 
-function ButtonsEdit( {
-	attributes: { contentJustification, orientation },
-	setAttributes,
-} ) {
-	const blockProps = useBlockProps( {
-		className: classnames( {
-			[ `is-content-justification-${ contentJustification }` ]: contentJustification,
-			'is-vertical': orientation === 'vertical',
-		} ),
-	} );
+function ButtonsEdit( { attributes: { layout = {} } } ) {
+	const blockProps = useBlockProps();
 	const preferredStyle = useSelect( ( select ) => {
 		const preferredStyleVariations = select(
 			blockEditorStore
@@ -58,31 +32,12 @@ function ButtonsEdit( {
 				{ className: preferredStyle && `is-style-${ preferredStyle }` },
 			],
 		],
-		orientation,
-		__experimentalLayout: LAYOUT,
+		__experimentalLayout: layout,
 		templateInsertUpdatesSelection: true,
 	} );
 
-	const justifyControls =
-		orientation === 'vertical'
-			? VERTICAL_JUSTIFY_CONTROLS
-			: HORIZONTAL_JUSTIFY_CONTROLS;
-
 	return (
 		<>
-			<BlockControls group="block" __experimentalShareWithChildBlocks>
-				<JustifyContentControl
-					allowedControls={ justifyControls }
-					value={ contentJustification }
-					onChange={ ( value ) =>
-						setAttributes( { contentJustification: value } )
-					}
-					popoverProps={ {
-						position: 'bottom right',
-						isAlternate: true,
-					} }
-				/>
-			</BlockControls>
 			<div { ...innerBlocksProps } />
 		</>
 	);

package/src/buttons/editor.scss

@@ -1,11 +1,6 @@
 // This variable is repeated across Button, Buttons, and Buttons editor styles.
 $blocks-block__margin: 0.5em;
 
-.wp-block > .wp-block-buttons {
-	display: flex;
-	flex-wrap: wrap;
-}
-
 .wp-block-buttons {
 	// Override editor auto block margins for button as well as the block appender.
 	> .wp-block {

package/src/buttons/index.js

@@ -12,7 +12,6 @@ import transforms from './transforms';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
-import variations from './variations';
 
 const { name } = metadata;
 
@@ -36,5 +35,4 @@ export const settings = {
 	transforms,
 	edit,
 	save,
-	variations,
 };

package/src/buttons/save.js

@@ -1,26 +1,9 @@
-/**
- * External dependencies
- */
-import classnames from 'classnames';
-
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
 
-export default function save( {
-	attributes: { contentJustification, orientation },
-} ) {
-	return (
-		<div
-			{ ...useBlockProps.save( {
-				className: classnames( {
-					[ `is-content-justification-${ contentJustification }` ]: contentJustification,
-					'is-vertical': orientation === 'vertical',
-				} ),
-			} ) }
-		>
-			<InnerBlocks.Content />
-		</div>
-	);
+export default function save() {
+	const innerBlocksProps = useInnerBlocksProps.save( useBlockProps.save() );
+	return <div { ...innerBlocksProps } />;
 }

package/src/buttons/style.scss

@@ -2,10 +2,6 @@
 $blocks-block__margin: 0.5em;
 
 .wp-block-buttons {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: var(--wp--style--block-gap, $blocks-block__margin);
 
 	&.is-vertical {
 		flex-direction: column;

package/src/calendar/index.php

@@ -107,47 +107,51 @@ function block_core_calendar_update_has_published_posts() {
 	return $has_published_posts;
 }
 
-// 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;
-		}
+/**
+ * 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 );
 
-		block_core_calendar_update_has_published_posts();
+	if ( ! $post || 'publish' !== $post->post_status || 'post' !== $post->post_type ) {
+		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;
-		}
+	block_core_calendar_update_has_published_posts();
+}
 
-		if ( 'post' !== get_post_type( $post ) ) {
-			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 ( is_multisite() ) {
+		return;
+	}
 
-		if ( 'publish' !== $new_status && 'publish' !== $old_status ) {
-			return;
-		}
+	if ( $new_status === $old_status ) {
+		return;
+	}
 
-		block_core_calendar_update_has_published_posts();
+	if ( 'post' !== get_post_type( $post ) ) {
+		return;
 	}
 
-	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 );
+	if ( 'publish' !== $new_status && 'publish' !== $old_status ) {
+		return;
+	}
+
+	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 );

package/src/code/block.json

@@ -16,7 +16,30 @@
 		"anchor": true,
 		"__experimentalSelector": ".wp-block-code > code",
 		"typography": {
-			"fontSize": true
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"padding": true
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"color": {
+			"text": true,
+			"background": true,
+			"gradients": true
 		}
 	},
 	"style": "wp-block-code"

package/src/column/block.json

@@ -17,6 +17,7 @@
 			"type": "array"
 		},
 		"templateLock": {
+			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", false ]
 		}
 	},

package/src/column/edit.js

@@ -13,7 +13,7 @@ import {
 	InspectorControls,
 	useBlockProps,
 	useSetting,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {

package/src/column/save.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { verticalAlignment, width } = attributes;
@@ -17,7 +17,7 @@ export default function save( { attributes } ) {
 
 	let style;
 
-	if ( width ) {
+	if ( width && /\d/.test( width ) ) {
 		// Numbers are handled for backward compatibility as they can be still provided with templates.
 		let flexBasis = Number.isFinite( width ) ? width + '%' : width;
 		// In some cases we need to round the width to a shorter float.
@@ -32,14 +32,11 @@ export default function save( { attributes } ) {
 		style = { flexBasis };
 	}
 
-	return (
-		<div
-			{ ...useBlockProps.save( {
-				className: wrapperClasses,
-				style,
-			} ) }
-		>
-			<InnerBlocks.Content />
-		</div>
-	);
+	const blockProps = useBlockProps.save( {
+		className: wrapperClasses,
+		style,
+	} );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <div { ...innerBlocksProps } />;
 }

package/src/columns/block.json

@@ -25,6 +25,7 @@
 		"spacing": {
 			"blockGap": true,
 			"margin": [ "top", "bottom" ],
+			"padding": true,
 			"__experimentalDefaultControls": {
 				"blockGap": true
 			}

package/src/columns/edit.js

@@ -17,7 +17,7 @@ import {
 
 import {
 	InspectorControls,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
 	__experimentalBlockVariationPicker,

package/src/columns/save.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( { attributes } ) {
 	const { isStackedOnMobile, verticalAlignment } = attributes;
@@ -16,9 +16,8 @@ export default function save( { attributes } ) {
 		[ `is-not-stacked-on-mobile` ]: ! isStackedOnMobile,
 	} );
 
-	return (
-		<div { ...useBlockProps.save( { className } ) }>
-			<InnerBlocks.Content />
-		</div>
-	);
+	const blockProps = useBlockProps.save( { className } );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
+
+	return <div { ...innerBlocksProps } />;
 }

package/src/columns/style.scss

@@ -10,7 +10,7 @@
 		flex-wrap: nowrap;
 	}
 
-	&.has-background {
+	&:where(.has-background) {
 		padding: $block-bg-padding--v $block-bg-padding--h;
 	}
 

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

@@ -0,0 +1,34 @@
+{
+	"apiVersion": 2,
+	"name": "core/comment-author-avatar",
+	"title": "Comment Author Avatar",
+	"category": "theme",
+	"parent": [ "core/comment-template" ],
+	"description": "Add the avatar of this comment's author.",
+	"textdomain": "default",
+	"attributes": {
+		"width": {
+			"type": "number",
+			"default": 96
+		},
+		"height": {
+			"type": "number",
+			"default": 96
+		}
+	},
+	"usesContext": [ "commentId" ],
+	"supports": {
+		"html": false,
+		"__experimentalBorder": {
+			"radius": true,
+			"width": true,
+			"color": true,
+			"style": true
+		},
+		"color": {
+			"background": true,
+			"text": false,
+			"links": false
+		}
+	}
+}

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

@@ -0,0 +1,96 @@
+/**
+ * WordPress dependencies
+ */
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { PanelBody, ResizableBox, RangeControl } from '@wordpress/components';
+import { useEntityProp } from '@wordpress/core-data';
+import { __, _x, isRTL } from '@wordpress/i18n';
+
+export default function Edit( {
+	attributes,
+	context: { commentId },
+	setAttributes,
+} ) {
+	const { height, width } = attributes;
+
+	const [ avatars ] = useEntityProp(
+		'root',
+		'comment',
+		'author_avatar_urls',
+		commentId
+	);
+
+	const [ authorName ] = useEntityProp(
+		'root',
+		'comment',
+		'author_name',
+		commentId
+	);
+	const avatarUrls = avatars ? Object.values( avatars ) : null;
+	const sizes = avatars ? Object.keys( avatars ) : null;
+	const minSize = sizes ? sizes[ 0 ] : 24;
+	const maxSize = sizes ? sizes[ sizes.length - 1 ] : 96;
+	const blockProps = useBlockProps();
+	const maxSizeBuffer = Math.floor( maxSize * 2.5 );
+
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Avatar Settings' ) }>
+				<RangeControl
+					label={ __( 'Image size' ) }
+					onChange={ ( newWidth ) =>
+						setAttributes( {
+							width: newWidth,
+							height: newWidth,
+						} )
+					}
+					min={ minSize }
+					max={ maxSizeBuffer }
+					initialPosition={ width }
+					value={ width }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	const displayAvatar = avatarUrls ? (
+		<ResizableBox
+			size={ {
+				width,
+				height,
+			} }
+			onResizeStop={ ( event, direction, elt, delta ) => {
+				setAttributes( {
+					height: parseInt( height + delta.height, 10 ),
+					width: parseInt( width + delta.width, 10 ),
+				} );
+			} }
+			lockAspectRatio
+			enable={ {
+				top: false,
+				right: ! isRTL(),
+				bottom: true,
+				left: isRTL(),
+			} }
+			minWidth={ minSize }
+			maxWidth={ maxSizeBuffer }
+		>
+			<img
+				src={ avatarUrls[ avatarUrls.length - 1 ] }
+				alt={ `${ authorName } ${ __( 'Avatar' ) }` }
+				{ ...blockProps }
+			/>
+		</ResizableBox>
+	) : (
+		<p { ...blockProps }>
+			{ _x( 'Comment Author Avatar', 'block title' ) }
+		</p>
+	);
+
+	return (
+		<>
+			{ inspectorControls }
+			<div>{ displayAvatar }</div>
+		</>
+	);
+}

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

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { commentAuthorAvatar as icon } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import edit from './edit';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};