@wordpress/block-library 6.0.6 → 6.0.10

package/src/page-list/index.php

@@ -34,7 +34,7 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	if ( $has_named_text_color ) {
 		// Add the color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['textColor'] ) );
+		$colors['css_classes'][] = sprintf( 'has-%s-color', _wp_to_kebab_case( $context['textColor'] ) );
 	} elseif ( $has_picked_text_color ) {
 		$colors['inline_styles'] .= sprintf( 'color: %s;', $context['customTextColor'] );
 	} elseif ( $has_custom_text_color ) {
@@ -55,7 +55,7 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	if ( $has_named_background_color ) {
 		// Add the background-color class.
-		$colors['css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['backgroundColor'] ) );
+		$colors['css_classes'][] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $context['backgroundColor'] ) );
 	} elseif ( $has_picked_background_color ) {
 		$colors['inline_styles'] .= sprintf( 'background-color: %s;', $context['customBackgroundColor'] );
 	} elseif ( $has_custom_background_color ) {
@@ -74,7 +74,7 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 
 	// Give overlay colors priority, fall back to Navigation block colors, then global styles.
 	if ( $has_named_overlay_text_color ) {
-		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', gutenberg_experimental_to_kebab_case( $context['overlayTextColor'] ) );
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-color', _wp_to_kebab_case( $context['overlayTextColor'] ) );
 	} elseif ( $has_picked_overlay_text_color ) {
 		$colors['overlay_inline_styles'] .= sprintf( 'color: %s;', $context['customOverlayTextColor'] );
 	}
@@ -89,7 +89,7 @@ function block_core_page_list_build_css_colors( $attributes, $context ) {
 	}
 
 	if ( $has_named_overlay_background_color ) {
-		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', gutenberg_experimental_to_kebab_case( $context['overlayBackgroundColor'] ) );
+		$colors['overlay_css_classes'][] = sprintf( 'has-%s-background-color', _wp_to_kebab_case( $context['overlayBackgroundColor'] ) );
 	} elseif ( $has_picked_overlay_background_color ) {
 		$colors['overlay_inline_styles'] .= sprintf( 'background-color: %s;', $context['customOverlayBackgroundColor'] );
 	}
@@ -182,7 +182,7 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
 			) . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
 			'</button>';
 		} else {
-			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . ' "href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses(
+			$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses(
 				$page['title'],
 				wp_kses_allowed_html( 'post' )
 			) . '</a>';
@@ -293,6 +293,11 @@ function render_block_core_page_list( $attributes, $content, $block ) {
 
 	$nested_pages = block_core_page_list_nest_pages( $top_level_pages, $pages_with_children );
 
+	// Limit the number of items to be visually displayed.
+	if ( ! empty( $attributes['__unstableMaxPages'] ) ) {
+		$nested_pages = array_slice( $nested_pages, 0, $attributes['__unstableMaxPages'] );
+	}
+
 	$is_navigation_child = array_key_exists( 'showSubmenuIcon', $block->context );
 
 	$open_submenus_on_click = array_key_exists( 'openSubmenusOnClick', $block->context ) ? $block->context['openSubmenusOnClick'] : false;

package/src/pattern/block.json

@@ -2,7 +2,7 @@
 	"apiVersion": 2,
 	"name": "core/pattern",
 	"title": "Pattern",
-	"category": "design",
+	"category": "theme",
 	"description": "Show a block pattern.",
 	"supports": {
 		"html": false,

package/src/post-comments-form/style.scss

@@ -1,6 +1,25 @@
-// Styles copied from button block styles.
 .wp-block-post-comments-form {
+	&[style*="font-weight"] :where(.comment-reply-title) {
+		font-weight: inherit;
+	}
+	&[style*="font-family"] :where(.comment-reply-title) {
+		font-family: inherit;
+	}
+	&[class*="-font-size"] :where(.comment-reply-title),
+	&[style*="font-size"] :where(.comment-reply-title) {
+		font-size: inherit;
+	}
+	&[style*="line-height"] :where(.comment-reply-title) {
+		line-height: inherit;
+	}
+	&[style*="font-style"] :where(.comment-reply-title) {
+		font-style: inherit;
+	}
+	&[style*="letter-spacing"] :where(.comment-reply-title) {
+		letter-spacing: inherit;
+	}
 
+	// Styles copied from button block styles.
 	input[type="submit"] {
 		border: none;
 		box-shadow: none;

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

@@ -2,34 +2,46 @@
  * WordPress dependencies
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
 import {
-	Icon,
 	ToggleControl,
 	PanelBody,
-	withNotices,
+	Placeholder,
+	Button,
 } from '@wordpress/components';
 import {
 	InspectorControls,
 	BlockControls,
 	MediaPlaceholder,
 	MediaReplaceFlow,
-	BlockIcon,
 	useBlockProps,
 } from '@wordpress/block-editor';
 import { __, sprintf } from '@wordpress/i18n';
-import { postFeaturedImage } from '@wordpress/icons';
+import { upload } from '@wordpress/icons';
+import { SVG, Path } from '@wordpress/primitives';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
  */
 import DimensionControls from './dimension-controls';
 
+const placeholderIllustration = (
+	<SVG
+		className="components-placeholder__illustration"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 60 60"
+		preserveAspectRatio="none"
+	>
+		<Path vectorEffect="non-scaling-stroke" d="M60 60 0 0" />
+	</SVG>
+);
+
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 const placeholderChip = (
-	<div className="post-featured-image_placeholder">
-		<Icon icon={ postFeaturedImage } />
-		<p> { __( 'Featured Image' ) }</p>
+	<div className="wp-block-post-featured-image__placeholder">
+		{ placeholderIllustration }
 	</div>
 );
 
@@ -37,8 +49,6 @@ function PostFeaturedImageDisplay( {
 	attributes,
 	setAttributes,
 	context: { postId, postType, queryId },
-	noticeUI,
-	noticeOperations,
 } ) {
 	const isDescendentOfQueryLoop = !! queryId;
 	const { isLink, height, width, scale } = attributes;
@@ -48,42 +58,66 @@ function PostFeaturedImageDisplay( {
 		'featured_media',
 		postId
 	);
+
 	const media = useSelect(
 		( select ) =>
 			featuredImage &&
 			select( coreStore ).getMedia( featuredImage, { context: 'view' } ),
 		[ featuredImage ]
 	);
+
 	const blockProps = useBlockProps( {
-		style: { width },
+		style: { width, height },
 	} );
+
+	const placeholder = ( content ) => {
+		return (
+			<Placeholder className="block-editor-media-placeholder">
+				{ placeholderIllustration }
+				{ content }
+			</Placeholder>
+		);
+	};
+
 	const onSelectImage = ( value ) => {
 		if ( value?.id ) {
 			setFeaturedImage( value.id );
 		}
 	};
-	function onUploadError( message ) {
-		noticeOperations.removeAllNotices();
-		noticeOperations.createErrorNotice( message );
-	}
+
+	const { createErrorNotice } = useDispatch( noticesStore );
+	const onUploadError = ( message ) => {
+		createErrorNotice( message[ 2 ], { type: 'snackbar' } );
+	};
+
 	let image;
 	if ( ! featuredImage && isDescendentOfQueryLoop ) {
 		return <div { ...blockProps }>{ placeholderChip }</div>;
 	}
+
+	const label = __( 'Add a featured image' );
+
 	if ( ! featuredImage ) {
 		image = (
 			<MediaPlaceholder
-				icon={ <BlockIcon icon={ postFeaturedImage } /> }
 				onSelect={ onSelectImage }
-				notices={ noticeUI }
-				onError={ onUploadError }
 				accept="image/*"
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
-				labels={ {
-					title: __( 'Featured image' ),
-					instructions: __(
-						'Upload a media file or pick one from your media library.'
-					),
+				onError={ onUploadError }
+				placeholder={ placeholder }
+				mediaLibraryButton={ ( { open } ) => {
+					return (
+						<Button
+							icon={ upload }
+							variant="primary"
+							label={ label }
+							showTooltip
+							tooltipPosition="top center"
+							onClick={ () => {
+								open();
+							} }
+						/>
+					);
 				} }
 			/>
 		);
@@ -136,12 +170,10 @@ function PostFeaturedImageDisplay( {
 	);
 }
 
-const PostFeaturedImageWithNotices = withNotices( PostFeaturedImageDisplay );
-
 export default function PostFeaturedImageEdit( props ) {
 	const blockProps = useBlockProps();
 	if ( ! props.context?.postId ) {
 		return <div { ...blockProps }>{ placeholderChip }</div>;
 	}
-	return <PostFeaturedImageWithNotices { ...props } />;
+	return <PostFeaturedImageDisplay { ...props } />;
 }

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

@@ -1,33 +1,137 @@
-div[data-type="core/post-featured-image"] {
-	img {
-		max-width: 100%;
-		height: auto;
-		display: block;
+// Give the featured image placeholder the appearance of a literal image placeholder.
+// @todo: this CSS is similar to that of the Site Logo. That makes it an opportunity
+// to create a new component for placeholders meant to inherit some theme styles.
+.wp-block-post-featured-image.wp-block-post-featured-image {
+	// Inherit border radius from style variations.
+	.components-placeholder,
+	.components-resizable-box__container {
+		border-radius: inherit;
 	}
-}
 
-.editor-styles-wrapper {
-	.post-featured-image_placeholder {
-		display: flex;
-		flex-direction: row;
+	// Style the placeholder.
+	.wp-block-post-featured-image__placeholder,
+	.components-placeholder {
+		justify-content: center;
 		align-items: center;
-		border-radius: $radius-block-ui;
-		background-color: $white;
-		box-shadow: inset 0 0 0 $border-width $gray-900;
-		padding: $grid-unit-15;
-		svg {
-			margin-right: $grid-unit-15;
+		box-shadow: none;
+		padding: 0;
+
+		// Hide the upload button, as it's also available in the media library.
+		.components-form-file-upload {
+			display: none;
+		}
+
+		// Position the spinner.
+		.components-placeholder__preview {
+			position: absolute;
+			top: $grid-unit-05;
+			right: $grid-unit-05;
+			bottom: $grid-unit-05;
+			left: $grid-unit-05;
+			background: rgba($white, 0.8);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		// Draw the dashed outline.
+		// By setting the dashed border to currentColor, we ensure it's visible
+		// against any background color.
+		color: currentColor;
+		background: transparent;
+		&::before {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			border: $border-width dashed currentColor;
+			opacity: 0.4;
+			pointer-events: none;
+
+			// Inherit border radius from style variations.
+			border-radius: inherit;
+		}
+
+		// Style the upload button.
+		.components-placeholder__fieldset {
+			width: auto;
+		}
+
+		.components-button.components-button {
+			color: inherit;
+			padding: 0;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			width: $grid-unit-60;
+			height: $grid-unit-60;
+			border-radius: 50%;
+			position: relative;
+			visibility: hidden;
+
+			// Animation.
+			background: transparent;
+			transition: all 0.1s linear;
+			@include reduce-motion("transition");
 		}
-		p {
-			font-family: $default-font;
-			font-size: $default-font-size;
-			margin: 0;
+
+		.components-button.components-button > svg {
+			color: $white;
+		}
+
+		// Style the placeholder illustration.
+		.components-placeholder__illustration {
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			stroke: currentColor;
+			stroke-dasharray: 3;
+			opacity: 0.4;
 		}
+
+		// Show default placeholder height when not resized.
+		min-height: 200px;
+	}
+
+	// Provide a minimum size for the placeholder when resized.
+	// Note, this should be as small as we can afford it, and exists only
+	// to ensure there's room for the upload button.
+	&[style*="height"] .components-placeholder {
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
+	}
+
+	// Show upload button on block selection.
+	&.is-selected .components-button.components-button {
+		background: var(--wp-admin-theme-color);
+		border-color: var(--wp-admin-theme-color);
+		border-style: solid;
+		color: $white;
+		opacity: 1;
+		visibility: visible;
+	}
+}
+
+div[data-type="core/post-featured-image"] {
+	img {
+		max-width: 100%;
+		height: auto;
+		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-terms/block.json

@@ -2,7 +2,7 @@
 	"apiVersion": 2,
 	"name": "core/post-terms",
 	"title": "Post Terms",
-	"category": "design",
+	"category": "theme",
 	"description": "Post terms.",
 	"textdomain": "default",
 	"attributes": {

package/src/post-title/edit.js

@@ -62,7 +62,7 @@ export default function PostTitleEdit( {
 				/>
 			) : (
 				<TagName { ...blockProps }>
-					<RawHTML key="html">{ fullTitle.rendered }</RawHTML>
+					<RawHTML key="html">{ fullTitle?.rendered }</RawHTML>
 				</TagName>
 			);
 	}
@@ -92,7 +92,7 @@ export default function PostTitleEdit( {
 						rel={ rel }
 						onClick={ ( event ) => event.preventDefault() }
 					>
-						<RawHTML key="html">{ fullTitle.rendered }</RawHTML>
+						<RawHTML key="html">{ fullTitle?.rendered }</RawHTML>
 					</a>
 				</TagName>
 			);

package/src/query-title/block.json

@@ -2,7 +2,7 @@
 	"apiVersion": 2,
 	"name": "core/query-title",
 	"title": "Query Title",
-	"category": "design",
+	"category": "theme",
 	"description": "Display the query title.",
 	"textdomain": "default",
 	"attributes": {

package/src/site-logo/block.json

@@ -2,7 +2,7 @@
 	"apiVersion": 2,
 	"name": "core/site-logo",
 	"title": "Site Logo",
-	"category": "layout",
+	"category": "theme",
 	"description": "Display a graphic to represent this site. Update the block, and the changes apply everywhere it’s used. This is different than the site icon, which is the smaller image visible in your dashboard, browser tabs, etc used to help others recognize this site.",
 	"textdomain": "default",
 	"attributes": {

package/src/site-logo/editor.scss

@@ -57,6 +57,7 @@
 		width: 120px;
 	}
 
+	// Style the placeholder.
 	.components-placeholder {
 		justify-content: center;
 		align-items: center;
@@ -109,7 +110,7 @@
 			bottom: 0;
 			left: 0;
 			border: $border-width dashed currentColor;
-			opacity: 0.3;
+			opacity: 0.4;
 			pointer-events: none;
 
 			// Inherit border radius from style variations.
@@ -154,7 +155,7 @@
 			height: 100%;
 			stroke: currentColor;
 			stroke-dasharray: 3;
-			opacity: 0.3;
+			opacity: 0.4;
 		}
 	}
 

package/src/site-tagline/block.json

@@ -2,7 +2,7 @@
 	"apiVersion": 2,
 	"name": "core/site-tagline",
 	"title": "Site Tagline",
-	"category": "design",
+	"category": "theme",
 	"description": "Describe in a few words what the website is about. The tagline can be used in search results or when sharing on social networks even if it's not displayed in the theme design.",
 	"keywords": [ "description" ],
 	"textdomain": "default",

package/src/site-title/block.json

@@ -2,7 +2,7 @@
 	"apiVersion": 2,
 	"name": "core/site-title",
 	"title": "Site Title",
-	"category": "design",
+	"category": "theme",
 	"description": "Displays the name of this site. Update the block, and the changes apply everywhere it’s used. This will also appear in the browser title bar and in search results.",
 	"textdomain": "default",
 	"attributes": {

package/src/social-links/editor.scss

@@ -37,7 +37,6 @@
 		display: flex;
 	}
 
-	& + .block-list-appender,
 	.wp-social-link {
 		padding: 0.25em;
 
@@ -66,6 +65,7 @@
 
 // Selected placeholder state.
 .wp-block-social-links .wp-block-social-links__social-prompt {
+	min-height: $button-size-small;
 	list-style: none;
 	order: 2; // Move after the appender button. Because this element is non-interactive, it does not affect tab order.
 
@@ -77,52 +77,6 @@
 	margin-bottom: auto;
 	cursor: default;
 	padding-right: $grid-unit-10;
-
-	& + .block-list-appender {
-		margin-right: $grid-unit-10;
-		padding: 0.25em;
-	}
-}
-
-// Polish the Appender.
-.wp-block-social-links .block-list-appender {
-	// Match the overall silhouette of social links.
-	margin: 4px auto 4px 0;
-	border-radius: 9999px; // This works as both circular and pill shapes.
-
-	// Treat just like a social icon.
-	.block-editor-inserter {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: inherit;
-		width: 1em;
-		height: 1em;
-	}
-
-	// Duplicate the font sizes from style.scss to size the appender.
-	.has-small-icon-size & {
-		font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered.
-	}
-
-	// Normal/default.
-	.has-normal-icon-size & {
-		font-size: 24px;
-	}
-
-	// Large.
-	.has-large-icon-size & {
-		font-size: 36px;
-	}
-
-	// Huge.
-	.has-huge-icon-size & {
-		font-size: 48px;
-	}
-
-	&::before {
-		content: none;
-	}
 }
 
 // Center flex items. This has an equivalent in style.scss.

package/src/style.scss

@@ -19,7 +19,6 @@
 @import "./media-text/style.scss";
 @import "./navigation/style.scss";
 @import "./navigation-link/style.scss";
-@import "./navigation-submenu/style.scss";
 @import "./home-link/style.scss";
 @import "./page-list/style.scss";
 @import "./paragraph/style.scss";

package/src/table-of-contents/index.php

@@ -2,7 +2,7 @@
 /**
  * Server-side rendering of the `core/table-of-contents` block.
  *
- * @package gutenberg
+ * @package WordPress
  */
 
 /**

package/src/template-part/block.json

@@ -29,7 +29,8 @@
 		"spacing": {
 			"padding": true
 		},
-		"__experimentalLayout": true
+		"__experimentalLayout": true,
+		"reusable": false
 	},
 	"editorStyle": "wp-block-template-part-editor"
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
+import { find, kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -65,7 +65,7 @@ export default function TemplatePartPlaceholder( {
 			// block attributes.
 			const record = {
 				title,
-				slug: 'template-part',
+				slug: kebabCase( title ),
 				content: serialize( startingBlocks ),
 				// `area` is filterable on the server and defaults to `UNCATEGORIZED`
 				// if provided value is not allowed.

package/src/template-part/index.php

@@ -53,7 +53,8 @@ function render_block_core_template_part( $attributes ) {
 		} else {
 			// Else, if the template part was provided by the active theme,
 			// render the corresponding file content.
-			$template_part_file_path = get_theme_file_path( '/block-template-parts/' . $attributes['slug'] . '.html' );
+			$theme_folders           = get_block_theme_folders();
+			$template_part_file_path = get_theme_file_path( '/' . $theme_folders['wp_template_part'] . '/' . $attributes['slug'] . '.html' );
 			if ( 0 === validate_file( $attributes['slug'] ) && file_exists( $template_part_file_path ) ) {
 				$content = file_get_contents( $template_part_file_path );
 				$content = is_string( $content ) && '' !== $content