@wordpress/block-library 8.4.0 → 8.5.0

package/src/navigation/index.php

@@ -431,6 +431,37 @@ function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
 	return false;
 }
 
+/**
+ * Create and returns a navigation menu containing a page-list as a fallback.
+ *
+ * @return array the newly created navigation menu.
+ */
+function block_core_navigation_get_default_pages_fallback() {
+	$registry = WP_Block_Type_Registry::get_instance();
+
+	// If `core/page-list` is not registered then use empty blocks.
+	$default_blocks = $registry->is_registered( 'core/page-list' ) ? '<!-- wp:page-list /-->' : '';
+
+	// Create a new navigation menu from the fallback blocks.
+	$wp_insert_post_result = wp_insert_post(
+		array(
+			'post_content' => $default_blocks,
+			'post_title'   => 'Navigation', // TODO - use the template slug in future.
+			'post_name'    => 'Navigation', // TODO - use the template slug in future.
+			'post_status'  => 'publish',
+			'post_type'    => 'wp_navigation',
+		),
+		true // So that we can check whether the result is an error.
+	);
+
+	if ( is_wp_error( $wp_insert_post_result ) ) {
+		return;
+	}
+
+	// Fetch the most recently published navigation which will be the default one created above.
+	return block_core_navigation_get_most_recently_published_navigation();
+}
+
 /**
  * Retrieves the appropriate fallback to be used on the front of the
  * site when there is no menu assigned to the Nav block.
@@ -441,19 +472,7 @@ function block_core_navigation_block_contains_core_navigation( $inner_blocks ) {
  * @return array the array of blocks to be used as a fallback.
  */
 function block_core_navigation_get_fallback_blocks() {
-	$page_list_fallback = array(
-		array(
-			'blockName' => 'core/page-list',
-		),
-	);
-
-	$registry = WP_Block_Type_Registry::get_instance();
-
-	// If `core/page-list` is not registered then return empty blocks.
-	$fallback_blocks = $registry->is_registered( 'core/page-list' ) ? $page_list_fallback : array();
-
-	// Default to a list of Pages.
-
+	// Get the most recently published Navigation post.
 	$navigation_post = block_core_navigation_get_most_recently_published_navigation();
 
 	// If there are no navigation posts then try to find a classic menu
@@ -462,16 +481,21 @@ function block_core_navigation_get_fallback_blocks() {
 		$navigation_post = block_core_navigation_maybe_use_classic_menu_fallback();
 	}
 
-	// Use the first non-empty Navigation as fallback if available.
+	// If there are no navigation posts then default to a list of Pages.
+	if ( ! $navigation_post ) {
+		$navigation_post = block_core_navigation_get_default_pages_fallback();
+	}
+
+	// Use the first non-empty Navigation as fallback, there should always be one.
 	if ( $navigation_post ) {
 		$parsed_blocks  = parse_blocks( $navigation_post->post_content );
 		$maybe_fallback = block_core_navigation_filter_out_empty_blocks( $parsed_blocks );
-
-		// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.
-		// In this case default to the (Page List) fallback.
-		$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : $fallback_blocks;
 	}
 
+	// Normalizing blocks may result in an empty array of blocks if they were all `null` blocks.
+	// In this case default empty blocks.
+	$fallback_blocks = ! empty( $maybe_fallback ) ? $maybe_fallback : array();
+
 	/**
 	 * Filters the fallback experience for the Navigation block.
 	 *
@@ -531,7 +555,6 @@ function block_core_navigation_from_block_get_post_ids( $block ) {
  * @return string Returns the post content with the legacy widget added.
  */
 function render_block_core_navigation( $attributes, $content, $block ) {
-
 	static $seen_menu_names = array();
 
 	// Flag used to indicate whether the rendered output is considered to be

package/src/navigation-link/link-ui.js

@@ -165,6 +165,7 @@ export function LinkUI( props ) {
 			placement="bottom"
 			onClose={ props.onClose }
 			anchor={ props.anchor }
+			__unstableSlotName={ '__unstable-block-tools-after' }
 			shift
 		>
 			<LinkControl

package/src/navigation-link/test/__snapshots__/hooks.js.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`hooks enhanceNavigationLinkVariations enhances variations with icon and isActive functions 1`] = `
-Object {
+{
   "extraProp": "extraProp",
   "name": "core/navigation-link",
-  "variations": Array [
-    Object {
-      "attributes": Object {},
+  "variations": [
+    {
+      "attributes": {},
       "description": "A link to a custom URL.",
       "icon": <SVG
         viewBox="0 0 24 24"
@@ -20,8 +20,8 @@ Object {
       "name": "link",
       "title": "Custom Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "post",
       },
       "description": "A link to a post.",
@@ -37,8 +37,8 @@ Object {
       "name": "post",
       "title": "Post Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "page",
       },
       "description": "A link to a page.",
@@ -54,8 +54,8 @@ Object {
       "name": "page",
       "title": "Page Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "category",
       },
       "description": "A link to a category.",
@@ -73,8 +73,8 @@ Object {
       "name": "category",
       "title": "Category Link",
     },
-    Object {
-      "attributes": Object {
+    {
+      "attributes": {
         "type": "tag",
       },
       "description": "A link to a tag.",

package/src/page-list/convert-to-links-modal.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { Button, Modal } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+export const convertDescription = __(
+	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
+);
+
+export function ConvertToLinksModal( { onClick, onClose, disabled } ) {
+	return (
+		<Modal
+			onRequestClose={ onClose }
+			title={ __( 'Edit this menu' ) }
+			className={ 'wp-block-page-list-modal' }
+			aria={ {
+				describedby: 'wp-block-page-list-modal__description',
+			} }
+		>
+			<p id={ 'wp-block-page-list-modal__description' }>
+				{ convertDescription }
+			</p>
+			<div className="wp-block-page-list-modal-buttons">
+				<Button variant="tertiary" onClick={ onClose }>
+					{ __( 'Cancel' ) }
+				</Button>
+				<Button
+					variant="primary"
+					disabled={ disabled }
+					onClick={ onClick }
+				>
+					{ __( 'Edit' ) }
+				</Button>
+			</div>
+		</Modal>
+	);
+}

package/src/page-list/edit.js

@@ -23,7 +23,6 @@ import {
 	Notice,
 	ComboboxControl,
 	Button,
-	Modal,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { useMemo, useState, useEffect } from '@wordpress/element';
@@ -34,16 +33,15 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import { useConvertToNavigationLinks } from './use-convert-to-navigation-links';
+import {
+	convertDescription,
+	ConvertToLinksModal,
+} from './convert-to-links-modal';
 
 // We only show the edit option when page count is <= MAX_PAGE_COUNT
 // Performance of Navigation Links is not good past this value.
 const MAX_PAGE_COUNT = 100;
 const NOOP = () => {};
-
-const convertDescription = __(
-	'This menu is automatically kept in sync with pages on your site. You can manage the menu yourself by clicking "Edit" below.'
-);
-
 function BlockContent( {
 	blockProps,
 	innerBlocksProps,
@@ -113,7 +111,7 @@ function BlockContent( {
 	}
 }
 
-function ConvertToLinksModal( { onClick, disabled } ) {
+function ConvertToLinks( { onClick, disabled } ) {
 	const [ isOpen, setOpen ] = useState( false );
 	const openModal = () => setOpen( true );
 	const closeModal = () => setOpen( false );
@@ -126,30 +124,11 @@ function ConvertToLinksModal( { onClick, disabled } ) {
 				</ToolbarButton>
 			</BlockControls>
 			{ isOpen && (
-				<Modal
-					onRequestClose={ closeModal }
-					title={ __( 'Edit this menu' ) }
-					className={ 'wp-block-page-list-modal' }
-					aria={ {
-						describedby: 'wp-block-page-list-modal__description',
-					} }
-				>
-					<p id={ 'wp-block-page-list-modal__description' }>
-						{ convertDescription }
-					</p>
-					<div className="wp-block-page-list-modal-buttons">
-						<Button variant="tertiary" onClick={ closeModal }>
-							{ __( 'Cancel' ) }
-						</Button>
-						<Button
-							variant="primary"
-							disabled={ disabled }
-							onClick={ onClick }
-						>
-							{ __( 'Edit' ) }
-						</Button>
-					</div>
-				</Modal>
+				<ConvertToLinksModal
+					onClick={ onClick }
+					onClose={ closeModal }
+					disabled={ disabled }
+				/>
 			) }
 		</>
 	);
@@ -344,7 +323,7 @@ export default function PageListEdit( {
 				) }
 			</InspectorControls>
 			{ allowConvertToLinks && (
-				<ConvertToLinksModal
+				<ConvertToLinks
 					disabled={ ! hasResolvedPages }
 					onClick={ convertToNavigationLinks }
 				/>

package/src/paragraph/edit.js

@@ -110,6 +110,7 @@ function ParagraphBlock( {
 						panelId={ clientId }
 					>
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Drop cap' ) }
 							checked={ !! dropCap }
 							onChange={ () =>

package/src/post-author/edit.js

@@ -120,6 +120,7 @@ function PostAuthorEdit( {
 							/>
 						) ) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show avatar' ) }
 						checked={ showAvatar }
 						onChange={ () =>
@@ -140,6 +141,7 @@ function PostAuthorEdit( {
 						/>
 					) }
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show bio' ) }
 						checked={ showBio }
 						onChange={ () =>
@@ -147,12 +149,14 @@ function PostAuthorEdit( {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link author name to author page' ) }
 						checked={ isLink }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 					/>
 					{ isLink && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {

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

@@ -71,12 +71,14 @@ function PostAuthorNameEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Link to author archive' ) }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
 					/>
 					{ isLink && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __( 'Open in new tab' ) }
 							onChange={ ( value ) =>
 								setAttributes( {

package/src/post-date/edit.js

@@ -150,6 +150,7 @@ export default function PostDateEdit( {
 						}
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -163,6 +164,7 @@ export default function PostDateEdit( {
 						checked={ isLink }
 					/>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display last modified date' ) }
 						onChange={ ( value ) =>
 							setAttributes( {

package/src/post-excerpt/edit.js

@@ -194,6 +194,7 @@ export default function PostExcerptEditor( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Show link on new line' ) }
 						checked={ showMoreOnNewLine }
 						onChange={ ( newShowMoreOnNewLine ) =>

package/src/post-excerpt/editor.scss

@@ -1,5 +1,5 @@
 .wp-block-post-excerpt {
 	.wp-block-post-excerpt__excerpt.is-inline {
-		display: inline-block;
+		display: inline;
 	}
 }

package/src/post-featured-image/edit.js

@@ -141,6 +141,7 @@ export default function PostFeaturedImageEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={
 							postType?.labels.singular_name
 								? sprintf(
@@ -156,6 +157,7 @@ export default function PostFeaturedImageEdit( {
 					{ isLink && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
 								onChange={ ( value ) =>
 									setAttributes( {

package/src/post-navigation-link/edit.js

@@ -52,6 +52,7 @@ export default function PostNavigationLinkEdit( {
 			<InspectorControls>
 				<PanelBody>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Display the title as a link' ) }
 						help={ __(
 							'If you have entered a custom label, it will be prepended before the title.'
@@ -65,6 +66,7 @@ export default function PostNavigationLinkEdit( {
 					/>
 					{ showTitle && (
 						<ToggleControl
+							__nextHasNoMarginBottom
 							label={ __(
 								'Include the label as part of the link'
 							) }

package/src/post-terms/index.php

@@ -87,6 +87,7 @@ function register_block_core_post_terms() {
 				'term' => $taxonomy->name,
 			),
 			'isActive'    => array( 'term' ),
+			'scope'       => array( 'inserter', 'transform' ),
 		);
 		// Set the category variation as the default one.
 		if ( 'category' === $taxonomy->name ) {

package/src/post-terms/use-post-terms.js

@@ -36,6 +36,6 @@ export default function usePostTerms( { postId, term } ) {
 				hasPostTerms: !! terms?.length,
 			};
 		},
-		[ postId, term?.visibility?.publicly_queryable ]
+		[ postId, term?.visibility?.publicly_queryable, slug ]
 	);
 }

package/src/post-time-to-read/block.json

@@ -0,0 +1,20 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/post-time-to-read",
+	"title": "Time To Read",
+	"category": "theme",
+	"description": "Show minutes required to finish reading the post.",
+	"textdomain": "default",
+	"usesContext": [ "postId", "postType" ],
+	"attributes": {
+		"textAlign": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"html": false,
+		"multiple": false
+	}
+}

package/src/post-time-to-read/edit.js

@@ -0,0 +1,101 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { _x, _n, sprintf } from '@wordpress/i18n';
+import { useMemo } from '@wordpress/element';
+import {
+	AlignmentControl,
+	BlockControls,
+	useBlockProps,
+} from '@wordpress/block-editor';
+import { __unstableSerializeAndClean } from '@wordpress/blocks';
+import { useEntityProp, useEntityBlockEditor } from '@wordpress/core-data';
+import { count as wordCount } from '@wordpress/wordcount';
+
+/**
+ * Average reading rate - based on average taken from
+ * https://irisreading.com/average-reading-speed-in-various-languages/
+ * (Characters/minute used for Chinese rather than words).
+ */
+const AVERAGE_READING_RATE = 189;
+
+function PostTimeToReadEdit( { attributes, setAttributes, context } ) {
+	const { textAlign } = attributes;
+	const { postId, postType } = context;
+
+	const [ contentStructure ] = useEntityProp(
+		'postType',
+		postType,
+		'content',
+		postId
+	);
+
+	const [ blocks ] = useEntityBlockEditor( 'postType', postType, {
+		id: postId,
+	} );
+
+	const minutesToReadString = useMemo( () => {
+		// Replicates the logic found in getEditedPostContent().
+		let content;
+		if ( contentStructure instanceof Function ) {
+			content = contentStructure( { blocks } );
+		} else if ( blocks ) {
+			// If we have parsed blocks already, they should be our source of truth.
+			// Parsing applies block deprecations and legacy block conversions that
+			// unparsed content will not have.
+			content = __unstableSerializeAndClean( blocks );
+		} else {
+			content = contentStructure;
+		}
+
+		/*
+		 * translators: If your word count is based on single characters (e.g. East Asian characters),
+		 * enter 'characters_excluding_spaces' or 'characters_including_spaces'. Otherwise, enter 'words'.
+		 * Do not translate into your own language.
+		 */
+		const wordCountType = _x(
+			'words',
+			'Word count type. Do not translate!'
+		);
+
+		const minutesToRead = Math.max(
+			1,
+			Math.round(
+				wordCount( content, wordCountType ) / AVERAGE_READING_RATE
+			)
+		);
+
+		return sprintf(
+			/* translators: %d is the number of minutes the post will take to read. */
+			_n( '%d minute', '%d minutes', minutesToRead ),
+			minutesToRead
+		);
+	}, [ contentStructure, blocks ] );
+
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+
+	return (
+		<>
+			<BlockControls group="block">
+				<AlignmentControl
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			<p { ...blockProps }>{ minutesToReadString }</p>
+		</>
+	);
+}
+
+export default PostTimeToReadEdit;

package/src/post-time-to-read/icon.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+	<SVG
+		xmlns="http://www.w3.org/2000/svg"
+		width="24"
+		height="24"
+		viewBox="0 0 24 24"
+	>
+		<Path d="M12 3c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm0 16.5c-4.1 0-7.5-3.4-7.5-7.5S7.9 4.5 12 4.5s7.5 3.4 7.5 7.5-3.4 7.5-7.5 7.5zM12 7l-1 5c0 .3.2.6.4.8l4.2 2.8-2.7-4.1L12 7z" />
+	</SVG>
+);

package/src/post-time-to-read/index.js

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import icon from './icon';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/post-time-to-read/index.php

@@ -0,0 +1,62 @@
+<?php
+/**
+ * Server-side rendering of the `core/post-time-to-read` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/post-time-to-read` block on the server.
+ *
+ * @param  array    $attributes Block attributes.
+ * @param  string   $content    Block default content.
+ * @param  WP_Block $block      Block instance.
+ * @return string Returns the rendered post author name block.
+ */
+function render_block_core_post_time_to_read( $attributes, $content, $block ) {
+	if ( ! isset( $block->context['postId'] ) ) {
+		return '';
+	}
+
+	$content = get_the_content();
+
+	/*
+	 * Average reading rate - based on average taken from
+	 * https://irisreading.com/average-reading-speed-in-various-languages/
+	 * (Characters/minute used for Chinese rather than words).
+	 */
+	$average_reading_rate = 189;
+
+	$word_count_type = wp_get_word_count_type();
+
+	$minutes_to_read = max( 1, (int) round( wp_word_count( $content, $word_count_type ) / $average_reading_rate ) );
+
+	$minutes_to_read_string = sprintf(
+		/* translators: %d is the number of minutes the post will take to read. */
+		_n( '%d minute', '%d minutes', $minutes_to_read ),
+		$minutes_to_read
+	);
+
+	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+
+	return sprintf(
+		'<p %1$s>%2$s</p>',
+		$wrapper_attributes,
+		$minutes_to_read_string
+	);
+}
+
+/**
+ * Registers the `core/post-time-to-read` block on the server.
+ */
+function register_block_core_post_time_to_read() {
+	register_block_type_from_metadata(
+		__DIR__ . '/post-time-to-read',
+		array(
+			'render_callback' => 'render_block_core_post_time_to_read',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_post_time_to_read' );

package/src/post-title/edit.js

@@ -118,6 +118,7 @@ export default function PostTitleEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
+						__nextHasNoMarginBottom
 						label={ __( 'Make title a link' ) }
 						onChange={ () => setAttributes( { isLink: ! isLink } ) }
 						checked={ isLink }
@@ -125,6 +126,7 @@ export default function PostTitleEdit( {
 					{ isLink && (
 						<>
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Open in new tab' ) }
 								onChange={ ( value ) =>
 									setAttributes( {