@wordpress/block-library 6.0.12 → 6.0.17-next.33ec3857e2.0

package/src/post-comments-link/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-comments-link",
 	"title": "Post Comments Link",

package/src/post-content/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-content",
 	"title": "Post Content",

package/src/post-date/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-date",
 	"title": "Post Date",

package/src/post-excerpt/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-excerpt",
 	"title": "Post Excerpt",

package/src/post-featured-image/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-featured-image",
 	"title": "Post Featured Image",

package/src/post-featured-image/dimension-controls.js

@@ -1,22 +1,15 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
 import {
-	PanelBody,
 	__experimentalUnitControl as UnitControl,
-	Flex,
-	FlexItem,
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalUseCustomUnits as useCustomUnits,
+	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
-import { useSetting } from '@wordpress/block-editor';
+import { InspectorControls, useSetting } from '@wordpress/block-editor';
 
 const SCALE_OPTIONS = (
 	<>
@@ -38,6 +31,8 @@ const SCALE_OPTIONS = (
 	</>
 );
 
+const DEFAULT_SCALE = 'cover';
+
 const scaleHelp = {
 	cover: __(
 		'Image is scaled and cropped to fill the entire space without being distorted.'
@@ -51,6 +46,7 @@ const scaleHelp = {
 };
 
 const DimensionControls = ( {
+	clientId,
 	attributes: { width, height, scale },
 	setAttributes,
 } ) => {
@@ -72,53 +68,82 @@ const DimensionControls = ( {
 	};
 	const scaleLabel = _x( 'Scale', 'Image scaling options' );
 	return (
-		<PanelBody title={ __( 'Dimensions' ) }>
-			<Flex
-				justify="space-between"
-				className={ classNames(
-					'block-library-post-featured-image-dimension-controls',
-					{ 'scale-control-is-visible': !! height }
-				) }
+		<InspectorControls __experimentalGroup="dimensions">
+			<ToolsPanelItem
+				className="single-column"
+				hasValue={ () => !! height }
+				label={ __( 'Height' ) }
+				onDeselect={ () => setAttributes( { height: undefined } ) }
+				resetAllFilter={ () => ( {
+					height: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
+			>
+				<UnitControl
+					label={ __( 'Height' ) }
+					labelPosition="top"
+					value={ height || '' }
+					min={ 0 }
+					onChange={ ( nextHeight ) =>
+						onDimensionChange( 'height', nextHeight )
+					}
+					units={ units }
+				/>
+			</ToolsPanelItem>
+			<ToolsPanelItem
+				className="single-column"
+				hasValue={ () => !! width }
+				label={ __( 'Width' ) }
+				onDeselect={ () => setAttributes( { width: undefined } ) }
+				resetAllFilter={ () => ( {
+					width: undefined,
+				} ) }
+				isShownByDefault={ true }
+				panelId={ clientId }
 			>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Height' ) }
-						labelPosition="top"
-						value={ height || '' }
-						onChange={ ( nextHeight ) => {
-							onDimensionChange( 'height', nextHeight );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-				<FlexItem>
-					<UnitControl
-						label={ __( 'Width' ) }
-						labelPosition="top"
-						value={ width || '' }
-						onChange={ ( nextWidth ) => {
-							onDimensionChange( 'width', nextWidth );
-						} }
-						units={ units }
-					/>
-				</FlexItem>
-			</Flex>
+				<UnitControl
+					label={ __( 'Width' ) }
+					labelPosition="top"
+					value={ width || '' }
+					min={ 0 }
+					onChange={ ( nextWidth ) =>
+						onDimensionChange( 'width', nextWidth )
+					}
+					units={ units }
+				/>
+			</ToolsPanelItem>
 			{ !! height && (
-				<ToggleGroupControl
+				<ToolsPanelItem
+					hasValue={ () => !! scale && scale !== DEFAULT_SCALE }
 					label={ scaleLabel }
-					value={ scale }
-					help={ scaleHelp[ scale ] }
-					onChange={ ( value ) => {
+					onDeselect={ () =>
 						setAttributes( {
-							scale: value,
-						} );
-					} }
-					isBlock
+							scale: DEFAULT_SCALE,
+						} )
+					}
+					resetAllFilter={ () => ( {
+						scale: DEFAULT_SCALE,
+					} ) }
+					isShownByDefault={ true }
+					panelId={ clientId }
 				>
-					{ SCALE_OPTIONS }
-				</ToggleGroupControl>
+					<ToggleGroupControl
+						label={ scaleLabel }
+						value={ scale }
+						help={ scaleHelp[ scale ] }
+						onChange={ ( value ) =>
+							setAttributes( {
+								scale: value,
+							} )
+						}
+						isBlock
+					>
+						{ SCALE_OPTIONS }
+					</ToggleGroupControl>
+				</ToolsPanelItem>
 			) }
-		</PanelBody>
+		</InspectorControls>
 	);
 };
 

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

@@ -4,6 +4,7 @@
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
+	MenuItem,
 	ToggleControl,
 	PanelBody,
 	Placeholder,
@@ -46,6 +47,7 @@ const placeholderChip = (
 );
 
 function PostFeaturedImageDisplay( {
+	clientId,
 	attributes,
 	setAttributes,
 	context: { postId, postType, queryId },
@@ -136,11 +138,12 @@ function PostFeaturedImageDisplay( {
 
 	return (
 		<>
+			<DimensionControls
+				clientId={ clientId }
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+			/>
 			<InspectorControls>
-				<DimensionControls
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-				/>
 				<PanelBody title={ __( 'Link settings' ) }>
 					<ToggleControl
 						label={ sprintf(
@@ -162,7 +165,11 @@ function PostFeaturedImageDisplay( {
 						accept="image/*"
 						onSelect={ onSelectImage }
 						onError={ onUploadError }
-					/>
+					>
+						<MenuItem onClick={ () => setFeaturedImage( 0 ) }>
+							{ __( 'Reset' ) }
+						</MenuItem>
+					</MediaReplaceFlow>
 				</BlockControls>
 			) }
 			<figure { ...blockProps }>{ image }</figure>

package/src/post-featured-image/editor.scss

@@ -128,11 +128,3 @@ div[data-type="core/post-featured-image"] {
 		display: block;
 	}
 }
-
-.block-library-post-featured-image-dimension-controls {
-	margin-bottom: $grid-unit-10;
-
-	&.scale-control-is-visible {
-		margin-bottom: $grid-unit-20;
-	}
-}

package/src/post-featured-image/style.scss

@@ -2,7 +2,7 @@
 	margin-left: 0;
 	margin-right: 0;
 	a {
-		display: inline-block;
+		display: block;
 	}
 	img {
 		max-width: 100%;

package/src/post-navigation-link/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-navigation-link",
 	"title": "Post Navigation Link",

package/src/post-template/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-template",
 	"title": "Post Template",

package/src/post-template/edit.js

@@ -6,12 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useState, useMemo } from '@wordpress/element';
+import { memo, useMemo, useState } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import {
 	BlockContextProvider,
-	BlockPreview,
+	__experimentalUseBlockPreview as useBlockPreview,
 	useBlockProps,
 	useInnerBlocksProps,
 	store as blockEditorStore,
@@ -30,6 +30,39 @@ function PostTemplateInnerBlocks() {
 	return <li { ...innerBlocksProps } />;
 }
 
+function PostTemplateBlockPreview( {
+	blocks,
+	blockContextId,
+	isHidden,
+	setActiveBlockContextId,
+} ) {
+	const blockPreviewProps = useBlockPreview( {
+		blocks,
+	} );
+
+	const handleOnClick = () => {
+		setActiveBlockContextId( blockContextId );
+	};
+
+	const style = {
+		display: isHidden ? 'none' : undefined,
+	};
+
+	return (
+		<li
+			{ ...blockPreviewProps }
+			tabIndex={ 0 }
+			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
+			role="button"
+			onClick={ handleOnClick }
+			onKeyPress={ handleOnClick }
+			style={ style }
+		/>
+	);
+}
+
+const MemoizedPostTemplateBlockPreview = memo( PostTemplateBlockPreview );
+
 export default function PostTemplateEdit( {
 	clientId,
 	context: {
@@ -53,7 +86,7 @@ export default function PostTemplateEdit( {
 	},
 } ) {
 	const [ { page } ] = queryContext;
-	const [ activeBlockContext, setActiveBlockContext ] = useState();
+	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 
 	const { posts, blocks } = useSelect(
 		( select ) => {
@@ -115,7 +148,6 @@ export default function PostTemplateEdit( {
 			templateSlug,
 		]
 	);
-
 	const blockContexts = useMemo(
 		() =>
 			posts?.map( ( post ) => ( {
@@ -144,6 +176,10 @@ export default function PostTemplateEdit( {
 		return <p { ...blockProps }> { __( 'No results found.' ) }</p>;
 	}
 
+	// To avoid flicker when switching active block contexts, a preview is rendered
+	// for each block context, but the preview for the active block context is hidden.
+	// This ensures that when it is displayed again, the cached rendering of the
+	// block preview is used, instead of having to re-render the preview from scratch.
 	return (
 		<ul { ...blockProps }>
 			{ blockContexts &&
@@ -152,20 +188,21 @@ export default function PostTemplateEdit( {
 						key={ blockContext.postId }
 						value={ blockContext }
 					>
-						{ blockContext ===
-						( activeBlockContext || blockContexts[ 0 ] ) ? (
+						{ blockContext.postId ===
+						( activeBlockContextId ||
+							blockContexts[ 0 ]?.postId ) ? (
 							<PostTemplateInnerBlocks />
-						) : (
-							<li>
-								<BlockPreview
-									blocks={ blocks }
-									__experimentalLive
-									__experimentalOnClick={ () =>
-										setActiveBlockContext( blockContext )
-									}
-								/>
-							</li>
-						) }
+						) : null }
+						<MemoizedPostTemplateBlockPreview
+							blocks={ blocks }
+							blockContextId={ blockContext.postId }
+							setActiveBlockContextId={ setActiveBlockContextId }
+							isHidden={
+								blockContext.postId ===
+								( activeBlockContextId ||
+									blockContexts[ 0 ]?.postId )
+							}
+						/>
 					</BlockContextProvider>
 				) ) }
 		</ul>

package/src/post-terms/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-terms",
 	"title": "Post Terms",

package/src/post-title/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/post-title",
 	"title": "Post Title",

package/src/post-title/style.scss

@@ -1,3 +1,7 @@
-.wp-block-post-title a {
-	display: inline-block;
+.wp-block-post-title {
+	word-break: break-word;
+
+	a {
+		display: inline-block;
+	}
 }

package/src/preformatted/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/preformatted",
 	"title": "Preformatted",

package/src/preformatted/edit.native.js

@@ -28,10 +28,12 @@ export function PreformattedEdit( props ) {
 		...( style?.fontSize && { fontSize: style.fontSize } ),
 		...( style?.color && { color: style.color } ),
 	};
+	const hasBaseColors =
+		style?.baseColors && Object.entries( style.baseColors ).length !== 0;
 	const containerStyles = [
 		wpBlockPreformatted,
 		style?.backgroundColor && { backgroundColor: style.backgroundColor },
-		style?.baseColors &&
+		hasBaseColors &&
 			! style?.backgroundColor &&
 			styles[ 'wp-block-preformatted__no-background' ],
 	];

package/src/pullquote/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/pullquote",
 	"title": "Pullquote",
@@ -48,7 +49,13 @@
 			"color": true,
 			"radius": true,
 			"style": true,
-			"width": true
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-pullquote-editor",

package/src/pullquote/style.scss

@@ -3,6 +3,7 @@
 	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.
+	box-sizing: border-box;
 
 	p,
 	blockquote,

package/src/query/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query",
 	"title": "Query Loop",

package/src/query-pagination/block.json

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination",
 	"title": "Pagination",

package/src/query-pagination/editor.scss

@@ -14,10 +14,6 @@ $pagination-margin: 0.5em;
 	}
 }
 
-.block-library-query-pagination-toolbar__popover .components-popover__content {
-	min-width: 230px;
-}
-
 .wp-block-query-pagination {
 	> .wp-block-query-pagination-next,
 	> .wp-block-query-pagination-previous,

package/src/query-pagination/style.scss

@@ -32,7 +32,17 @@ $pagination-margin: 0.5em;
 		}
 	}
 
-	&.aligncenter {
-		justify-content: center;
+	// Non-clickeable previous and next elements are not visible
+	>span.wp-block-query-pagination-next,
+	>span.wp-block-query-pagination-previous {
+		visibility: hidden;
 	}
+
+	&.wp-justify-left,
+	&.wp-justify-right {
+		> [aria-hidden="true"] {
+			display: none;
+		}
+	}
+
 }

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

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination-next",
 	"title": "Next Page",

package/src/query-pagination-next/index.php

@@ -17,40 +17,63 @@
 function render_block_core_query_pagination_next( $attributes, $content, $block ) {
 	$page_key = isset( $block->context['queryId'] ) ? 'query-' . $block->context['queryId'] . '-page' : 'query-page';
 	$page     = empty( $_GET[ $page_key ] ) ? 1 : (int) $_GET[ $page_key ];
+	$paged    = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
 	$max_page = isset( $block->context['query']['pages'] ) ? (int) $block->context['query']['pages'] : 0;
 
-	$wrapper_attributes = get_block_wrapper_attributes();
-	$default_label      = __( 'Next Page' );
-	$label              = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
-	$pagination_arrow   = get_query_pagination_arrow( $block, true );
+	$wrapper_attributes        = get_block_wrapper_attributes();
+	$hidden_wrapper_attributes = get_block_wrapper_attributes( array( 'aria-hidden' => 'true' ) );
+	$default_label             = __( 'Next Page' );
+	$label                     = isset( $attributes['label'] ) && ! empty( $attributes['label'] ) ? $attributes['label'] : $default_label;
+	$pagination_arrow          = get_query_pagination_arrow( $block, true );
+	$content                   = '';
+
 	if ( $pagination_arrow ) {
 		$label .= $pagination_arrow;
 	}
-	$content = '';
 
 	// Check if the pagination is for Query that inherits the global context.
 	if ( isset( $block->context['query']['inherit'] ) && $block->context['query']['inherit'] ) {
+		global $wp_query;
+		// Take into account if we have set a bigger `max page`
+		// than what the query has.
+		$max_page               = ! $max_page || $max_page > $wp_query->max_num_pages ? $wp_query->max_num_pages : $max_page;
 		$filter_link_attributes = function() use ( $wrapper_attributes ) {
 			return $wrapper_attributes;
 		};
 		add_filter( 'next_posts_link_attributes', $filter_link_attributes );
-		// Take into account if we have set a bigger `max page`
-		// than what the query has.
-		global $wp_query;
-		if ( $max_page > $wp_query->max_num_pages ) {
-			$max_page = $wp_query->max_num_pages;
+
+		// If there are pages to paginate.
+		if ( 1 < $max_page ) {
+			if ( (int) $max_page !== $paged ) { // If we are NOT in the last one.
+				$content = get_next_posts_link( $label, $max_page );
+			} else { // If we are in the last one.
+				$content = sprintf(
+					'<span %1$s>%2$s</span>',
+					$hidden_wrapper_attributes,
+					$label
+				);
+			}
 		}
-		$content = get_next_posts_link( $label, $max_page );
 		remove_filter( 'next_posts_link_attributes', $filter_link_attributes );
 	} elseif ( ! $max_page || $max_page > $page ) {
-		$custom_query = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
-		if ( (int) $custom_query->max_num_pages !== $page ) {
-			$content = sprintf(
-				'<a href="%1$s" %2$s>%3$s</a>',
-				esc_url( add_query_arg( $page_key, $page + 1 ) ),
-				$wrapper_attributes,
-				$label
-			);
+		$custom_query  = new WP_Query( build_query_vars_from_query_block( $block, $page ) );
+		$max_num_pages = $custom_query->max_num_pages ? $custom_query->max_num_pages : 1;
+		// If there are pages to paginate.
+		if ( 1 < $max_num_pages ) {
+			if ( (int) $max_num_pages !== $page ) { // If we are NOT in the last one.
+				$content = sprintf(
+					'<a href="%1$s" %2$s>%3$s</a>',
+					esc_url( add_query_arg( $page_key, $page + 1 ) ),
+					$wrapper_attributes,
+					$label
+				);
+			} else { // If we are in the last one.
+				$content = sprintf(
+					'<span %1$s>%2$s</span>',
+					$hidden_wrapper_attributes,
+					$label
+				);
+			}
 		}
 		wp_reset_postdata(); // Restore original Post Data.
 	}

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

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination-numbers",
 	"title": "Page Numbers",

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

@@ -1,4 +1,5 @@
 {
+	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
 	"name": "core/query-pagination-previous",
 	"title": "Previous Page",