@wordpress/block-library 5.0.1 → 6.0.1

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

@@ -17,11 +17,17 @@ import {
 import { __ } from '@wordpress/i18n';
 
 export default function PostNavigationLinkEdit( {
-	attributes: { type, label, showTitle, textAlign },
+	attributes: { type, label, showTitle, textAlign, linkLabel },
 	setAttributes,
 } ) {
 	const isNext = type === 'next';
-	const placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
+	let placeholder = isNext ? __( 'Next' ) : __( 'Previous' );
+
+	if ( showTitle ) {
+		/* translators: Label before for next and previous post. There is a space after the colon. */
+		placeholder = isNext ? __( 'Next: ' ) : __( 'Previous: ' );
+	}
+
 	const ariaLabel = isNext ? __( 'Next post' ) : __( 'Previous post' );
 	const blockProps = useBlockProps( {
 		className: classnames( {
@@ -44,6 +50,19 @@ export default function PostNavigationLinkEdit( {
 							} )
 						}
 					/>
+					{ showTitle && (
+						<ToggleControl
+							label={ __(
+								'Include the label as part of the link'
+							) }
+							checked={ !! linkLabel }
+							onChange={ () =>
+								setAttributes( {
+									linkLabel: ! linkLabel,
+								} )
+							}
+						/>
+					) }
 				</PanelBody>
 			</InspectorControls>
 			<BlockControls>
@@ -65,6 +84,14 @@ export default function PostNavigationLinkEdit( {
 						setAttributes( { label: newLabel } )
 					}
 				/>
+				{ showTitle && (
+					<a
+						href="#post-navigation-pseudo-link"
+						onClick={ ( event ) => event.preventDefault() }
+					>
+						{ __( 'An example title' ) }
+					</a>
+				) }
 			</div>
 		</>
 	);

package/src/post-navigation-link/index.php

@@ -33,6 +33,7 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	$format = '%link';
 	$link   = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' );
 	$label  = '';
+
 	// If a custom label is provided, make this a link.
 	// `$label` is used to prepend the provided label, if we want to show the page title as well.
 	if ( isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ) {
@@ -42,11 +43,35 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 
 	// If we want to also show the page title, make the page title a link and prepend the label.
 	if ( isset( $attributes['showTitle'] ) && $attributes['showTitle'] ) {
-		if ( $label ) {
-			$format = "$label %link";
+		/*
+		 * If the label link option is not enabled but there is a custom label,
+		 * display the custom label as text before the linked title.
+		 */
+		if ( ! $attributes['linkLabel'] ) {
+			if ( $label ) {
+				$format = '<span class="post-navigation-link__label">' . $label . '</span> %link';
+			}
+			$link = '%title';
+		} elseif ( isset( $attributes['linkLabel'] ) && $attributes['linkLabel'] ) {
+			// If the label link option is enabled and there is a custom label, display it before the title.
+			if ( $label ) {
+				$link = '<span class="post-navigation-link__label">' . $label . '</span> <span class="post-navigation-link__title">%title</title>';
+			} else {
+				/*
+				 * If the label link option is enabled and there is no custom label,
+				 * add a colon between the label and the post title.
+				 */
+				$label = 'next' === $navigation_type ? _x( 'Next:', 'label before the title of the next post' ) : _x( 'Previous:', 'label before the title of the previous post' );
+				$link  = sprintf(
+					/* translators: 1: label. 2: post title */
+					__( '<span class="post-navigation-link__label">%1$s</span> <span class="post-navigation-link__title">%2$s</span>' ),
+					$label,
+					'%title'
+				);
+			}
 		}
-		$link = '%title';
 	}
+
 	// The dynamic portion of the function name, `$navigation_type`,
 	// refers to the type of adjacency, 'next' or 'previous'.
 	$get_link_function = "get_{$navigation_type}_post_link";

package/src/post-template/block.json

@@ -16,7 +16,10 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
-		"align": true
+		"align": true,
+		"__experimentalLayout": {
+			"allowEditing": false
+		}
 	},
 	"style": "wp-block-post-template",
 	"editorStyle": "wp-block-post-template-editor"

package/src/post-template/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { loop } from '@wordpress/icons';
+import { layout } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -14,7 +14,7 @@ const { name } = metadata;
 export { metadata, name };
 
 export const settings = {
-	icon: loop,
+	icon: layout,
 	edit,
 	save,
 };

package/src/post-template/index.php

@@ -34,6 +34,17 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		}
 	}
 
+	/**
+	 * Passing an empty array to post__in will return have_posts() as true (and all posts will be returned).
+	 * Logic should be used before hand to determine if WP_Query should be used in the event that the array
+	 * being passed to post__in is empty.
+	 *
+	 * @see https://core.trac.wordpress.org/ticket/28099
+	 */
+	if ( isset( $query_args['post__in'] ) && count( $query_args['post__in'] ) === 0 ) {
+		return '';
+	}
+
 	$query = new WP_Query( $query_args );
 
 	if ( ! $query->have_posts() ) {

package/src/post-template/style.scss

@@ -5,6 +5,8 @@
 // See: https://github.com/WordPress/gutenberg/pull/32514.
 // TODO: Remove this class when WordPress 5.9 is released.
 .wp-block-query-loop {
+	margin-top: 0;
+	margin-bottom: 0;
 	max-width: 100%;
 	list-style: none;
 	padding: 0;

package/src/post-terms/block.json

@@ -26,7 +26,8 @@
 		},
 		"typography": {
 			"lineHeight": true,
-			"fontSize": true
+			"fontSize": true,
+			"__experimentalFontWeight": true
 		}
 	},
 	"style": "wp-block-post-terms"

package/src/post-terms/edit.js

@@ -8,9 +8,8 @@ import classnames from 'classnames';
  */
 import {
 	AlignmentToolbar,
-	InspectorAdvancedControls,
+	InspectorControls,
 	BlockControls,
-	Warning,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { Spinner, TextControl } from '@wordpress/components';
@@ -56,7 +55,7 @@ export default function PostTermsEdit( {
 	if ( ! hasPost ) {
 		return (
 			<div { ...blockProps }>
-				<Warning>{ __( 'Post Terms block: post not found.' ) }</Warning>
+				{ __( 'Post Terms block: post not found.' ) }
 			</div>
 		);
 	}
@@ -79,7 +78,7 @@ export default function PostTermsEdit( {
 					} }
 				/>
 			</BlockControls>
-			<InspectorAdvancedControls>
+			<InspectorControls __experimentalGroup="advanced">
 				<TextControl
 					autoComplete="off"
 					label={ __( 'Separator' ) }
@@ -89,7 +88,7 @@ export default function PostTermsEdit( {
 					} }
 					help={ __( 'Enter character(s) used to separate terms.' ) }
 				/>
-			</InspectorAdvancedControls>
+			</InspectorControls>
 			<div { ...blockProps }>
 				{ isLoading && <Spinner /> }
 				{ ! isLoading &&

package/src/post-title/block.json

@@ -38,7 +38,10 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontFamily": true
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true
 		}
 	},
 	"style": "wp-block-post-title"

package/src/post-title/edit.js

@@ -46,9 +46,7 @@ export default function PostTitleEdit( {
 	} );
 
 	let titleElement = (
-		<TagName { ...( isLink ? {} : blockProps ) }>
-			{ __( 'An example title' ) }
-		</TagName>
+		<TagName { ...blockProps }>{ __( 'An example title' ) }</TagName>
 	);
 
 	if ( postType && postId ) {
@@ -60,16 +58,16 @@ export default function PostTitleEdit( {
 					value={ rawTitle }
 					onChange={ setTitle }
 					__experimentalVersion={ 2 }
-					{ ...( isLink ? {} : blockProps ) }
+					{ ...blockProps }
 				/>
 			) : (
-				<TagName { ...( isLink ? {} : blockProps ) }>
+				<TagName { ...blockProps }>
 					<RawHTML key="html">{ fullTitle.rendered }</RawHTML>
 				</TagName>
 			);
 	}
 
-	if ( isLink ) {
+	if ( isLink && postType && postId ) {
 		titleElement =
 			userCanEdit && ! isDescendentOfQueryLoop ? (
 				<TagName { ...blockProps }>

package/src/post-title/index.php

@@ -29,7 +29,7 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 
 	$title = get_the_title( $post_ID );
 	if ( isset( $attributes['isLink'] ) && $attributes['isLink'] ) {
-		$title = sprintf( '<a href="%1s" target="%2s" rel="%3s">%4s</a>', get_the_permalink( $post_ID ), $attributes['linkTarget'], $attributes['rel'], $title );
+		$title = sprintf( '<a href="%1$s" target="%2$s" rel="%3$s">%4$s</a>', get_the_permalink( $post_ID ), $attributes['linkTarget'], $attributes['rel'], $title );
 	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 

package/src/pullquote/style.scss

@@ -2,6 +2,7 @@
 	margin: 0 0 1em 0;
 	padding: 3em 0;
 	text-align: center; // Default text-alignment where the `textAlign` attribute value isn't specified.
+	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 
 	p,
 	blockquote,

package/src/query/edit/index.js

@@ -7,7 +7,7 @@ import { useInstanceId } from '@wordpress/compose';
 import { useEffect } from '@wordpress/element';
 import {
 	BlockControls,
-	InspectorAdvancedControls,
+	InspectorControls,
 	useBlockProps,
 	useSetting,
 	store as blockEditorStore,
@@ -104,7 +104,7 @@ export function QueryContent( { attributes, setAttributes } ) {
 					setDisplayLayout={ updateDisplayLayout }
 				/>
 			</BlockControls>
-			<InspectorAdvancedControls>
+			<InspectorControls __experimentalGroup="advanced">
 				<SelectControl
 					label={ __( 'HTML element' ) }
 					options={ [
@@ -118,7 +118,7 @@ export function QueryContent( { attributes, setAttributes } ) {
 						setAttributes( { tagName: value } )
 					}
 				/>
-			</InspectorAdvancedControls>
+			</InspectorControls>
 			<TagName { ...innerBlocksProps } />
 		</>
 	);

package/src/query/variations.js

@@ -69,6 +69,7 @@ const variations = [
 				{},
 				[ [ 'core/post-title' ], [ 'core/post-date' ] ],
 			],
+			[ 'core/query-pagination' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -83,6 +84,7 @@ const variations = [
 				{},
 				[ [ 'core/post-title' ], [ 'core/post-excerpt' ] ],
 			],
+			[ 'core/query-pagination' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -101,6 +103,7 @@ const variations = [
 					[ 'core/post-excerpt' ],
 				],
 			],
+			[ 'core/query-pagination' ],
 		],
 		scope: [ 'block' ],
 	},
@@ -119,6 +122,7 @@ const variations = [
 					[ 'core/post-title' ],
 				],
 			],
+			[ 'core/query-pagination' ],
 		],
 		scope: [ 'block' ],
 	},

package/src/query-pagination/block.json

@@ -6,7 +6,16 @@
 	"parent": [ "core/query" ],
 	"description": "Displays a paginated navigation to next/previous set of posts, when applicable.",
 	"textdomain": "default",
+	"attributes": {
+		"paginationArrow": {
+			"type": "string",
+			"default": "none"
+		}
+	},
 	"usesContext": [ "queryId", "query" ],
+	"providesContext": {
+		"paginationArrow": "paginationArrow"
+	},
 	"supports": {
 		"align": true,
 		"reusable": false,
@@ -14,6 +23,13 @@
 		"color": {
 			"gradients": true,
 			"link": true
+		},
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex"
+			}
 		}
 	},
 	"editorStyle": "wp-block-query-pagination-editor",

package/src/query-pagination/deprecated.js

@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+const deprecated = [
+	// Version with wrapper `div` element.
+	{
+		save() {
+			return (
+				<div { ...useBlockProps.save() }>
+					<InnerBlocks.Content />
+				</div>
+			);
+		},
+	},
+];
+
+export default deprecated;

package/src/query-pagination/edit.js

@@ -1,10 +1,21 @@
 /**
  * WordPress dependencies
  */
+import { __ } from '@wordpress/i18n';
 import {
+	InspectorControls,
 	useBlockProps,
 	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { getBlockSupport } from '@wordpress/blocks';
+import { PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { QueryPaginationArrowControls } from './query-pagination-arrow-controls';
 
 const TEMPLATE = [
 	[ 'core/query-pagination-previous' ],
@@ -12,7 +23,35 @@ const TEMPLATE = [
 	[ 'core/query-pagination-next' ],
 ];
 
-export default function QueryPaginationEdit() {
+const getDefaultBlockLayout = ( blockTypeOrName ) => {
+	const layoutBlockSupportConfig = getBlockSupport(
+		blockTypeOrName,
+		'__experimentalLayout'
+	);
+	return layoutBlockSupportConfig?.default;
+};
+
+export default function QueryPaginationEdit( {
+	attributes: { paginationArrow, layout },
+	setAttributes,
+	clientId,
+	name,
+} ) {
+	const usedLayout = layout || getDefaultBlockLayout( name );
+	const hasNextPreviousBlocks = useSelect( ( select ) => {
+		const { getBlocks } = select( blockEditorStore );
+		const innerBlocks = getBlocks( clientId );
+		/**
+		 * Show the `paginationArrow` control only if a
+		 * `QueryPaginationNext/Previous` block exists.
+		 */
+		return innerBlocks?.find( ( innerBlock ) => {
+			return [
+				'core/query-pagination-next',
+				'core/query-pagination-previous',
+			].includes( innerBlock.name );
+		} );
+	}, [] );
 	const blockProps = useBlockProps();
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
@@ -21,7 +60,23 @@ export default function QueryPaginationEdit() {
 			'core/query-pagination-numbers',
 			'core/query-pagination-next',
 		],
-		orientation: 'horizontal',
+		__experimentalLayout: usedLayout,
 	} );
-	return <div { ...innerBlocksProps } />;
+	return (
+		<>
+			{ hasNextPreviousBlocks && (
+				<InspectorControls>
+					<PanelBody title={ __( 'Settings' ) }>
+						<QueryPaginationArrowControls
+							value={ paginationArrow }
+							onChange={ ( value ) => {
+								setAttributes( { paginationArrow: value } );
+							} }
+						/>
+					</PanelBody>
+				</InspectorControls>
+			) }
+			<div { ...innerBlocksProps } />
+		</>
+	);
 }

package/src/query-pagination/editor.scss

@@ -1,9 +1,8 @@
 $pagination-margin: 0.5em;
 
-.wp-block > .wp-block-query-pagination {
-	display: flex;
-	flex-wrap: wrap;
-	flex-direction: row;
+// Center flex items. This has an equivalent in style.scss.
+.wp-block[data-align="center"] > .wp-block-query-pagination {
+	justify-content: center;
 }
 
 .editor-styles-wrapper {
@@ -23,8 +22,6 @@ $pagination-margin: 0.5em;
 	> .wp-block-query-pagination-next,
 	> .wp-block-query-pagination-previous,
 	> .wp-block-query-pagination-numbers {
-		display: inline-block;
-
 		// Override editor auto block margins.
 		margin-left: 0;
 		margin-top: $pagination-margin;

package/src/query-pagination/index.js

@@ -9,6 +9,7 @@ import { queryPagination as icon } from '@wordpress/icons';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -17,4 +18,5 @@ export const settings = {
 	icon,
 	edit,
 	save,
+	deprecated,
 };

package/src/query-pagination/index.php

@@ -5,12 +5,35 @@
  * @package WordPress
  */
 
+/**
+ * Renders the `core/query-pagination` block on the server.
+ *
+ * @param array  $attributes Block attributes.
+ * @param string $content    Block default content.
+ *
+ * @return string Returns the wrapper for the Query pagination.
+ */
+function render_block_core_query_pagination( $attributes, $content ) {
+	if ( empty( trim( $content ) ) ) {
+		return '';
+	}
+
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		get_block_wrapper_attributes(),
+		$content
+	);
+}
+
 /**
  * Registers the `core/query-pagination` block on the server.
  */
 function register_block_core_query_pagination() {
 	register_block_type_from_metadata(
-		__DIR__ . '/query-pagination'
+		__DIR__ . '/query-pagination',
+		array(
+			'render_callback' => 'render_block_core_query_pagination',
+		)
 	);
 }
 add_action( 'init', 'register_block_core_query_pagination' );

package/src/query-pagination/query-pagination-arrow-controls.js

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components';
+
+export function QueryPaginationArrowControls( { value, onChange } ) {
+	return (
+		<ToggleGroupControl
+			label={ __( 'Arrow' ) }
+			value={ value }
+			onChange={ onChange }
+			help={ __(
+				'A decorative arrow appended to the next and previous page link.'
+			) }
+			isBlock
+		>
+			<ToggleGroupControlOption
+				value="none"
+				label={ _x(
+					'None',
+					'Arrow option for Query Pagination Next/Previous blocks'
+				) }
+			/>
+			<ToggleGroupControlOption
+				value="arrow"
+				label={ _x(
+					'Arrow',
+					'Arrow option for Query Pagination Next/Previous blocks'
+				) }
+			/>
+			<ToggleGroupControlOption
+				value="chevron"
+				label={ _x(
+					'Chevron',
+					'Arrow option for Query Pagination Next/Previous blocks'
+				) }
+			/>
+		</ToggleGroupControl>
+	);
+}

package/src/query-pagination/save.js

@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { InnerBlocks } from '@wordpress/block-editor';
 
 export default function save() {
-	return (
-		<div { ...useBlockProps.save() }>
-			<InnerBlocks.Content />
-		</div>
-	);
+	return <InnerBlocks.Content />;
 }

package/src/query-pagination/style.scss

@@ -1,14 +1,9 @@
 $pagination-margin: 0.5em;
 .wp-block-query-pagination {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-
 	// Increased specificity to override blocks default margin.
 	> .wp-block-query-pagination-next,
 	> .wp-block-query-pagination-previous,
 	> .wp-block-query-pagination-numbers {
-		display: inline-block;
 		/*rtl:ignore*/
 		margin-right: $pagination-margin;
 		margin-bottom: $pagination-margin;
@@ -18,4 +13,26 @@ $pagination-margin: 0.5em;
 			margin-right: 0;
 		}
 	}
+	.wp-block-query-pagination-previous-arrow {
+		margin-right: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+	.wp-block-query-pagination-next-arrow {
+		margin-left: 1ch;
+		display: inline-block; // Needed so that the transform works.
+		// chevron(`»`) symbol doesn't need the mirroring by us.
+		&:not(.is-arrow-chevron) {
+			// Flip for RTL.
+			transform: scaleX(1) #{"/*rtl:scaleX(-1);*/"}; // This points the arrow right for LTR and left for RTL.
+		}
+	}
+
+	&.aligncenter {
+		justify-content: center;
+	}
 }

package/src/query-pagination-next/block.json

@@ -11,7 +11,7 @@
 			"type": "string"
 		}
 	},
-	"usesContext": [ "queryId", "query" ],
+	"usesContext": [ "queryId", "query", "paginationArrow" ],
 	"supports": {
 		"reusable": false,
 		"html": false,