@wordpress/block-library 6.0.2 → 6.0.3

package/src/buttons/edit.js

@@ -1,16 +1,10 @@
-/**
- * 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 +15,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 +33,16 @@ 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>
+			<BlockControls
+				group="block"
+				__experimentalShareWithChildBlocks
+			></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/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",
 			"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,
+};

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

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Server-side rendering of the `core/comment-author-avatar` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comment-author-avatar` block on the server.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ * @return string Return the post comment's avatar.
+ */
+function render_block_core_comment_author_avatar( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['commentId'] ) ) {
+		return '';
+	}
+
+	$comment = get_comment( $block->context['commentId'] );
+	if ( ! $comment ) {
+		return '';
+	}
+
+	// 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'] : '';
+
+	/* translators: %s is the Comment Author name */
+	$alt = sprintf( __( '%s Avatar' ), $comment->comment_author );
+
+	$avatar_string = get_avatar(
+		$comment,
+		null,
+		'',
+		$alt,
+		array(
+			'height'     => $height,
+			'width'      => $width,
+			'extra_attr' => sprintf( 'style="%1s"', $styles ),
+			'class'      => $classes,
+		)
+	);
+	return $avatar_string;
+}
+
+/**
+ * Registers the `core/comment-author-avatar` block on the server.
+ */
+function register_block_core_comment_author_avatar() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comment-author-avatar',
+		array(
+			'render_callback' => 'render_block_core_comment_author_avatar',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comment_author_avatar' );

package/src/{post-comment-author → comment-author-name}/block.json

@@ -1,10 +1,10 @@
 {
 	"apiVersion": 2,
-	"name": "core/post-comment-author",
-	"title": "Post Comment Author",
-	"category": "design",
-	"parent": [ "core/post-comment" ],
-	"description": "Post comment author.",
+	"name": "core/comment-author-name",
+	"title": "Comment Author Name",
+	"category": "theme",
+	"parent": [ "core/comment-template" ],
+	"description": "Add the author name of this comment.",
 	"textdomain": "default",
 	"attributes": {
 		"isLink": {
@@ -14,11 +14,18 @@
 		"linkTarget": {
 			"type": "string",
 			"default": "_self"
+		},
+		"textAlign": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "commentId" ],
 	"supports": {
 		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true

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

@@ -0,0 +1,124 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import {
+	AlignmentControl,
+	BlockControls,
+	InspectorControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+
+/**
+ * Renders the `core/comment-author-name` block on the editor.
+ *
+ * @param {Object} props                       React props.
+ * @param {Object} props.setAttributes         Callback for updating block attributes.
+ * @param {Object} props.attributes            Block attributes.
+ * @param {string} props.attributes.isLink     Whether the author name should be linked.
+ * @param {string} props.attributes.linkTarget Target of the link.
+ * @param {string} props.attributes.textAlign  Text alignment.
+ * @param {Object} props.context               Inherited context.
+ * @param {string} props.context.commentId     The comment ID.
+ *
+ * @return {JSX.Element} React element.
+ */
+export default function Edit( {
+	attributes: { isLink, linkTarget, textAlign },
+	context: { commentId },
+	setAttributes,
+} ) {
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+	const displayName = useSelect(
+		( select ) => {
+			const { getEntityRecord } = select( coreStore );
+
+			const comment = getEntityRecord( 'root', 'comment', commentId );
+			const authorName = comment?.author_name; // eslint-disable-line camelcase
+
+			if ( comment && ! authorName ) {
+				const user = getEntityRecord( 'root', 'user', comment.author );
+				return user?.name ?? __( 'Anonymous' );
+			}
+			return authorName ?? '';
+		},
+		[ commentId ]
+	);
+
+	const blockControls = (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ textAlign }
+				onChange={ ( newAlign ) =>
+					setAttributes( { textAlign: newAlign } )
+				}
+			/>
+		</BlockControls>
+	);
+
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Link settings' ) }>
+				<ToggleControl
+					label={ __( 'Link to authors URL' ) }
+					onChange={ () => setAttributes( { isLink: ! isLink } ) }
+					checked={ isLink }
+				/>
+				{ isLink && (
+					<ToggleControl
+						label={ __( 'Open in new tab' ) }
+						onChange={ ( value ) =>
+							setAttributes( {
+								linkTarget: value ? '_blank' : '_self',
+							} )
+						}
+						checked={ linkTarget === '_blank' }
+					/>
+				) }
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	if ( ! commentId || ! displayName ) {
+		return (
+			<>
+				{ inspectorControls }
+				{ blockControls }
+				<div { ...blockProps }>
+					<p>{ _x( 'Comment Author', 'block title' ) }</p>
+				</div>
+			</>
+		);
+	}
+
+	const displayAuthor = isLink ? (
+		<a
+			href="#comment-author-pseudo-link"
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			{ displayName }
+		</a>
+	) : (
+		<p>{ displayName }</p>
+	);
+
+	return (
+		<>
+			{ inspectorControls }
+			{ blockControls }
+			<div { ...blockProps }>{ displayAuthor }</div>
+		</>
+	);
+}