@wordpress/block-library 8.22.0 → 8.23.0

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

@@ -43,6 +43,11 @@ function getMediaSourceUrlBySizeSlug( media, slug ) {
 	);
 }
 
+const disabledClickProps = {
+	onClick: ( event ) => event.preventDefault(),
+	'aria-disabled': true,
+};
+
 export default function PostFeaturedImageEdit( {
 	clientId,
 	attributes,
@@ -67,9 +72,10 @@ export default function PostFeaturedImageEdit( {
 		postId
 	);
 
-	const { media, postType } = useSelect(
+	const { media, postType, postPermalink } = useSelect(
 		( select ) => {
-			const { getMedia, getPostType } = select( coreStore );
+			const { getMedia, getPostType, getEditedEntityRecord } =
+				select( coreStore );
 			return {
 				media:
 					featuredImage &&
@@ -77,10 +83,16 @@ export default function PostFeaturedImageEdit( {
 						context: 'view',
 					} ),
 				postType: postTypeSlug && getPostType( postTypeSlug ),
+				postPermalink: getEditedEntityRecord(
+					'postType',
+					postTypeSlug,
+					postId
+				)?.link,
 			};
 		},
-		[ featuredImage, postTypeSlug ]
+		[ featuredImage, postTypeSlug, postId ]
 	);
+
 	const mediaUrl = getMediaSourceUrlBySizeSlug( media, sizeSlug );
 
 	const imageSizes = useSelect(
@@ -197,7 +209,17 @@ export default function PostFeaturedImageEdit( {
 			<>
 				{ controls }
 				<div { ...blockProps }>
-					{ placeholder() }
+					{ !! isLink ? (
+						<a
+							href={ postPermalink }
+							target={ linkTarget }
+							{ ...disabledClickProps }
+						>
+							{ placeholder() }
+						</a>
+					) : (
+						placeholder()
+					) }
 					<Overlay
 						attributes={ attributes }
 						setAttributes={ setAttributes }
@@ -295,7 +317,18 @@ export default function PostFeaturedImageEdit( {
 				</BlockControls>
 			) }
 			<figure { ...blockProps }>
-				{ image }
+				{ /* If the featured image is linked, wrap in an <a /> tag to trigger any inherited link element styles */ }
+				{ !! isLink ? (
+					<a
+						href={ postPermalink }
+						target={ linkTarget }
+						{ ...disabledClickProps }
+					>
+						{ image }
+					</a>
+				) : (
+					image
+				) }
 				<Overlay
 					attributes={ attributes }
 					setAttributes={ setAttributes }

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

@@ -96,6 +96,25 @@
 		height: 100%;
 		width: 100%;
 	}
+
+	// When the Post Featured Image block is linked,
+	// it's wrapped with a disabled <a /> tag.
+	// Restore cursor style so it doesn't appear 'clickable'.
+	> a {
+		cursor: default;
+	}
+
+	// When the Post Featured Image block is linked,
+	// and wrapped with a disabled <a /> tag
+	// ensure that the placeholder items are visible when selected.
+	&.is-selected .components-placeholder.has-illustration {
+		.components-button,
+		.components-placeholder__instructions,
+		.components-placeholder__label {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
 }
 
 div[data-type="core/post-featured-image"] {

package/src/post-template/block.json

@@ -10,7 +10,6 @@
 	"usesContext": [
 		"queryId",
 		"query",
-		"queryContext",
 		"displayLayout",
 		"templateSlug",
 		"previewPostType",

package/src/post-template/edit.js

@@ -96,7 +96,6 @@ export default function PostTemplateEdit( {
 			// REST API or be handled by custom REST filters like `rest_{$this->post_type}_query`.
 			...restQueryArgs
 		} = {},
-		queryContext = [ { page: 1 } ],
 		templateSlug,
 		previewPostType,
 	},
@@ -104,8 +103,6 @@ export default function PostTemplateEdit( {
 	__unstableLayoutClassNames,
 } ) {
 	const { type: layoutType, columnCount = 3 } = layout || {};
-
-	const [ { page } ] = queryContext;
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 	const { posts, blocks } = useSelect(
 		( select ) => {
@@ -126,7 +123,7 @@ export default function PostTemplateEdit( {
 					slug: templateSlug.replace( 'category-', '' ),
 				} );
 			const query = {
-				offset: perPage ? perPage * ( page - 1 ) + offset : 0,
+				offset: perPage ? perPage + offset : 0,
 				order,
 				orderby: orderBy,
 			};
@@ -194,7 +191,6 @@ export default function PostTemplateEdit( {
 		},
 		[
 			perPage,
-			page,
 			offset,
 			order,
 			orderBy,

package/src/post-terms/edit.js

@@ -97,7 +97,6 @@ export default function PostTermsEdit( {
 					<RichText
 						allowedFormats={ ALLOWED_FORMATS }
 						className="wp-block-post-terms__prefix"
-						multiline={ false }
 						aria-label={ __( 'Prefix' ) }
 						placeholder={ __( 'Prefix' ) + ' ' }
 						value={ prefix }
@@ -141,7 +140,6 @@ export default function PostTermsEdit( {
 					<RichText
 						allowedFormats={ ALLOWED_FORMATS }
 						className="wp-block-post-terms__suffix"
-						multiline={ false }
 						aria-label={ __( 'Suffix' ) }
 						placeholder={ ' ' + __( 'Suffix' ) }
 						value={ suffix }

package/src/preformatted/transforms.js

@@ -34,10 +34,7 @@ const transforms = {
 			type: 'block',
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
-				createBlock( 'core/paragraph', {
-					...attributes,
-					content: attributes.content.replace( /\n/g, '<br>' ),
-				} ),
+				createBlock( 'core/paragraph', attributes ),
 		},
 		{
 			type: 'block',

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

@@ -131,6 +131,7 @@ export default function QueryContent( {
 			<InspectorControls group="advanced">
 				<SelectControl
 					__nextHasNoMarginBottom
+					__next40pxDefaultSize
 					label={ __( 'HTML element' ) }
 					options={ [
 						{ label: __( 'Default (<div>)' ), value: 'div' },

package/src/query/index.php

@@ -44,7 +44,11 @@ function render_block_core_query( $attributes, $content, $block ) {
 			$block->block_type->supports['interactivity'] = true;
 
 			// Add a div to announce messages using `aria-live`.
-			$last_div_position = strripos( $content, '</div>' );
+			$html_tag = 'div';
+			if ( ! empty( $attributes['tagName'] ) ) {
+				$html_tag = esc_attr( $attributes['tagName'] );
+			}
+			$last_tag_position = strripos( $content, '</' . $html_tag . '>' );
 			$content           = substr_replace(
 				$content,
 				'<div
@@ -57,7 +61,7 @@ function render_block_core_query( $attributes, $content, $block ) {
 					data-wp-class--start-animation="selectors.core.query.startAnimation"
 					data-wp-class--finish-animation="selectors.core.query.finishAnimation"
 				></div>',
-				$last_div_position,
+				$last_tag_position,
 				0
 			);
 		}

package/src/quote/block.json

@@ -54,6 +54,12 @@
 				"background": true,
 				"text": true
 			}
+		},
+		"layout": {
+			"allowEditing": false
+		},
+		"spacing": {
+			"blockGap": true
 		}
 	},
 	"styles": [

package/src/quote/style.scss

@@ -18,5 +18,9 @@
 			font-size: 1.125em;
 			text-align: right;
 		}
+
+	}
+	> cite {
+		display: block;
 	}
 }

package/src/read-more/style.scss

@@ -1,7 +1,7 @@
 .wp-block-read-more {
 	display: block;
 	width: fit-content;
-	&:not([style*="text-decoration"]) {
+	&:where(:not([style*="text-decoration"])) {
 		text-decoration: none;
 
 		&:focus,

package/src/template-part/edit/advanced-controls.js

@@ -95,6 +95,7 @@ export function TemplatePartAdvancedControls( {
 			) }
 			<SelectControl
 				__nextHasNoMarginBottom
+				__next40pxDefaultSize
 				label={ __( 'HTML element' ) }
 				options={ [
 					{

package/src/template-part/edit/index.js

@@ -4,7 +4,6 @@
 import { useSelect } from '@wordpress/data';
 import {
 	BlockSettingsMenuControls,
-	BlockTitle,
 	useBlockProps,
 	Warning,
 	store as blockEditorStore,
@@ -14,7 +13,7 @@ import {
 import { Spinner, Modal, MenuItem } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { store as coreStore } from '@wordpress/core-data';
-import { useState, createInterpolateElement } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -35,7 +34,11 @@ export default function TemplatePartEdit( {
 	setAttributes,
 	clientId,
 } ) {
-	const { slug, theme, tagName, layout = {} } = attributes;
+	const currentTheme = useSelect(
+		( select ) => select( coreStore ).getCurrentTheme()?.stylesheet,
+		[]
+	);
+	const { slug, theme = currentTheme, tagName, layout = {} } = attributes;
 	const templatePartId = createTemplatePartId( theme, slug );
 	const hasAlreadyRendered = useHasRecursion( templatePartId );
 	const [ isTemplatePartSelectionOpen, setIsTemplatePartSelectionOpen ] =
@@ -174,17 +177,7 @@ export default function TemplatePartEdit( {
 									}
 									aria-haspopup="dialog"
 								>
-									{ createInterpolateElement(
-										__( 'Replace <BlockTitle />' ),
-										{
-											BlockTitle: (
-												<BlockTitle
-													clientId={ clientId }
-													maximumLength={ 25 }
-												/>
-											),
-										}
-									) }
+									{ __( 'Replace' ) }
 								</MenuItem>
 							);
 						} }

package/src/template-part/index.js

@@ -32,10 +32,11 @@ export const settings = {
 			return;
 		}
 
-		const entity = select( coreDataStore ).getEntityRecord(
+		const { getCurrentTheme, getEntityRecord } = select( coreDataStore );
+		const entity = getEntityRecord(
 			'postType',
 			'wp_template_part',
-			theme + '//' + slug
+			( theme || getCurrentTheme()?.stylesheet ) + '//' + slug
 		);
 		if ( ! entity ) {
 			return;
@@ -60,7 +61,7 @@ export const init = () => {
 	const DISALLOWED_PARENTS = [ 'core/post-template', 'core/post-content' ];
 	addFilter(
 		'blockEditor.__unstableCanInsertBlockType',
-		'removeTemplatePartsFromPostTemplates',
+		'core/block-library/removeTemplatePartsFromPostTemplates',
 		(
 			canInsert,
 			blockType,

package/src/template-part/index.php

@@ -43,10 +43,10 @@ function render_block_core_template_part( $attributes ) {
 		if ( $template_part_post ) {
 			// A published post might already exist if this template part was customized elsewhere
 			// or if it's part of a customized template.
-			$content    = $template_part_post->post_content;
-			$area_terms = get_the_terms( $template_part_post, 'wp_template_part_area' );
-			if ( ! is_wp_error( $area_terms ) && false !== $area_terms ) {
-				$area = $area_terms[0]->name;
+			$block_template = _build_block_template_result_from_post( $template_part_post );
+			$content        = $block_template->content;
+			if ( isset( $block_template->area ) ) {
+				$area = $block_template->area;
 			}
 			/**
 			 * Fires when a block template part is loaded from a template post stored in the database.

package/src/template-part/variations.js

@@ -35,10 +35,12 @@ export function enhanceTemplatePartVariations( settings, name ) {
 			// Find a matching variation from the created template part
 			// by checking the entity's `area` property.
 			if ( ! slug ) return false;
-			const entity = select( coreDataStore ).getEntityRecord(
+			const { getCurrentTheme, getEntityRecord } =
+				select( coreDataStore );
+			const entity = getEntityRecord(
 				'postType',
 				'wp_template_part',
-				`${ theme }//${ slug }`
+				`${ theme || getCurrentTheme()?.stylesheet }//${ slug }`
 			);
 
 			if ( entity?.slug ) {