@wordpress/block-library 6.0.1 → 6.0.5

package/src/site-logo/editor.scss

@@ -19,11 +19,11 @@
 		width: 120px;
 
 		img {
+			height: auto;
 			width: 100%;
 		}
 	}
 
-
 	.custom-logo-link {
 		cursor: inherit;
 
@@ -38,26 +38,39 @@
 
 	img {
 		display: block;
+		height: auto;
 		max-width: 100%;
 	}
+}
 
-	// Placeholder improvements.
-	.components-placeholder {
-		justify-content: flex-start;
-		min-height: auto;
+// Provide special styling for the placeholder.
+.wp-block-site-logo.wp-block-site-logo {
+	// Inherit border radius from style variations.
+	.components-placeholder,
+	.components-resizable-box__container {
+		border-radius: inherit;
+	}
+
+	// Match the default logo size.
+	&.is-default-size .components-placeholder {
 		height: 120px;
-		padding: $grid-unit-15;
+		width: 120px;
+	}
 
-		// Massage the label.
-		.components-placeholder__label {
-			margin-top: $grid-unit-15;
-			white-space: nowrap;
-		}
+	.components-placeholder {
+		justify-content: center;
+		align-items: center;
+		box-shadow: none;
+		padding: 0;
 
-		.components-placeholder__label .block-editor-block-icon,
-		.components-placeholder__label > svg {
-			margin-right: $grid-unit-05;
-		}
+		// Provide a minimum size for the placeholder, for when the logo is resized.
+		// @todo: resizing is currently only possible by adding an image, resizing,
+		// and then removing the image again. We might want to enable resizing on the
+		// placeholder itself.
+		min-height: $grid-unit-60;
+		min-width: $grid-unit-60;
+		height: 100%;
+		width: 100%;
 
 		// Hide the upload button, as it's also available in the media library.
 		.components-form-file-upload {
@@ -77,9 +90,81 @@
 			justify-content: center;
 		}
 
-		// Hide drag and drop text.
+		// Hide items.
 		.components-drop-zone__content-text {
 			display: none;
 		}
+
+		// 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.3;
+			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");
+		}
+
+		.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.3;
+		}
+	}
+
+	// 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;
 	}
 }

package/src/site-logo/index.php

@@ -132,7 +132,13 @@ add_filter( 'pre_set_theme_mod_custom_logo', '_sync_custom_logo_to_site_logo' );
  * @param array $old_value Previous theme mod settings.
  * @param array $value     Updated theme mod settings.
  */
-function _gutenberg_delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
+function _delete_site_logo_on_remove_custom_logo( $old_value, $value ) {
+	global $_ignore_site_logo_changes;
+
+	if ( $_ignore_site_logo_changes ) {
+		return;
+	}
+
 	// If the custom_logo is being unset, it's being removed from theme mods.
 	if ( isset( $old_value['custom_logo'] ) && ! isset( $value['custom_logo'] ) ) {
 		delete_option( 'site_logo' );
@@ -142,7 +148,13 @@ function _gutenberg_delete_site_logo_on_remove_custom_logo( $old_value, $value )
 /**
  * Deletes the site logo when all theme mods are being removed.
  */
-function _gutenberg_delete_site_logo_on_remove_theme_mods() {
+function _delete_site_logo_on_remove_theme_mods() {
+	global $_ignore_site_logo_changes;
+
+	if ( $_ignore_site_logo_changes ) {
+		return;
+	}
+
 	if ( false !== get_theme_support( 'custom-logo' ) ) {
 		delete_option( 'site_logo' );
 	}
@@ -165,27 +177,16 @@ add_action( 'setup_theme', '_delete_site_logo_on_remove_custom_logo_on_setup_the
  * Removes the custom_logo theme-mod when the site_logo option gets deleted.
  */
 function _delete_custom_logo_on_remove_site_logo() {
-	$theme = get_option( 'stylesheet' );
-
-	// Unhook update and delete actions for custom_logo to prevent a loop of hooks.
-	// Remove Gutenberg hooks.
-	remove_action( "update_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_custom_logo', 10 );
-	remove_action( "delete_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_theme_mods' );
+	global $_ignore_site_logo_changes;
 
-	// Remove Core hooks.
-	remove_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10 );
-	remove_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
+	// Prevent _delete_site_logo_on_remove_custom_logo and
+	// _delete_site_logo_on_remove_theme_mods from firing and causing an
+	// infinite loop.
+	$_ignore_site_logo_changes = true;
 
 	// Remove the custom logo.
 	remove_theme_mod( 'custom_logo' );
 
-	// Restore update and delete actions.
-	// Restore Gutenberg hooks.
-	add_action( "update_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_custom_logo', 10, 2 );
-	add_action( "delete_option_theme_mods_$theme", '_gutenberg_delete_site_logo_on_remove_theme_mods' );
-
-	// Restore Core hooks.
-	add_action( "update_option_theme_mods_$theme", '_delete_site_logo_on_remove_custom_logo', 10, 2 );
-	add_action( "delete_option_theme_mods_$theme", '_delete_site_logo_on_remove_theme_mods' );
+	$_ignore_site_logo_changes = false;
 }
 add_action( 'delete_option_site_logo', '_delete_custom_logo_on_remove_site_logo' );

package/src/site-logo/style.scss

@@ -11,12 +11,18 @@
 		height: auto;
 	}
 
-	.aligncenter {
+	// Inherit border radius from style variations.
+	a,
+	img {
+		border-radius: inherit;
+	}
+
+	&.aligncenter {
 		display: table;
 	}
 
 	// Style variations
-	&.is-style-rounded img {
+	&.is-style-rounded {
 		// We use an absolute pixel to prevent the oval shape that a value of 50% would give
 		// to rectangular images. A pill-shape is better than otherwise.
 		border-radius: 9999px;

package/src/site-tagline/block.json

@@ -12,6 +12,7 @@
 		}
 	},
 	"supports": {
+		"align": [ "wide", "full" ],
 		"html": false,
 		"color": {
 			"gradients": true
@@ -24,9 +25,13 @@
 			"fontSize": true,
 			"lineHeight": true,
 			"__experimentalFontFamily": true,
-			"__experimentalFontWeight": true,
 			"__experimentalTextTransform": true,
-			"__experimentalLetterSpacing": true
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-site-tagline-editor"

package/src/site-tagline/deprecated.js

@@ -0,0 +1,49 @@
+/**
+ * Internal dependencies
+ */
+import migrateFontFamily from '../utils/migrate-font-family';
+
+const v1 = {
+	attributes: {
+		textAlign: {
+			type: 'string',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+		},
+		spacing: {
+			margin: true,
+			padding: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalTextTransform: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateFontFamily,
+	isEligible( { style } ) {
+		return style?.typography?.fontFamily;
+	},
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v1 ];

package/src/site-tagline/index.js

@@ -4,6 +4,7 @@
 import metadata from './block.json';
 import edit from './edit';
 import icon from './icon';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -11,4 +12,5 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	deprecated,
 };

package/src/site-title/block.json

@@ -22,6 +22,9 @@
 			"default": "_self"
 		}
 	},
+	"example": {
+		"viewportWidth": 500
+	},
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
@@ -40,7 +43,14 @@
 			"__experimentalTextTransform": true,
 			"__experimentalFontStyle": true,
 			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"lineHeight": true,
+				"fontAppearance": true,
+				"letterSpacing": true,
+				"textTransform": true
+			}
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor"

package/src/site-title/deprecated.js

@@ -0,0 +1,62 @@
+/**
+ * Internal dependencies
+ */
+import migrateFontFamily from '../utils/migrate-font-family';
+
+const v1 = {
+	attributes: {
+		level: {
+			type: 'number',
+			default: 1,
+		},
+		textAlign: {
+			type: 'string',
+		},
+		isLink: {
+			type: 'boolean',
+			default: true,
+		},
+		linkTarget: {
+			type: 'string',
+			default: '_self',
+		},
+	},
+	supports: {
+		align: [ 'wide', 'full' ],
+		html: false,
+		color: {
+			gradients: true,
+			link: true,
+		},
+		spacing: {
+			padding: true,
+			margin: true,
+		},
+		typography: {
+			fontSize: true,
+			lineHeight: true,
+			__experimentalFontFamily: true,
+			__experimentalTextTransform: true,
+			__experimentalFontStyle: true,
+			__experimentalFontWeight: true,
+			__experimentalLetterSpacing: true,
+		},
+	},
+	save() {
+		return null;
+	},
+	migrate: migrateFontFamily,
+	isEligible( { style } ) {
+		return style?.typography?.fontFamily;
+	},
+};
+
+/**
+ * New deprecations need to be placed first
+ * for them to have higher priority.
+ *
+ * Old deprecations may need to be updated as well.
+ *
+ * See block-deprecation.md
+ */
+export default [ v1 ];

package/src/site-title/index.js

@@ -8,6 +8,7 @@ import { mapMarker as icon } from '@wordpress/icons';
  */
 import metadata from './block.json';
 import edit from './edit';
+import deprecated from './deprecated';
 
 const { name } = metadata;
 export { metadata, name };
@@ -15,4 +16,5 @@ export { metadata, name };
 export const settings = {
 	icon,
 	edit,
+	deprecated,
 };

package/src/site-title/index.php

@@ -21,6 +21,8 @@ function render_block_core_site_title( $attributes ) {
 	$tag_name         = 'h1';
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
+	$aria_current = is_home() || ( is_front_page() && 'page' === get_option( 'show_on_front' ) ) ? ' aria-current="page"' : '';
+
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
 	}
@@ -29,6 +31,7 @@ function render_block_core_site_title( $attributes ) {
 		$link_attrs = array(
 			'href="' . get_bloginfo( 'url' ) . '"',
 			'rel="home"',
+			$aria_current,
 		);
 		if ( '_blank' === $attributes['linkTarget'] ) {
 			$link_attrs[] = 'target="_blank"';

package/src/social-link/editor.scss

@@ -18,3 +18,7 @@
 	padding-left: calc((2/3) * 1em);
 	padding-right: calc((2/3) * 1em);
 }
+
+.wp-block-social-links.is-style-logos-only .wp-social-link button {
+	padding: 0;
+}

package/src/social-links/block.json

@@ -51,6 +51,7 @@
 		},
 		"spacing": {
 			"blockGap": true,
+			"margin": [ "top", "bottom" ],
 			"units": [
 				"px",
 				"em",

package/src/social-links/edit.js

@@ -10,7 +10,7 @@ import { getBlockSupport } from '@wordpress/blocks';
 import { Fragment, useEffect } from '@wordpress/element';
 import {
 	BlockControls,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
 	ContrastChecker,
@@ -166,6 +166,7 @@ export function SocialLinksEdit( props ) {
 					/>
 				</PanelBody>
 				<PanelColorSettings
+					__experimentalHasMultipleOrigins
 					title={ __( 'Color' ) }
 					colorSettings={ [
 						{

package/src/social-links/editor.scss

@@ -45,6 +45,10 @@
 			padding-left: calc((2/3) * 1em);
 			padding-right: calc((2/3) * 1em);
 		}
+
+		.is-style-logos-only & {
+			padding: 0;
+		}
 	}
 
 	.wp-social-link::before {

package/src/social-links/save.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
 
 export default function save( props ) {
 	const {
@@ -17,10 +17,8 @@ export default function save( props ) {
 		'has-icon-color': iconColorValue,
 		'has-icon-background-color': iconBackgroundColorValue,
 	} );
+	const blockProps = useBlockProps.save( { className } );
+	const innerBlocksProps = useInnerBlocksProps.save( blockProps );
 
-	return (
-		<ul { ...useBlockProps.save( { className } ) }>
-			<InnerBlocks.Content />
-		</ul>
-	);
+	return <ul { ...innerBlocksProps } />;
 }

package/src/social-links/style.scss

@@ -104,8 +104,15 @@
 	.wp-social-link {
 		background: none;
 
+		a {
+			padding: 0;
+		}
+
 		// Make these bigger.
-		padding: 4px;
+		svg {
+			width: 1.25em;
+			height: 1.25em;
+		}
 	}
 
 	@import "../social-link/socials-without-bg.scss";

package/src/table/block.json

@@ -129,6 +129,17 @@
 			"__experimentalSkipSerialization": true,
 			"gradients": true
 		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
 		"__experimentalBorder": {
 			"__experimentalSkipSerialization": true,
 			"color": true,

package/src/template-part/edit/inner-blocks.js

@@ -4,7 +4,7 @@
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	InnerBlocks,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	__experimentalBlockContentOverlay as BlockContentOverlay,
 	useSetting,
 	store as blockEditorStore,

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

@@ -95,12 +95,14 @@ export default function TemplatePartPlaceholder( {
 						enableSelection
 							? sprintf(
 									// Translators: %s as template part area title ("Header", "Footer", etc.).
-									'Choose an existing %s or create a new one.',
+									__(
+										'Choose an existing %s or create a new one.'
+									),
 									areaLabel.toLowerCase()
 							  )
 							: sprintf(
 									// Translators: %s as template part area title ("Header", "Footer", etc.).
-									'Create a new %s.',
+									__( 'Create a new %s.' ),
 									areaLabel.toLowerCase()
 							  )
 					}
@@ -136,7 +138,7 @@ export default function TemplatePartPlaceholder( {
 									>
 										{ sprintf(
 											// Translators: %s as template part area title ("Header", "Footer", etc.).
-											'New %s',
+											__( 'New %s' ),
 											areaLabel.toLowerCase()
 										) }
 									</Button>

package/src/template-part/edit/placeholder/patterns-setup.js

@@ -62,7 +62,8 @@ export default function PatternsSetup( {
 			{ isTitleStep && (
 				<Modal
 					title={ sprintf(
-						'Name and create your new %s',
+						// Translators: %s as template part area title ("Header", "Footer", etc.).
+						__( 'Name and create your new %s' ),
 						areaLabel.toLowerCase()
 					) }
 					closeLabel={ __( 'Cancel' ) }
@@ -115,7 +116,7 @@ function StartBlankComponent( { setTitleStep, areaLabel, areaIcon } ) {
 			icon={ areaIcon }
 			instructions={ sprintf(
 				// Translators: %s as template part area title ("Header", "Footer", "Template Part", etc.).
-				'Creating your new %s...',
+				__( 'Creating your new %s…' ),
 				areaLabel.toLowerCase()
 			) }
 		/>

package/src/template-part/edit/selection/template-part-previews.js

@@ -149,7 +149,9 @@ function TemplatePartsByArea( {
 			>
 				{ sprintf(
 					// Translators: %s for the template part variation ("Header", "Footer", "Template Part").
-					'There is no other %s available. If you are looking for another type of template part, try searching for it using the input above.',
+					__(
+						'There is no other %s available. If you are looking for another type of template part, try searching for it using the input above.'
+					),
 					area && area !== 'uncategorized'
 						? labelsByArea[ area ] || area
 						: __( 'Template Part' )

package/src/template-part/editor.scss

@@ -66,22 +66,6 @@
 	}
 }
 
-// Ensures a border is present when a child block is selected.
-.block-editor-block-list__block[data-type="core/template-part"] {
-	&.has-child-selected {
-		&::after {
-			border: $border-width dotted var(--wp-admin-theme-color);
-		}
-
-		&.is-hovered,
-		&.is-highlighted {
-			&::after {
-				border: none;
-			}
-		}
-	}
-}
-
 .wp-block-template-part__placeholder-create-new__title-form {
 	.wp-block-template-part__placeholder-create-new__title-form-actions {
 		padding-top: $grid-unit-15;

package/src/template-part/index.php

@@ -55,7 +55,10 @@ function render_block_core_template_part( $attributes ) {
 			// render the corresponding file content.
 			$template_part_file_path = get_theme_file_path( '/block-template-parts/' . $attributes['slug'] . '.html' );
 			if ( 0 === validate_file( $attributes['slug'] ) && file_exists( $template_part_file_path ) ) {
-				$content = _gutenberg_inject_theme_attribute_in_content( file_get_contents( $template_part_file_path ) );
+				$content = file_get_contents( $template_part_file_path );
+				$content = is_string( $content ) && '' !== $content
+						? _inject_theme_attribute_in_block_template_content( $content )
+						: '';
 			}
 		}
 	}
@@ -99,7 +102,7 @@ function render_block_core_template_part( $attributes ) {
 	$content = $wp_embed->autoembed( $content );
 
 	if ( empty( $attributes['tagName'] ) ) {
-		$defined_areas = gutenberg_get_allowed_template_part_areas();
+		$defined_areas = get_allowed_block_template_part_areas();
 		$area_tag      = 'div';
 		foreach ( $defined_areas as $defined_area ) {
 			if ( $defined_area['area'] === $area && isset( $defined_area['area_tag'] ) ) {
@@ -122,7 +125,7 @@ function render_block_core_template_part( $attributes ) {
  */
 function build_template_part_block_variations() {
 	$variations    = array();
-	$defined_areas = gutenberg_get_allowed_template_part_areas();
+	$defined_areas = get_allowed_block_template_part_areas();
 	foreach ( $defined_areas as $area ) {
 		if ( 'uncategorized' !== $area['area'] ) {
 			$variations[] = array(