@wordpress/block-library 8.4.0 → 8.6.0

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

@@ -139,8 +139,9 @@ export default function PostFeaturedImageEdit( {
 				imageSizeOptions={ imageSizeOptions }
 			/>
 			<InspectorControls>
-				<PanelBody title={ __( 'Link settings' ) }>
+				<PanelBody title={ __( '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-featured-image/style.scss

@@ -3,6 +3,7 @@
 	margin-right: 0;
 	a {
 		display: block;
+		height: 100%;
 	}
 	img {
 		max-width: 100%;

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( {

package/src/preformatted/test/__snapshots__/edit.native.js.snap

@@ -3,7 +3,7 @@
 exports[`core/more/edit/native should match snapshot when content is empty 1`] = `
 <View
   style={
-    Array [
+    [
       undefined,
       undefined,
       undefined,
@@ -12,7 +12,7 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -20,9 +20,9 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
   >
     <TextInput
       accessibilityLabel="Text input. Empty"
-      activeFormats={Array []}
+      activeFormats={[]}
       blockType={
-        Object {
+        {
           "tag": "pre",
         }
       }
@@ -39,7 +39,7 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
-      triggerKeyCodes={Array []}
+      triggerKeyCodes={[]}
       value=""
     />
   </View>
@@ -49,7 +49,7 @@ exports[`core/more/edit/native should match snapshot when content is empty 1`] =
 exports[`core/more/edit/native should match snapshot when content is not empty 1`] = `
 <View
   style={
-    Array [
+    [
       undefined,
       undefined,
       undefined,
@@ -58,7 +58,7 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
 >
   <View
     style={
-      Array [
+      [
         undefined,
         undefined,
       ]
@@ -66,9 +66,9 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
   >
     <TextInput
       accessibilityLabel="Text input. <pre>Hello World!</pre>"
-      activeFormats={Array []}
+      activeFormats={[]}
       blockType={
-        Object {
+        {
           "tag": "pre",
         }
       }
@@ -85,7 +85,7 @@ exports[`core/more/edit/native should match snapshot when content is not empty 1
       onSelectionChange={[Function]}
       placeholder="Write preformatted text…"
       placeholderTextColor="gray"
-      triggerKeyCodes={Array []}
+      triggerKeyCodes={[]}
       value="<pre>Hello World!</pre>"
     />
   </View>

package/src/preformatted/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Preformatted block transforms to Code block 1`] = `
+"<!-- wp:code -->
+<pre class="wp-block-code"><code>Some <em>preformatted</em> text...<br />And more!</code></pre>
+<!-- /wp:code -->"
+`;
+
+exports[`Preformatted block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:preformatted --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Preformatted block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br />And more!</pre>
+<!-- /wp:preformatted --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Preformatted block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>Some <em>preformatted</em> text...<br />And more!</p>
+<!-- /wp:paragraph -->"
+`;

package/src/preformatted/test/transforms.native.js

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Preformatted';
+const initialHtml = `
+<!-- wp:preformatted -->
+<pre class="wp-block-preformatted">Some <em>preformatted</em> text...<br>And more!</pre>
+<!-- /wp:preformatted -->`;
+
+const transformsWithInnerBlocks = [ 'Columns', 'Group' ];
+const blockTransforms = [ 'Paragraph', 'Code', ...transformsWithInnerBlocks ];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/pullquote/deprecated.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { get } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -435,11 +434,8 @@ const v2 = {
 			// Is normal style and a named color is being used, we need to retrieve the color value to set the style,
 			// as there is no expectation that themes create classes that set border colors.
 		} else if ( mainColor ) {
-			const colors = get(
-				select( blockEditorStore ).getSettings(),
-				[ 'colors' ],
-				[]
-			);
+			const colors =
+				select( blockEditorStore ).getSettings().colors ?? [];
 			const colorObject = getColorObjectByAttributeValues(
 				colors,
 				mainColor

package/src/pullquote/test/__snapshots__/transforms.native.js.snap

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pullquote block transforms to Columns block 1`] = `
+"<!-- wp:columns -->
+<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
+<div class="wp-block-column" style="flex-basis:100%"><!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote --></div>
+<!-- /wp:column --></div>
+<!-- /wp:columns -->"
+`;
+
+exports[`Pullquote block transforms to Group block 1`] = `
+"<!-- wp:group {"layout":{"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote --></div>
+<!-- /wp:group -->"
+`;
+
+exports[`Pullquote block transforms to Heading block 1`] = `
+"<!-- wp:heading -->
+<h2 class="wp-block-heading">One of the hardest things to do in technology is disrupt yourself.</h2>
+<!-- /wp:heading -->
+
+<!-- wp:heading -->
+<h2 class="wp-block-heading">Matt Mullenweg</h2>
+<!-- /wp:heading -->"
+`;
+
+exports[`Pullquote block transforms to Paragraph block 1`] = `
+"<!-- wp:paragraph -->
+<p>One of the hardest things to do in technology is disrupt yourself.</p>
+<!-- /wp:paragraph -->
+
+<!-- wp:paragraph -->
+<p>Matt Mullenweg</p>
+<!-- /wp:paragraph -->"
+`;
+
+exports[`Pullquote block transforms to Quote block 1`] = `
+"<!-- wp:quote -->
+<blockquote class="wp-block-quote"><!-- wp:paragraph -->
+<p>One of the hardest things to do in technology is disrupt yourself.</p>
+<!-- /wp:paragraph --><cite>Matt Mullenweg</cite></blockquote>
+<!-- /wp:quote -->"
+`;

package/src/pullquote/test/transforms.native.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import {
+	getEditorHtml,
+	initializeEditor,
+	setupCoreBlocks,
+	transformBlock,
+	getBlockTransformOptions,
+} from 'test/helpers';
+
+const block = 'Pullquote';
+const initialHtml = `
+<!-- wp:pullquote -->
+<figure class="wp-block-pullquote"><blockquote><p>One of the hardest things to do in technology is disrupt yourself.</p><cite>Matt Mullenweg</cite></blockquote></figure>
+<!-- /wp:pullquote -->`;
+
+const transformsWithInnerBlocks = [ 'Quote', 'Columns', 'Group' ];
+const blockTransforms = [
+	'Paragraph',
+	'Heading',
+	...transformsWithInnerBlocks,
+];
+
+setupCoreBlocks();
+
+describe( `${ block } block transforms`, () => {
+	test.each( blockTransforms )( 'to %s block', async ( blockTransform ) => {
+		const screen = await initializeEditor( { initialHtml } );
+		const newBlock = await transformBlock( screen, block, blockTransform, {
+			hasInnerBlocks:
+				transformsWithInnerBlocks.includes( blockTransform ),
+		} );
+		expect( newBlock ).toBeVisible();
+		expect( getEditorHtml() ).toMatchSnapshot();
+	} );
+
+	it( 'matches expected transformation options', async () => {
+		const screen = await initializeEditor( { initialHtml } );
+		const transformOptions = await getBlockTransformOptions(
+			screen,
+			block
+		);
+		expect( transformOptions ).toHaveLength( blockTransforms.length );
+	} );
+} );

package/src/query/edit/inspector-controls/index.js

@@ -132,6 +132,7 @@ export default function QueryInspectorControls( {
 					<PanelBody title={ __( 'Settings' ) }>
 						{ showInheritControl && (
 							<ToggleControl
+								__nextHasNoMarginBottom
 								label={ __( 'Inherit query from template' ) }
 								help={ __(
 									'Toggle to use the global query context that is set with the current template, such as an archive or search. Disable to customize the settings independently.'

package/src/query/edit/query-placeholder.js

@@ -19,7 +19,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { useScopedBlockVariations } from '../utils';
+import { useScopedBlockVariations, useBlockNameForPatterns } from '../utils';
 
 export default function QueryPlaceholder( {
 	attributes,
@@ -30,6 +30,10 @@ export default function QueryPlaceholder( {
 } ) {
 	const [ isStartingBlank, setIsStartingBlank ] = useState( false );
 	const blockProps = useBlockProps();
+	const blockNameForPatterns = useBlockNameForPatterns(
+		clientId,
+		attributes
+	);
 
 	const { blockType, allVariations, hasPatterns } = useSelect(
 		( select ) => {
@@ -37,15 +41,16 @@ export default function QueryPlaceholder( {
 			const { getBlockRootClientId, getPatternsByBlockTypes } =
 				select( blockEditorStore );
 			const rootClientId = getBlockRootClientId( clientId );
-
 			return {
 				blockType: getBlockType( name ),
 				allVariations: getBlockVariations( name ),
-				hasPatterns: !! getPatternsByBlockTypes( name, rootClientId )
-					.length,
+				hasPatterns: !! getPatternsByBlockTypes(
+					blockNameForPatterns,
+					rootClientId
+				).length,
 			};
 		},
-		[ name, clientId ]
+		[ name, blockNameForPatterns, clientId ]
 	);
 
 	const matchingVariation = getMatchingVariation( attributes, allVariations );

package/src/query/editor.scss

@@ -42,6 +42,7 @@
 		position: sticky;
 		top: 0;
 		padding: $grid-unit-20 0;
+		margin-bottom: 2px;
 		z-index: z-index(".block-library-query-pattern__selection-search");
 	}
 }

package/src/query/test/utils.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import { terms } from './fixtures';
-import { getEntitiesInfo } from '../utils';
+import { getEntitiesInfo, getValueFromObjectPath } from '../utils';
 
 describe( 'Query block utils', () => {
 	describe( 'getEntitiesInfo', () => {
@@ -29,4 +29,36 @@ describe( 'Query block utils', () => {
 			);
 		} );
 	} );
+
+	describe( 'getValueFromObjectPath', () => {
+		it( 'should return undefined when path is empty', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, '' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when path does not exist', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, 'baz' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return undefined when a deeper path does not exist', () => {
+			const object = { foo: { bar: 'baz' } };
+			const result = getValueFromObjectPath( object, 'foo.test' );
+			expect( result ).toBeUndefined();
+		} );
+
+		it( 'should return the corresponding value of a single level path', () => {
+			const object = { foo: 'bar' };
+			const result = getValueFromObjectPath( object, 'foo' );
+			expect( result ).toBe( 'bar' );
+		} );
+
+		it( 'should return the value of a deeper path', () => {
+			const object = { foo: { bar: { baz: 'test' } } };
+			const result = getValueFromObjectPath( object, 'foo.bar.baz' );
+			expect( result ).toBe( 'test' );
+		} );
+	} );
 } );