@wordpress/block-library 7.3.0 → 7.4.0

package/src/comments-title/edit.js

@@ -0,0 +1,197 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	AlignmentControl,
+	BlockControls,
+	useBlockProps,
+	PlainText,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { useEntityProp } from '@wordpress/core-data';
+import {
+	PanelBody,
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
+import apiFetch from '@wordpress/api-fetch';
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelDropdown from '../heading/heading-level-dropdown';
+
+export default function Edit( {
+	attributes: {
+		textAlign,
+		singleCommentLabel,
+		multipleCommentsLabel,
+		showPostTitle,
+		showCommentsCount,
+		level,
+	},
+	setAttributes,
+	context: { postType, postId },
+} ) {
+	const TagName = 'h' + level;
+	const [ commentsCount, setCommentsCount ] = useState();
+	const [ editingMode, setEditingMode ] = useState( 'plural' );
+	const [ rawTitle ] = useEntityProp( 'postType', postType, 'title', postId );
+	const isSiteEditor = typeof postId === 'undefined';
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	useEffect( () => {
+		if ( isSiteEditor ) {
+			setCommentsCount( 3 );
+			return;
+		}
+		const currentPostId = postId;
+		apiFetch( {
+			path: addQueryArgs( '/wp/v2/comments', {
+				post: postId,
+				_fields: 'id',
+			} ),
+			method: 'HEAD',
+			parse: false,
+		} )
+			.then( ( res ) => {
+				// Stale requests will have the `currentPostId` of an older closure.
+				if ( currentPostId === postId ) {
+					setCommentsCount(
+						parseInt( res.headers.get( 'X-WP-Total' ) )
+					);
+				}
+			} )
+			.catch( () => {
+				setCommentsCount( 0 );
+			} );
+	}, [ postId ] );
+
+	const blockControls = (
+		<BlockControls group="block">
+			<AlignmentControl
+				value={ textAlign }
+				onChange={ ( newAlign ) =>
+					setAttributes( { textAlign: newAlign } )
+				}
+			/>
+			<HeadingLevelDropdown
+				selectedLevel={ level }
+				onChange={ ( newLevel ) =>
+					setAttributes( { level: newLevel } )
+				}
+			/>
+		</BlockControls>
+	);
+
+	const inspectorControls = (
+		<InspectorControls>
+			<PanelBody title={ __( 'Settings' ) }>
+				{ isSiteEditor && (
+					<ToggleGroupControl
+						label={ __( 'Editing mode' ) }
+						onChange={ setEditingMode }
+						value={ editingMode }
+					>
+						<ToggleGroupControlOption
+							label={ __( 'Singular' ) }
+							value="singular"
+						/>
+						<ToggleGroupControlOption
+							label={ __( 'Plural' ) }
+							value="plural"
+						/>
+					</ToggleGroupControl>
+				) }
+				<ToggleControl
+					label={ __( 'Show post title' ) }
+					checked={ showPostTitle }
+					onChange={ ( value ) =>
+						setAttributes( { showPostTitle: value } )
+					}
+				/>
+				<ToggleControl
+					label={ __( 'Show comments count' ) }
+					checked={ showCommentsCount }
+					onChange={ ( value ) =>
+						setAttributes( { showCommentsCount: value } )
+					}
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+
+	const postTitle = isSiteEditor ? __( '"Post Title"' ) : `"${ rawTitle }"`;
+
+	const singlePlaceholder = showPostTitle
+		? __( 'One response to ' )
+		: __( 'One response' );
+
+	const multiplePlaceholder = showPostTitle
+		? __( 'Responses to ' )
+		: __( 'Responses' );
+
+	return (
+		<>
+			{ blockControls }
+			{ inspectorControls }
+			<TagName { ...blockProps }>
+				{ editingMode === 'singular' || commentsCount === 1 ? (
+					<>
+						<PlainText
+							__experimentalVersion={ 2 }
+							tagName="span"
+							aria-label={ singlePlaceholder }
+							placeholder={ singlePlaceholder }
+							value={ singleCommentLabel }
+							onChange={ ( newLabel ) =>
+								setAttributes( {
+									singleCommentLabel: newLabel,
+								} )
+							}
+						/>
+						{ showPostTitle ? postTitle : null }
+					</>
+				) : (
+					<>
+						{ showCommentsCount ? commentsCount : null }
+						<PlainText
+							__experimentalVersion={ 2 }
+							tagName="span"
+							aria-label={
+								showCommentsCount
+									? ` ${ multiplePlaceholder }`
+									: multiplePlaceholder
+							}
+							placeholder={
+								showCommentsCount
+									? ` ${ multiplePlaceholder }`
+									: multiplePlaceholder
+							}
+							value={ multipleCommentsLabel }
+							onChange={ ( newLabel ) =>
+								setAttributes( {
+									multipleCommentsLabel: newLabel,
+								} )
+							}
+						/>
+						{ showPostTitle ? postTitle : null }
+					</>
+				) }
+			</TagName>
+		</>
+	);
+}

package/src/comments-title/editor.scss

@@ -0,0 +1,4 @@
+
+.wp-block-comments-title.has-background {
+	padding: inherit;
+}

package/src/comments-title/index.js

@@ -0,0 +1,18 @@
+/**
+ * WordPress dependencies
+ */
+import { commentTitle 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/comments-title/index.php

@@ -0,0 +1,68 @@
+<?php
+/**
+ * Server-side rendering of the `core/comments-title` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/comments-title` block on the server.
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string Return the post comments title.
+ */
+function render_block_core_comments_title( $attributes ) {
+
+	$align_class_name    = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	$show_post_title     = ! empty( $attributes['showPostTitle'] ) && $attributes['showPostTitle'];
+	$show_comments_count = ! empty( $attributes['showCommentsCount'] ) && $attributes['showCommentsCount'];
+	$wrapper_attributes  = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	$post_title          = $show_post_title ? sprintf( '"%1$s"', get_the_title() ) : null;
+	$comments_count      = number_format_i18n( get_comments_number() );
+	$tag_name            = 'h2';
+	if ( isset( $attributes['level'] ) ) {
+		$tag_name = 'h' . $attributes['level'];
+	}
+
+	if ( '0' === $comments_count ) {
+		return;
+	}
+
+	$single_default_comment_label = $show_post_title ? __( 'One response to' ) : __( 'One response' );
+	$single_comment_label         = ! empty( $attributes['singleCommentLabel'] ) ? $attributes['singleCommentLabel'] : $single_default_comment_label;
+
+	$multiple_default_comment_label = $show_post_title ? __( 'Responses to' ) : __( 'Responses' );
+	$multiple_comment_label         = ! empty( $attributes['multipleCommentsLabel'] ) ? $attributes['multipleCommentsLabel'] : $multiple_default_comment_label;
+
+	$comments_title = '%1$s %2$s %3$s';
+
+	$comments_title = sprintf(
+		$comments_title,
+		// If there is only one comment, only display the label.
+		'1' !== $comments_count && $show_comments_count ? $comments_count : null,
+		'1' === $comments_count ? $single_comment_label : $multiple_comment_label,
+		$post_title
+	);
+
+	return sprintf(
+		'<%1$s id="comments" %2$s>%3$s</%1$s>',
+		$tag_name,
+		$wrapper_attributes,
+		$comments_title
+	);
+}
+
+	/**
+	 * Registers the `core/comments-title` block on the server.
+	 */
+function register_block_core_comments_title() {
+	register_block_type_from_metadata(
+		__DIR__ . '/comments-title',
+		array(
+			'render_callback' => 'render_block_core_comments_title',
+		)
+	);
+}
+
+	add_action( 'init', 'register_block_core_comments_title' );

package/src/common.scss

@@ -116,11 +116,34 @@
 html :where(.has-border-color) {
 	border-style: solid;
 }
+html :where([style*="border-top-color"]) {
+	border-top-style: solid;
+}
+html :where([style*="border-right-color"]) {
+	border-right-style: solid;
+}
+html :where([style*="border-bottom-color"]) {
+	border-bottom-style: solid;
+}
+html :where([style*="border-left-color"]) {
+	border-left-style: solid;
+}
 
 html :where([style*="border-width"]) {
 	border-style: solid;
 }
-
+html :where([style*="border-top-width"]) {
+	border-top-style: solid;
+}
+html :where([style*="border-right-width"]) {
+	border-right-style: solid;
+}
+html :where([style*="border-bottom-width"]) {
+	border-bottom-style: solid;
+}
+html :where([style*="border-left-width"]) {
+	border-left-style: solid;
+}
 
 /**
  * Provide baseline responsiveness for images.

package/src/cover/transforms.js

@@ -64,37 +64,60 @@ const transforms = {
 		{
 			type: 'block',
 			blocks: [ 'core/group' ],
-			isMatch: ( { backgroundColor, gradient, style } ) => {
-				/*
-				 * Make this transformation available only if the Group has background
-				 * or gradient set, because otherwise `Cover` block displays a Placeholder.
-				 *
-				 * This helps avoid arbitrary decisions about the Cover block's background
-				 * and user confusion about the existence of previous content.
-				 */
-				return (
+			transform: ( attributes, innerBlocks ) => {
+				const {
+					align,
+					anchor,
+					backgroundColor,
+					gradient,
+					style,
+				} = attributes;
+
+				// If no background or gradient color is provided, default to 50% opacity.
+				// This matches the styling of a Cover block with a background image,
+				// in the state where a background image has been removed.
+				const dimRatio =
 					backgroundColor ||
+					gradient ||
 					style?.color?.background ||
-					style?.color?.gradient ||
-					gradient
-				);
-			},
-			transform: (
-				{ align, anchor, backgroundColor, gradient, style },
-				innerBlocks
-			) => {
-				return createBlock(
-					'core/cover',
-					{
-						align,
-						anchor,
-						overlayColor: backgroundColor,
-						customOverlayColor: style?.color?.background,
-						gradient,
-						customGradient: style?.color?.gradient,
+					style?.color?.gradient
+						? undefined
+						: 50;
+
+				// Move the background or gradient color to the parent Cover block.
+				const parentAttributes = {
+					align,
+					anchor,
+					dimRatio,
+					overlayColor: backgroundColor,
+					customOverlayColor: style?.color?.background,
+					gradient,
+					customGradient: style?.color?.gradient,
+				};
+
+				const attributesWithoutBackgroundColors = {
+					...attributes,
+					backgroundColor: undefined,
+					gradient: undefined,
+					style: {
+						...attributes?.style,
+						color: {
+							...attributes?.style?.color,
+							background: undefined,
+							gradient: undefined,
+						},
 					},
-					innerBlocks
-				);
+				};
+
+				// Preserve the block by nesting it within the Cover block,
+				// instead of converting the Group block directly to the Cover block.
+				return createBlock( 'core/cover', parentAttributes, [
+					createBlock(
+						'core/group',
+						attributesWithoutBackgroundColors,
+						innerBlocks
+					),
+				] );
 			},
 		},
 	],

package/src/editor.scss

@@ -10,6 +10,7 @@
 @import "./comments-query-loop/editor.scss";
 @import "./comments-pagination/editor.scss";
 @import "./comments-pagination-numbers/editor.scss";
+@import "./comments-title/editor.scss";
 @import "./cover/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";

package/src/embed/edit.js

@@ -5,8 +5,8 @@ import {
 	createUpgradedEmbedBlock,
 	getClassNames,
 	fallback,
-	getAttributesFromPreview,
 	getEmbedInfoByProvider,
+	getMergedAttributesWithPreview,
 } from './util';
 import EmbedControls from './embed-controls';
 import { embedContentIcon } from './icons';
@@ -99,21 +99,19 @@ const EmbedEdit = ( props ) => {
 	);
 
 	/**
-	 * @return {Object} Attributes derived from the preview, merged with the current attributes.
+	 * Returns the attributes derived from the preview, merged with the current attributes.
+	 *
+	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
+	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = () => {
-		const { allowResponsive, className } = attributes;
-		return {
-			...attributes,
-			...getAttributesFromPreview(
-				preview,
-				title,
-				className,
-				responsive,
-				allowResponsive
-			),
-		};
-	};
+	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+		getMergedAttributesWithPreview(
+			attributes,
+			preview,
+			title,
+			responsive,
+			ignorePreviousClassName
+		);
 
 	const toggleResponsive = () => {
 		const { allowResponsive, className } = attributes;
@@ -145,15 +143,12 @@ const EmbedEdit = ( props ) => {
 	// Handle incoming preview.
 	useEffect( () => {
 		if ( preview && ! isEditingURL ) {
-			// Even though we set attributes that get derived from the preview,
-			// we don't access them directly because for the initial render,
-			// the `setAttributes` call will not have taken effect. If we're
-			// rendering responsive content, setting the responsive classes
-			// after the preview has been rendered can result in unwanted
-			// clipping or scrollbars. The `getAttributesFromPreview` function
-			// that `getMergedAttributes` uses is memoized so that we're not
-			// calculating them on every render.
-			setAttributes( getMergedAttributes() );
+			// When obtaining an incoming preview, we set the attributes derived from
+			// the preview data. In this case when getting the merged attributes,
+			// we ignore the previous classname because it might not match the expected
+			// classes by the new preview.
+			setAttributes( getMergedAttributes( true ) );
+
 			if ( onReplace ) {
 				const upgradedBlock = createUpgradedEmbedBlock(
 					props,

package/src/embed/edit.native.js

@@ -5,8 +5,8 @@ import {
 	createUpgradedEmbedBlock,
 	getClassNames,
 	fallback,
-	getAttributesFromPreview,
 	getEmbedInfoByProvider,
+	getMergedAttributesWithPreview,
 } from './util';
 import EmbedControls from './embed-controls';
 import { embedContentIcon } from './icons';
@@ -130,19 +130,14 @@ const EmbedEdit = ( props ) => {
 	 * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
 	 * @return {Object} Merged attributes.
 	 */
-	const getMergedAttributes = ( ignorePreviousClassName = false ) => {
-		const { allowResponsive, className } = attributes;
-		return {
-			...attributes,
-			...getAttributesFromPreview(
-				preview,
-				title,
-				ignorePreviousClassName ? undefined : className,
-				responsive,
-				allowResponsive
-			),
-		};
-	};
+	const getMergedAttributes = ( ignorePreviousClassName = false ) =>
+		getMergedAttributesWithPreview(
+			attributes,
+			preview,
+			title,
+			responsive,
+			ignorePreviousClassName
+		);
 
 	const toggleResponsive = () => {
 		const { allowResponsive, className } = attributes;

package/src/embed/util.js

@@ -66,9 +66,11 @@ export const isFromWordPress = ( html ) =>
 	html && html.includes( 'class="wp-embedded-content"' );
 
 export const getPhotoHtml = ( photo ) => {
+	// If full image url not found use thumbnail.
+	const imageUrl = photo.url || photo.thumbnail_url;
+
 	// 100% width for the preview so it fits nicely into the document, some "thumbnails" are
-	// actually the full size photo. If thumbnails not found, use full image.
-	const imageUrl = photo.thumbnail_url || photo.url;
+	// actually the full size photo.
 	const photoPreview = (
 		<p>
 			<img src={ imageUrl } alt={ photo.title } width="100%" />
@@ -290,3 +292,33 @@ export const getAttributesFromPreview = memoize(
 		return attributes;
 	}
 );
+
+/**
+ * Returns the attributes derived from the preview, merged with the current attributes.
+ *
+ * @param {Object}  currentAttributes       The current attributes of the block.
+ * @param {Object}  preview                 The preview data.
+ * @param {string}  title                   The block's title, e.g. Twitter.
+ * @param {boolean} isResponsive            Boolean indicating if the block supports responsive content.
+ * @param {boolean} ignorePreviousClassName Determines if the previous className attribute should be ignored when merging.
+ * @return {Object} Merged attributes.
+ */
+export const getMergedAttributesWithPreview = (
+	currentAttributes,
+	preview,
+	title,
+	isResponsive,
+	ignorePreviousClassName = false
+) => {
+	const { allowResponsive, className } = currentAttributes;
+	return {
+		...currentAttributes,
+		...getAttributesFromPreview(
+			preview,
+			title,
+			ignorePreviousClassName ? undefined : className,
+			isResponsive,
+			allowResponsive
+		),
+	};
+};

package/src/file/inspector.js

@@ -68,7 +68,7 @@ export default function FileBlockInspector( {
 						) }
 					</PanelBody>
 				) }
-				<PanelBody title={ __( 'Text link settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					<SelectControl
 						label={ __( 'Link to' ) }
 						value={ textLinkHref }
@@ -80,8 +80,6 @@ export default function FileBlockInspector( {
 						checked={ openInNewWindow }
 						onChange={ changeOpenInNewWindow }
 					/>
-				</PanelBody>
-				<PanelBody title={ __( 'Download button settings' ) }>
 					<ToggleControl
 						label={ __( 'Show download button' ) }
 						checked={ showDownloadButton }

package/src/gallery/edit.js

@@ -478,7 +478,7 @@ function GalleryEdit( props ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Gallery settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ images.length > 1 && (
 						<RangeControl
 							label={ __( 'Columns' ) }

package/src/gallery/v1/edit.js

@@ -420,7 +420,7 @@ function GalleryEdit( props ) {
 	return (
 		<>
 			<InspectorControls>
-				<PanelBody title={ __( 'Gallery settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ images.length > 1 && (
 						<RangeControl
 							label={ __( 'Columns' ) }

package/src/html/edit.js

@@ -59,14 +59,14 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
 						isPressed={ ! isPreview }
 						onClick={ switchToHTML }
 					>
-						<span>HTML</span>
+						HTML
 					</ToolbarButton>
 					<ToolbarButton
 						className="components-tab-button"
 						isPressed={ isPreview }
 						onClick={ switchToPreview }
 					>
-						<span>{ __( 'Preview' ) }</span>
+						{ __( 'Preview' ) }
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>

package/src/image/edit.js

@@ -22,8 +22,6 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { image as icon } from '@wordpress/icons';
 
-/* global wp */
-
 /**
  * Internal dependencies
  */
@@ -97,7 +95,7 @@ function hasDefaultSize( image, defaultSize ) {
  * @return {boolean} Whether the image has been destroyed.
  */
 export function isMediaDestroyed( id ) {
-	const attachment = wp?.media?.attachment( id ) || {};
+	const attachment = window?.wp?.media?.attachment( id ) || {};
 	return attachment.destroyed;
 }
 
@@ -232,7 +230,7 @@ export function ImageEdit( {
 			// The constants used in Gutenberg do not match WP options so a little more complicated than ideal.
 			// TODO: fix this in a follow up PR, requires updating media-text and ui component.
 			switch (
-				wp?.media?.view?.settings?.defaultProps?.link ||
+				window?.wp?.media?.view?.settings?.defaultProps?.link ||
 				LINK_DESTINATION_NONE
 			) {
 				case 'file':

package/src/image/edit.native.js

@@ -670,7 +670,7 @@ export class ImageEdit extends Component {
 
 		const getInspectorControls = () => (
 			<InspectorControls>
-				<PanelBody title={ __( 'Image settings' ) } />
+				<PanelBody title={ __( 'Settings' ) } />
 				<PanelBody style={ styles.panelBody }>
 					<BlockStyles clientId={ clientId } url={ url } />
 				</PanelBody>

package/src/image/image.js

@@ -370,7 +370,7 @@ export default function Image( {
 				</BlockControls>
 			) }
 			<InspectorControls>
-				<PanelBody title={ __( 'Image settings' ) }>
+				<PanelBody title={ __( 'Settings' ) }>
 					{ ! multiImageSelection && (
 						<TextareaControl
 							label={ __( 'Alt text (alternative text)' ) }