@wordpress/block-library 8.18.0 → 8.19.0

package/src/navigation-link/edit.js

@@ -486,13 +486,8 @@ export default function NavigationLinkEdit( {
 					{ /* eslint-enable */ }
 					{ ! url ? (
 						<div className="wp-block-navigation-link__placeholder-text">
-							<Tooltip position="top center" text={ tooltipText }>
-								<>
-									<span>{ missingText }</span>
-									<span className="wp-block-navigation-link__missing_text-tooltip">
-										{ tooltipText }
-									</span>
-								</>
+							<Tooltip text={ tooltipText }>
+								<span>{ missingText }</span>
 							</Tooltip>
 						</div>
 					) : (
@@ -548,35 +543,25 @@ export default function NavigationLinkEdit( {
 								isDraft ||
 								isLabelFieldFocused ) && (
 								<div className="wp-block-navigation-link__placeholder-text wp-block-navigation-link__label">
-									<Tooltip
-										position="top center"
-										text={ tooltipText }
-									>
-										<>
-											<span
-												aria-label={ __(
-													'Navigation link text'
-												) }
-											>
-												{
-													// Some attributes are stored in an escaped form. It's a legacy issue.
-													// Ideally they would be stored in a raw, unescaped form.
-													// Unescape is used here to "recover" the escaped characters
-													// so they display without encoding.
-													// See `updateAttributes` for more details.
-													`${ decodeEntities(
-														label
-													) } ${
-														isInvalid || isDraft
-															? placeholderText
-															: ''
-													}`.trim()
-												}
-											</span>
-											<span className="wp-block-navigation-link__missing_text-tooltip">
-												{ tooltipText }
-											</span>
-										</>
+									<Tooltip text={ tooltipText }>
+										<span
+											aria-label={ __(
+												'Navigation link text'
+											) }
+										>
+											{
+												// Some attributes are stored in an escaped form. It's a legacy issue.
+												// Ideally they would be stored in a raw, unescaped form.
+												// Unescape is used here to "recover" the escaped characters
+												// so they display without encoding.
+												// See `updateAttributes` for more details.
+												`${ decodeEntities( label ) } ${
+													isInvalid || isDraft
+														? placeholderText
+														: ''
+												}`.trim()
+											}
+										</span>
 									</Tooltip>
 								</div>
 							) }

package/src/navigation-link/editor.scss

@@ -67,14 +67,6 @@
 	color: #000;
 }
 
-.wp-block-navigation-link__missing_text-tooltip {
-	position: absolute;
-	width: 1px;
-	height: 1px;
-	padding: 0;
-	margin: -1px;
-	overflow: hidden;
-}
 /**
  * Menu item setup state. Is shown when a menu item has no URL configured.
  */

package/src/navigation-link/transforms.js

@@ -47,6 +47,13 @@ const transforms = {
 				return createBlock( 'core/navigation-link' );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/buttons' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
 	],
 	to: [
 		{
@@ -105,6 +112,21 @@ const transforms = {
 				return createBlock( 'core/page-list' );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/buttons' ],
+			transform: ( { label, url, rel, title, opensInNewTab } ) => {
+				return createBlock( 'core/buttons', {}, [
+					createBlock( 'core/button', {
+						text: label,
+						url,
+						rel,
+						title,
+						linkTarget: opensInNewTab ? '_blank' : undefined,
+					} ),
+				] );
+			},
+		},
 	],
 };
 

package/src/page-list/edit.js

@@ -320,8 +320,9 @@ export default function PageListEdit( {
 				{ pagesTree.length > 0 && (
 					<PanelBody>
 						<ComboboxControl
+							__next40pxDefaultSize
 							className="editor-page-attributes__parent"
-							label={ __( 'Parent page' ) }
+							label={ __( 'Parent' ) }
 							value={ parentPageID }
 							options={ pagesTree }
 							onChange={ ( value ) =>

package/src/paragraph/editor.scss

@@ -17,3 +17,8 @@
 		}
 	}
 }
+
+.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-right[style*="writing-mode: vertical-rl"],
+.block-editor-block-list__block[data-type="core/paragraph"].has-text-align-left[style*="writing-mode: vertical-lr"] {
+	rotate: 180deg;
+}

package/src/paragraph/style.scss

@@ -49,3 +49,8 @@ p.has-background {
 :where(p.has-text-color:not(.has-link-color)) a {
 	color: inherit;
 }
+
+p.has-text-align-right[style*="writing-mode:vertical-rl"],
+p.has-text-align-left[style*="writing-mode:vertical-lr"] {
+	rotate: 180deg;
+}

package/src/pattern/index.php

@@ -43,8 +43,8 @@ function render_block_core_pattern( $attributes ) {
 	$pattern = $registry->get_registered( $slug );
 	$content = _inject_theme_attribute_in_block_template_content( $pattern['content'] );
 
-	$gutenberg_experiments = get_option( 'gutenberg-experiments' );
-	if ( $gutenberg_experiments && ! empty( $gutenberg_experiments['gutenberg-auto-inserting-blocks'] ) ) {
+	// This can be removed when the minimum supported WordPress is >= 6.4.
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
 		// TODO: In the long run, we'd likely want to have a filter in the `WP_Block_Patterns_Registry` class
 		// instead to allow us plugging in code like this.
 		$blocks  = parse_blocks( $content );

package/src/post-comments-form/edit.js

@@ -11,6 +11,9 @@ import {
 	BlockControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { VisuallyHidden } from '@wordpress/components';
+import { useInstanceId } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,10 +28,14 @@ export default function PostCommentsFormEdit( {
 	const { textAlign } = attributes;
 	const { postId, postType } = context;
 
+	const instanceId = useInstanceId( PostCommentsFormEdit );
+	const instanceIdDesc = sprintf( 'comments-form-edit-%d-desc', instanceId );
+
 	const blockProps = useBlockProps( {
 		className: classnames( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
 		} ),
+		'aria-describedby': instanceIdDesc,
 	} );
 
 	return (
@@ -43,6 +50,9 @@ export default function PostCommentsFormEdit( {
 			</BlockControls>
 			<div { ...blockProps }>
 				<CommentsForm postId={ postId } postType={ postType } />
+				<VisuallyHidden id={ instanceIdDesc }>
+					{ __( 'Comments form disabled in editor.' ) }
+				</VisuallyHidden>
 			</div>
 		</>
 	);

package/src/post-comments-form/form.js

@@ -23,7 +23,11 @@ const CommentsFormPlaceholder = () => {
 	return (
 		<div className="comment-respond">
 			<h3 className="comment-reply-title">{ __( 'Leave a Reply' ) }</h3>
-			<form noValidate className="comment-form" inert="true">
+			<form
+				noValidate
+				className="comment-form"
+				onSubmit={ ( event ) => event.preventDefault() }
+			>
 				<p>
 					<label htmlFor={ `comment-${ instanceId }` }>
 						{ __( 'Comment' ) }
@@ -33,6 +37,7 @@ const CommentsFormPlaceholder = () => {
 						name="comment"
 						cols="45"
 						rows="8"
+						readOnly
 					/>
 				</p>
 				<p className="form-submit wp-block-button">
@@ -45,6 +50,7 @@ const CommentsFormPlaceholder = () => {
 						) }
 						label={ __( 'Post Comment' ) }
 						value={ __( 'Post Comment' ) }
+						aria-disabled="true"
 					/>
 				</p>
 			</form>

package/src/post-content/block.json

@@ -14,6 +14,9 @@
 		"dimensions": {
 			"minHeight": true
 		},
+		"spacing": {
+			"blockGap": true
+		},
 		"color": {
 			"gradients": true,
 			"link": true,

package/src/post-content/edit.js

@@ -20,14 +20,19 @@ import { useSelect } from '@wordpress/data';
  */
 import { useCanEditEntity } from '../utils/hooks';
 
-function ReadOnlyContent( { userCanEdit, postType, postId } ) {
+function ReadOnlyContent( {
+	layoutClassNames,
+	userCanEdit,
+	postType,
+	postId,
+} ) {
 	const [ , , content ] = useEntityProp(
 		'postType',
 		postType,
 		'content',
 		postId
 	);
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( { className: layoutClassNames } );
 	return content?.protected && ! userCanEdit ? (
 		<div { ...blockProps }>
 			<Warning>{ __( 'This content is password protected.' ) }</Warning>
@@ -77,7 +82,8 @@ function EditableContent( { context = {} } ) {
 }
 
 function Content( props ) {
-	const { context: { queryId, postType, postId } = {} } = props;
+	const { context: { queryId, postType, postId } = {}, layoutClassNames } =
+		props;
 	const userCanEdit = useCanEditEntity( 'postType', postType, postId );
 	if ( userCanEdit === undefined ) {
 		return null;
@@ -90,6 +96,7 @@ function Content( props ) {
 		<EditableContent { ...props } />
 	) : (
 		<ReadOnlyContent
+			layoutClassNames={ layoutClassNames }
 			userCanEdit={ userCanEdit }
 			postType={ postType }
 			postId={ postId }
@@ -133,11 +140,9 @@ function RecursionError() {
 
 export default function PostContentEdit( {
 	context,
-	attributes,
 	__unstableLayoutClassNames: layoutClassNames,
 } ) {
 	const { postId: contextPostId, postType: contextPostType } = context;
-	const { layout = {} } = attributes;
 	const hasAlreadyRendered = useHasRecursion( contextPostId );
 
 	if ( contextPostId && contextPostType && hasAlreadyRendered ) {
@@ -147,7 +152,10 @@ export default function PostContentEdit( {
 	return (
 		<RecursionProvider uniqueId={ contextPostId }>
 			{ contextPostId && contextPostType ? (
-				<Content context={ context } layout={ layout } />
+				<Content
+					context={ context }
+					layoutClassNames={ layoutClassNames }
+				/>
 			) : (
 				<Placeholder layoutClassNames={ layoutClassNames } />
 			) }

package/src/post-excerpt/index.php

@@ -31,7 +31,7 @@ function render_block_core_post_excerpt( $attributes, $content, $block ) {
 	}
 
 	$more_text           = ! empty( $attributes['moreText'] ) ? '<a class="wp-block-post-excerpt__more-link" href="' . esc_url( get_the_permalink( $block->context['postId'] ) ) . '">' . wp_kses_post( $attributes['moreText'] ) . '</a>' : '';
-	$filter_excerpt_more = static function( $more ) use ( $more_text ) {
+	$filter_excerpt_more = static function ( $more ) use ( $more_text ) {
 		return empty( $more_text ) ? $more : '';
 	};
 	/**
@@ -87,7 +87,7 @@ if ( is_admin() ||
 	defined( 'REST_REQUEST' ) && REST_REQUEST ) {
 	add_filter(
 		'excerpt_length',
-		static function() {
+		static function () {
 			return 100;
 		},
 		PHP_INT_MAX

package/src/post-featured-image/index.php

@@ -184,12 +184,12 @@ function get_block_core_post_featured_image_border_attributes( $attributes ) {
 
 	// Border color.
 	$preset_color           = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
-	$custom_color           = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
+	$custom_color           = $attributes['style']['border']['color'] ?? null;
 	$border_styles['color'] = $preset_color ? $preset_color : $custom_color;
 
 	// Individual border styles e.g. top, left etc.
 	foreach ( $sides as $side ) {
-		$border                 = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
+		$border                 = $attributes['style']['border'][ $side ] ?? null;
 		$border_styles[ $side ] = array(
 			'color' => isset( $border['color'] ) ? $border['color'] : null,
 			'style' => isset( $border['style'] ) ? $border['style'] : null,

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

@@ -113,6 +113,7 @@ const Overlay = ( {
 						max={ 100 }
 						step={ 10 }
 						required
+						__next40pxDefaultSize
 					/>
 				</ToolsPanelItem>
 			</InspectorControls>

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

@@ -28,7 +28,11 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= " has-text-align-{$attributes['textAlign']}";
 	}
-	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) );
+	$wrapper_attributes = get_block_wrapper_attributes(
+		array(
+			'class' => $classes,
+		)
+	);
 	// Set default values.
 	$format = '%link';
 	$link   = 'next' === $navigation_type ? _x( 'Next', 'label for next post link' ) : _x( 'Previous', 'label for previous post link' );

package/src/post-navigation-link/style.scss

@@ -20,4 +20,8 @@
 		}
 	}
 
+	&.has-text-align-right[style*="writing-mode: vertical-rl"],
+	&.has-text-align-left[style*="writing-mode: vertical-lr"] {
+		rotate: 180deg;
+	}
 }

package/src/post-template/index.php

@@ -106,7 +106,7 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 
 		$post_id              = get_the_ID();
 		$post_type            = get_post_type();
-		$filter_block_context = static function( $context ) use ( $post_id, $post_type ) {
+		$filter_block_context = static function ( $context ) use ( $post_id, $post_type ) {
 			$context['postType'] = $post_type;
 			$context['postId']   = $post_id;
 			return $context;

package/src/post-terms/index.php

@@ -81,8 +81,11 @@ function register_block_core_post_terms() {
 		$variation = array(
 			'name'        => $taxonomy->name,
 			'title'       => $taxonomy->label,
-			/* translators: %s: taxonomy's label */
-			'description' => sprintf( __( 'Display the assigned taxonomy: %s' ), $taxonomy->label ),
+			'description' => sprintf(
+				/* translators: %s: taxonomy's label */
+				__( 'Display a list of assigned terms from the taxonomy: %s' ),
+				$taxonomy->label
+			),
 			'attributes'  => array(
 				'term' => $taxonomy->name,
 			),

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

@@ -4,6 +4,8 @@
 import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
+const EMPTY_ARRAY = [];
+
 export default function usePostTerms( { postId, term } ) {
 	const { slug } = term;
 
@@ -12,8 +14,8 @@ export default function usePostTerms( { postId, term } ) {
 			const visible = term?.visibility?.publicly_queryable;
 			if ( ! visible ) {
 				return {
-					postTerms: [],
-					_isLoading: false,
+					postTerms: EMPTY_ARRAY,
+					isLoading: false,
 					hasPostTerms: false,
 				};
 			}

package/src/preformatted/edit.js

@@ -3,12 +3,14 @@
  */
 import { __ } from '@wordpress/i18n';
 import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 
 export default function PreformattedEdit( {
 	attributes,
 	mergeBlocks,
 	setAttributes,
 	onRemove,
+	insertBlocksAfter,
 	style,
 } ) {
 	const { content } = attributes;
@@ -31,6 +33,9 @@ export default function PreformattedEdit( {
 			onMerge={ mergeBlocks }
 			{ ...blockProps }
 			__unstablePastePlainText
+			__unstableOnSplitAtDoubleLineEnd={ () =>
+				insertBlocksAfter( createBlock( getDefaultBlockName() ) )
+			}
 		/>
 	);
 }

package/src/preformatted/index.js

@@ -34,7 +34,7 @@ export const settings = {
 	save,
 	merge( attributes, attributesToMerge ) {
 		return {
-			content: attributes.content + attributesToMerge.content,
+			content: attributes.content + '\n\n' + attributesToMerge.content,
 		};
 	},
 };

package/src/pullquote/deprecated.js

@@ -14,12 +14,6 @@ import {
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { select } from '@wordpress/data';
-import {
-	create,
-	replace,
-	toHTMLString,
-	__UNSTABLE_LINE_SEPARATOR,
-} from '@wordpress/rich-text';
 
 /**
  * Internal dependencies
@@ -64,13 +58,14 @@ function parseBorderColor( styleString ) {
 }
 
 function multilineToInline( value ) {
-	return toHTMLString( {
-		value: replace(
-			create( { html: value, multilineTag: 'p' } ),
-			new RegExp( __UNSTABLE_LINE_SEPARATOR, 'g' ),
-			'\n'
-		),
-	} );
+	value = value || `<p></p>`;
+	const padded = `</p>${ value }<p>`;
+	const values = padded.split( `</p><p>` );
+
+	values.shift();
+	values.pop();
+
+	return values.join( '<br>' );
 }
 
 const v5 = {

package/src/query/edit/enhanced-pagination-modal.js

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Modal,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState, useEffect } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useContainsThirdPartyBlocks } from '../utils';
+
+const disableEnhancedPaginationDescription = __(
+	'Plugin blocks are not supported yet. For the enhanced pagination to work, remove the plugin block, then re-enable "Enhanced pagination" in the Query Block settings.'
+);
+
+const modalDescriptionId =
+	'wp-block-query-enhanced-pagination-modal__description';
+
+export default function EnhancedPaginationModal( {
+	clientId,
+	attributes: { enhancedPagination },
+	setAttributes,
+} ) {
+	const [ isOpen, setOpen ] = useState( false );
+
+	const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId );
+
+	useEffect( () => {
+		setOpen( containsThirdPartyBlocks && enhancedPagination );
+	}, [ containsThirdPartyBlocks, enhancedPagination, setOpen ] );
+
+	return (
+		isOpen && (
+			<Modal
+				title={ __( 'Enhanced pagination will be disabled' ) }
+				className="wp-block-query__enhanced-pagination-modal"
+				aria={ {
+					describedby: modalDescriptionId,
+				} }
+				isDismissible={ false }
+				shouldCloseOnEsc={ false }
+				shouldCloseOnClickOutside={ false }
+			>
+				<VStack alignment="right" spacing={ 5 }>
+					<span id={ modalDescriptionId }>
+						{ disableEnhancedPaginationDescription }
+					</span>
+					<Button
+						variant="primary"
+						onClick={ () => {
+							setAttributes( { enhancedPagination: false } );
+						} }
+					>
+						{ __( 'OK' ) }
+					</Button>
+				</VStack>
+			</Modal>
+		)
+	);
+}

package/src/query/edit/inspector-controls/enhanced-pagination-control.js

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { ToggleControl, Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useContainsThirdPartyBlocks } from '../../utils';
+
+export default function EnhancedPaginationControl( {
+	enhancedPagination,
+	setAttributes,
+	clientId,
+} ) {
+	const enhancedPaginationNotice = __(
+		"Enhanced pagination doesn't support plugin blocks yet. If you want to enable it, you have to remove all plugin blocks from the Query Loop."
+	);
+
+	const containsThirdPartyBlocks = useContainsThirdPartyBlocks( clientId );
+
+	return (
+		<>
+			<ToggleControl
+				label={ __( 'Enhanced pagination' ) }
+				help={ __(
+					'Browsing between pages won’t require a full page reload.'
+				) }
+				checked={ !! enhancedPagination }
+				disabled={ containsThirdPartyBlocks }
+				onChange={ ( value ) => {
+					setAttributes( {
+						enhancedPagination: !! value,
+					} );
+				} }
+			/>
+			{ containsThirdPartyBlocks && (
+				<Notice
+					status="warning"
+					isDismissible={ false }
+					className="wp-block-query__enhanced-pagination-notice"
+				>
+					{ enhancedPaginationNotice }
+				</Notice>
+			) }
+		</>
+	);
+}