@wordpress/block-library 7.3.2 → 7.3.5

package/src/comments-title/edit.js

@@ -0,0 +1,213 @@
+/**
+ * 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 singlePlaceholderNoCount = showPostTitle
+		? __( 'Response to ' )
+		: __( 'Response' );
+
+	const multiplePlaceholder = showPostTitle
+		? __( 'responses to ' )
+		: __( 'responses' );
+
+	const multiplePlaceholderNoCount = showPostTitle
+		? __( 'Responses to ' )
+		: __( 'Responses' );
+
+	return (
+		<>
+			{ blockControls }
+			{ inspectorControls }
+			<TagName { ...blockProps }>
+				{ editingMode === 'singular' || commentsCount === 1 ? (
+					<>
+						<PlainText
+							__experimentalVersion={ 2 }
+							tagName="span"
+							aria-label={
+								showCommentsCount
+									? singlePlaceholder
+									: singlePlaceholderNoCount
+							}
+							placeholder={
+								showCommentsCount
+									? singlePlaceholder
+									: singlePlaceholderNoCount
+							}
+							value={ singleCommentLabel }
+							onChange={ ( newLabel ) =>
+								setAttributes( {
+									singleCommentLabel: newLabel,
+								} )
+							}
+						/>
+						{ showPostTitle ? postTitle : null }
+					</>
+				) : (
+					<>
+						{ showCommentsCount ? commentsCount : null }
+						<PlainText
+							__experimentalVersion={ 2 }
+							tagName="span"
+							aria-label={
+								showCommentsCount
+									? ` ${ multiplePlaceholder }`
+									: multiplePlaceholderNoCount
+							}
+							placeholder={
+								showCommentsCount
+									? ` ${ multiplePlaceholder }`
+									: multiplePlaceholderNoCount
+							}
+							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,75 @@
+<?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 ? __( 'Response to' ) : __( 'Response' );
+	if ( $show_comments_count ) {
+		$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' );
+	if ( $show_comments_count ) {
+		$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/cover/index.php

@@ -40,7 +40,7 @@ function render_block_core_cover( $attributes, $content ) {
 		$object_position = '';
 		if ( isset( $attributes['focalPoint'] ) ) {
 			$object_position = round( $attributes['focalPoint']['x'] * 100 ) . '%' . ' ' .
-			round( $attributes['focalPoint']['x'] * 100 ) . '%';
+			round( $attributes['focalPoint']['y'] * 100 ) . '%';
 		}
 
 		$image_template = '<img

package/src/cover/style.scss

@@ -18,7 +18,7 @@
 		// Mobile Safari does not support fixed background attachment properly.
 		// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
 		// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
-		@supports (-webkit-overflow-scrolling: touch) {
+		@supports (-webkit-touch-callout: inherit) {
 			background-attachment: scroll;
 		}
 

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";
@@ -48,6 +49,8 @@
 @import "./query-pagination/editor.scss";
 @import "./query-pagination-numbers/editor.scss";
 @import "./post-featured-image/editor.scss";
+@import "./post-comments/editor.scss";
+@import "./post-comments-form/editor.scss";
 
 :root .editor-styles-wrapper {
 	@include background-colors-deprecated();

package/src/index.js

@@ -35,6 +35,7 @@ import * as commentsQueryLoop from './comments-query-loop';
 import * as commentsPagination from './comments-pagination';
 import * as commentsPaginationNext from './comments-pagination-next';
 import * as commentsPaginationNumbers from './comments-pagination-numbers';
+import * as commentsTitle from './comments-title';
 import * as cover from './cover';
 import * as embed from './embed';
 import * as file from './file';
@@ -212,12 +213,15 @@ export const __experimentalGetCoreBlocks = () => [
 	commentEditLink,
 	commentReplyLink,
 	commentTemplate,
+	commentsTitle,
 	commentsQueryLoop,
 	commentsPagination,
 	commentsPaginationNext,
 	commentsPaginationNumbers,
 	commentsPaginationPrevious,
+
 	postComments,
+	postCommentsForm,
 	homeLink,
 	logInOut,
 	termDescription,
@@ -278,7 +282,6 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env
 							navigationArea,
 							postComment,
 							postCommentsCount,
-							postCommentsForm,
 							postCommentsLink,
 					  ]
 					: [] ),

package/src/latest-posts/style.scss

@@ -63,10 +63,14 @@
 	&.alignleft {
 		/*rtl:ignore*/
 		margin-right: 1em;
+		/*rtl:ignore*/
+		float: left;
 	}
 	&.alignright {
 		/*rtl:ignore*/
 		margin-left: 1em;
+		/*rtl:ignore*/
+		float: right;
 	}
 	&.aligncenter {
 		margin-bottom: 1em;

package/src/navigation/edit/index.js

@@ -523,6 +523,11 @@ function Navigation( {
 		ref,
 	] );
 
+	const navigationSelectorRef = useRef();
+	const [
+		shouldFocusNavigationSelector,
+		setShouldFocusNavigationSelector,
+	] = useState( false );
 	const handleSelectNavigation = useCallback(
 		( navPostOrClassicMenu ) => {
 			if ( ! navPostOrClassicMenu ) {
@@ -538,10 +543,28 @@ function Navigation( {
 			} else {
 				handleUpdateMenu( navPostOrClassicMenu.id );
 			}
+			setShouldFocusNavigationSelector( true );
 		},
 		[ convert, handleUpdateMenu ]
 	);
 
+	// Focus support after menu selection.
+	useEffect( () => {
+		if (
+			isDraftNavigationMenu ||
+			! isEntityAvailable ||
+			! shouldFocusNavigationSelector
+		) {
+			return;
+		}
+		navigationSelectorRef?.current?.focus();
+		setShouldFocusNavigationSelector( false );
+	}, [
+		isDraftNavigationMenu,
+		isEntityAvailable,
+		shouldFocusNavigationSelector,
+	] );
+
 	const resetToEmptyBlock = useCallback( () => {
 		registry.batch( () => {
 			if ( navigationArea ) {
@@ -663,6 +686,7 @@ function Navigation( {
 					{ ! isDraftNavigationMenu && isEntityAvailable && (
 						<ToolbarGroup className="wp-block-navigation__toolbar-menu-selector">
 							<NavigationMenuSelector
+								ref={ navigationSelectorRef }
 								currentMenuId={ ref }
 								clientId={ clientId }
 								onSelect={ handleSelectNavigation }

package/src/navigation/edit/inner-blocks.js

@@ -44,12 +44,12 @@ export default function NavigationInnerBlocks( {
 } ) {
 	const {
 		isImmediateParentOfSelectedBlock,
-		selectedBlockHasDescendants,
+		selectedBlockHasChildren,
 		isSelected,
 	} = useSelect(
 		( select ) => {
 			const {
-				getClientIdsOfDescendants,
+				getBlockCount,
 				hasSelectedInnerBlock,
 				getSelectedBlockClientId,
 			} = select( blockEditorStore );
@@ -60,9 +60,7 @@ export default function NavigationInnerBlocks( {
 					clientId,
 					false
 				),
-				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
-					selectedBlockId,
-				] )?.length,
+				selectedBlockHasChildren: !! getBlockCount( selectedBlockId ),
 
 				// This prop is already available but computing it here ensures it's
 				// fresh compared to isImmediateParentOfSelectedBlock.
@@ -93,7 +91,7 @@ export default function NavigationInnerBlocks( {
 	// appender.
 	const parentOrChildHasSelection =
 		isSelected ||
-		( isImmediateParentOfSelectedBlock && ! selectedBlockHasDescendants );
+		( isImmediateParentOfSelectedBlock && ! selectedBlockHasChildren );
 
 	const placeholder = useMemo( () => <PlaceholderPreview />, [] );
 
@@ -127,7 +125,7 @@ export default function NavigationInnerBlocks( {
 			renderAppender:
 				isSelected ||
 				( isImmediateParentOfSelectedBlock &&
-					! selectedBlockHasDescendants ) ||
+					! selectedBlockHasChildren ) ||
 				// Show the appender while dragging to allow inserting element between item and the appender.
 				parentOrChildHasSelection
 					? InnerBlocks.ButtonBlockAppender

package/src/navigation/edit/navigation-menu-selector.js

@@ -10,7 +10,7 @@ import {
 import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
-import { useCallback, useMemo } from '@wordpress/element';
+import { forwardRef, useCallback, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,14 +18,17 @@ import { useCallback, useMemo } from '@wordpress/element';
 import useNavigationMenu from '../use-navigation-menu';
 import useNavigationEntities from '../use-navigation-entities';
 
-export default function NavigationMenuSelector( {
-	currentMenuId,
-	onSelect,
-	onCreateNew,
-	showManageActions = false,
-	actionLabel,
-	toggleProps = {},
-} ) {
+function NavigationMenuSelector(
+	{
+		currentMenuId,
+		onSelect,
+		onCreateNew,
+		showManageActions = false,
+		actionLabel,
+		toggleProps = {},
+	},
+	forwardedRef
+) {
 	/* translators: %s: The name of a menu. */
 	const createActionLabel = __( "Create from '%s'" );
 
@@ -92,6 +95,7 @@ export default function NavigationMenuSelector( {
 
 	return (
 		<ToolbarDropdownMenu
+			ref={ forwardedRef }
 			label={ __( 'Select Menu' ) }
 			text={ __( 'Select Menu' ) }
 			icon={ null }
@@ -152,3 +156,5 @@ export default function NavigationMenuSelector( {
 		</ToolbarDropdownMenu>
 	);
 }
+
+export default forwardRef( NavigationMenuSelector );

package/src/navigation-link/edit.js

@@ -342,7 +342,35 @@ function navStripHTML( html ) {
  * Add transforms to Link Control
  */
 
-function LinkControlTransforms( { block, transforms, replace } ) {
+function LinkControlTransforms( { clientId, replace } ) {
+	const { getBlock, blockTransforms } = useSelect(
+		( select ) => {
+			const {
+				getBlock: _getBlock,
+				getBlockRootClientId,
+				getBlockTransformItems,
+			} = select( blockEditorStore );
+
+			return {
+				getBlock: _getBlock,
+				blockTransforms: getBlockTransformItems(
+					[ _getBlock( clientId ) ],
+					getBlockRootClientId( clientId )
+				),
+			};
+		},
+		[ clientId ]
+	);
+
+	const featuredBlocks = [
+		'core/site-logo',
+		'core/social-links',
+		'core/search',
+	];
+	const transforms = blockTransforms.filter( ( item ) => {
+		return featuredBlocks.includes( item.name );
+	} );
+
 	if ( ! transforms?.length ) {
 		return null;
 	}
@@ -359,8 +387,11 @@ function LinkControlTransforms( { block, transforms, replace } ) {
 							key={ `transform-${ index }` }
 							onClick={ () =>
 								replace(
-									block.clientId,
-									switchToBlockType( block, item.name )
+									clientId,
+									switchToBlockType(
+										getBlock( clientId ),
+										item.name
+									)
 								)
 							}
 							className="link-control-transform__item"
@@ -421,30 +452,20 @@ export default function NavigationLinkEdit( {
 		isAtMaxNesting,
 		isTopLevelLink,
 		isParentOfSelectedBlock,
-		hasDescendants,
+		hasChildren,
 		userCanCreatePages,
 		userCanCreatePosts,
-		thisBlock,
-		blockTransforms,
 	} = useSelect(
 		( select ) => {
 			const {
-				getBlock,
 				getBlocks,
+				getBlockCount,
 				getBlockName,
 				getBlockRootClientId,
-				getClientIdsOfDescendants,
 				hasSelectedInnerBlock,
-				getSelectedBlockClientId,
 				getBlockParentsByBlockName,
-				getBlockTransformItems,
 			} = select( blockEditorStore );
 
-			const selectedBlockId = getSelectedBlockClientId();
-
-			const descendants = getClientIdsOfDescendants( [ clientId ] )
-				.length;
-
 			return {
 				innerBlocks: getBlocks( clientId ),
 				isAtMaxNesting:
@@ -459,14 +480,7 @@ export default function NavigationLinkEdit( {
 					clientId,
 					true
 				),
-				isImmediateParentOfSelectedBlock: hasSelectedInnerBlock(
-					clientId,
-					false
-				),
-				hasDescendants: !! descendants,
-				selectedBlockHasDescendants: !! getClientIdsOfDescendants( [
-					selectedBlockId,
-				] )?.length,
+				hasChildren: !! getBlockCount( clientId ),
 				userCanCreatePages: select( coreStore ).canUser(
 					'create',
 					'pages'
@@ -475,11 +489,6 @@ export default function NavigationLinkEdit( {
 					'create',
 					'posts'
 				),
-				thisBlock: getBlock( clientId ),
-				blockTransforms: getBlockTransformItems(
-					[ getBlock( clientId ) ],
-					getBlockRootClientId( clientId )
-				),
 			};
 		},
 		[ clientId ]
@@ -506,15 +515,6 @@ export default function NavigationLinkEdit( {
 		replaceBlock( clientId, newSubmenu );
 	}
 
-	const featuredBlocks = [
-		'core/site-logo',
-		'core/social-links',
-		'core/search',
-	];
-	const featuredTransforms = blockTransforms.filter( ( item ) => {
-		return featuredBlocks.includes( item.name );
-	} );
-
 	useEffect( () => {
 		// Show the LinkControl on mount if the URL is empty
 		// ( When adding a new menu item)
@@ -524,7 +524,7 @@ export default function NavigationLinkEdit( {
 			setIsLinkOpen( true );
 		}
 		// If block has inner blocks, transform to Submenu.
-		if ( hasDescendants ) {
+		if ( hasChildren ) {
 			transformToSubmenu();
 		}
 	}, [] );
@@ -634,7 +634,7 @@ export default function NavigationLinkEdit( {
 			'is-editing': isSelected || isParentOfSelectedBlock,
 			'is-dragging-within': isDraggingWithin,
 			'has-link': !! url,
-			'has-child': hasDescendants,
+			'has-child': hasChildren,
 			'has-text-color': !! textColor || !! customTextColor,
 			[ getColorClassName( 'color', textColor ) ]: !! textColor,
 			'has-background': !! backgroundColor || customBackgroundColor,
@@ -860,10 +860,7 @@ export default function NavigationLinkEdit( {
 									! url
 										? () => (
 												<LinkControlTransforms
-													block={ thisBlock }
-													transforms={
-														featuredTransforms
-													}
+													clientId={ clientId }
 													replace={ replaceBlock }
 												/>
 										  )