@wordpress/block-library 6.0.1 → 6.0.5

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 {
@@ -25,7 +25,12 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { sprintf, __ } from '@wordpress/i18n';
 
 function ColumnEdit( {
-	attributes: { verticalAlignment, width, templateLock = false },
+	attributes: {
+		verticalAlignment,
+		width,
+		templateLock = false,
+		allowedBlocks,
+	},
 	setAttributes,
 	clientId,
 } ) {
@@ -92,6 +97,7 @@ function ColumnEdit( {
 		{ ...blockProps, 'aria-label': label },
 		{
 			templateLock,
+			allowedBlocks,
 			renderAppender: hasChildBlocks
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,

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/comment-author-name/block.json

@@ -0,0 +1,43 @@
+{
+	"apiVersion": 2,
+	"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": {
+			"type": "boolean",
+			"default": false
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_self"
+		},
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"usesContext": [ "commentId" ],
+	"supports": {
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"color": {
+			"gradients": true,
+			"link": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		}
+	}
+}

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

@@ -0,0 +1,50 @@
+/**
+ * Internal dependencies
+ */
+import migrateFontFamily from '../utils/migrate-font-family';
+
+const v1 = {
+	attributes: {
+		isLink: {
+			type: 'boolean',
+			default: false,
+		},
+		linkTarget: {
+			type: 'string',
+			default: '_self',
+		},
+	},
+	supports: {
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalFontWeight: true,
+			__experimentalFontStyle: true,
+			__experimentalTextTransform: true,
+			__experimentalLetterSpacing: true,
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateFontFamily,
+	isEligible( { style } ) {
+		return style?.typography?.fontFamily;
+	},
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v1 ];

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>
+		</>
+	);
+}

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

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

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

@@ -0,0 +1,57 @@
+<?php
+/**
+ * Server-side rendering of the `core/comment-author-name` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comment-author-name` 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 author.
+ */
+function render_block_core_comment_author_name( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['commentId'] ) ) {
+		return '';
+	}
+
+	$comment = get_comment( $block->context['commentId'] );
+	if ( empty( $comment ) ) {
+		return '';
+	}
+
+	$classes = '';
+	if ( isset( $attributes['textAlign'] ) ) {
+		$classes .= 'has-text-align-' . esc_attr( $attributes['textAlign'] );
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$comment_author     = get_comment_author( $comment );
+	$link               = get_comment_author_url( $comment );
+
+	if ( ! empty( $attributes['isLink'] ) && ! empty( $attributes['linkTarget'] ) ) {
+		$comment_author = sprintf( '<a rel="external nofollow ugc" href="%1s" target="%2s" >%3s</a>', esc_url( $link ), esc_attr( $attributes['linkTarget'] ), $comment_author );
+	}
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		$comment_author
+	);
+}
+
+/**
+ * Registers the `core/comment-author-name` block on the server.
+ */
+function register_block_core_comment_author_name() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comment-author-name',
+		array(
+			'render_callback' => 'render_block_core_comment_author_name',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_comment_author_name' );

package/src/comment-content/block.json

@@ -0,0 +1,37 @@
+{
+	"apiVersion": 2,
+	"name": "core/comment-content",
+	"title": "Comment Content",
+	"category": "theme",
+	"parent": [ "core/comment-template" ],
+	"description": "Displays the contents of a comment.",
+	"textdomain": "default",
+	"usesContext": [ "commentId" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"color": {
+			"gradients": true,
+			"link": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
+		},
+		"spacing": {
+			"padding": [ "horizontal", "vertical" ],
+			"__experimentalDefaultControls": {
+				"padding": true
+			}
+		},
+		"html": false
+	}
+}