@wordpress/block-library 6.0.1-next.253d9b6e21.0 → 6.0.3

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/edit/index.js

@@ -12,9 +12,11 @@ import { __ } from '@wordpress/i18n';
 import {
 	RichText,
 	AlignmentControl,
+	InspectorControls,
 	BlockControls,
 	useBlockProps,
 } from '@wordpress/block-editor';
+import { ToggleControl, PanelBody } from '@wordpress/components';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { decodeEntities } from '@wordpress/html-entities';
 
@@ -28,7 +30,7 @@ export default function SiteTitleEdit( {
 	setAttributes,
 	insertBlocksAfter,
 } ) {
-	const { level, textAlign } = attributes;
+	const { level, textAlign, isLink, linkTarget } = attributes;
 	const [ title, setTitle ] = useEntityProp( 'root', 'site', 'title' );
 	const { canUserEdit, readOnlyTitle } = useSelect( ( select ) => {
 		const { canUser, getEntityRecord } = select( coreStore );
@@ -49,10 +51,11 @@ export default function SiteTitleEdit( {
 	const siteTitleContent = canUserEdit ? (
 		<TagName { ...blockProps }>
 			<RichText
-				tagName="a"
+				tagName={ isLink ? 'a' : 'span' }
+				href={ isLink ? '#site-title-pseudo-link' : undefined }
 				aria-label={ __( 'Site title text' ) }
 				placeholder={ __( 'Write site title…' ) }
-				value={ title || readOnlyTitle }
+				value={ title }
 				onChange={ setTitle }
 				allowedFormats={ [] }
 				disableLineBreaks
@@ -63,12 +66,16 @@ export default function SiteTitleEdit( {
 		</TagName>
 	) : (
 		<TagName { ...blockProps }>
-			<a
-				href="#site-title-pseudo-link"
-				onClick={ ( event ) => event.preventDefault() }
-			>
-				{ readOnlyTitle || __( 'Site Title placeholder' ) }
-			</a>
+			{ isLink ? (
+				<a
+					href="#site-title-pseudo-link"
+					onClick={ ( event ) => event.preventDefault() }
+				>
+					{ readOnlyTitle || __( 'Site Title placeholder' ) }
+				</a>
+			) : (
+				<span>{ title || readOnlyTitle }</span>
+			) }
 		</TagName>
 	);
 	return (
@@ -87,6 +94,26 @@ export default function SiteTitleEdit( {
 					} }
 				/>
 			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Make title link to home' ) }
+						onChange={ () => setAttributes( { isLink: ! isLink } ) }
+						checked={ isLink }
+					/>
+					{ isLink && (
+						<ToggleControl
+							label={ __( 'Open in new tab' ) }
+							onChange={ ( value ) =>
+								setAttributes( {
+									linkTarget: value ? '_blank' : '_self',
+								} )
+							}
+							checked={ linkTarget === '_blank' }
+						/>
+					) }
+				</PanelBody>
+			</InspectorControls>
 			{ siteTitleContent }
 		</>
 	);

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,18 +21,31 @@ 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'];
 	}
 
-	$link               = sprintf( '<a href="%1$s" rel="home">%2$s</a>', get_bloginfo( 'url' ), $site_title );
+	if ( $attributes['isLink'] ) {
+		$link_attrs = array(
+			'href="' . get_bloginfo( 'url' ) . '"',
+			'rel="home"',
+			$aria_current,
+		);
+		if ( '_blank' === $attributes['linkTarget'] ) {
+			$link_attrs[] = 'target="_blank"';
+			$link_attrs[] = 'aria-label="' . esc_attr__( '(opens in a new tab)' ) . '"';
+		}
+		$site_title = sprintf( '<a %1$s>%2$s</a>', implode( ' ', $link_attrs ), $site_title );
+	}
 	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
 
 	return sprintf(
 		'<%1$s %2$s>%3$s</%1$s>',
 		$tag_name,
 		$wrapper_attributes,
-		$link
+		$site_title
 	);
 }
 

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

@@ -40,7 +40,29 @@
 	},
 	"supports": {
 		"align": [ "left", "center", "right" ],
-		"anchor": true
+		"anchor": true,
+		"__experimentalExposeControlsToChildren": true,
+		"__experimentalLayout": {
+			"allowSwitching": false,
+			"allowInheriting": false,
+			"default": {
+				"type": "flex"
+			}
+		},
+		"spacing": {
+			"blockGap": true,
+			"margin": [ "top", "bottom" ],
+			"units": [
+				"px",
+				"em",
+				"rem",
+				"vh",
+				"vw"
+			],
+			"__experimentalDefaultControls": {
+				"blockGap": true
+			}
+		}
 	},
 	"styles": [
 		{ "name": "default", "label": "Default", "isDefault": true },

package/src/social-links/deprecated.js

@@ -8,8 +8,106 @@ import classNames from 'classnames';
  */
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
+/**
+ * The specific handling by `className` below is needed because `itemsJustification`
+ * was introduced in https://github.com/WordPress/gutenberg/pull/28980/files and wasn't
+ * declared in block.json.
+ *
+ * @param {Object} attributes Block's attributes.
+ */
+const migrateWithLayout = ( attributes ) => {
+	if ( !! attributes.layout ) {
+		return attributes;
+	}
+	const { className } = attributes;
+	// Matches classes with `items-justified-` prefix.
+	const prefix = `items-justified-`;
+	const justifiedItemsRegex = new RegExp( `\\b${ prefix }[^ ]*[ ]?\\b`, 'g' );
+	const newAttributes = {
+		...attributes,
+		className: className?.replace( justifiedItemsRegex, '' ).trim(),
+	};
+	/**
+	 * Add `layout` prop only if `justifyContent` is defined, for backwards
+	 * compatibility. In other cases the block's default layout will be used.
+	 * Also noting that due to the missing attribute, it's possible for a block
+	 * to have more than one of `justified` classes.
+	 */
+	const justifyContent = className
+		?.match( justifiedItemsRegex )?.[ 0 ]
+		?.trim();
+	if ( justifyContent ) {
+		Object.assign( newAttributes, {
+			layout: {
+				type: 'flex',
+				justifyContent: justifyContent.slice( prefix.length ),
+			},
+		} );
+	}
+	return newAttributes;
+};
+
 // Social Links block deprecations.
 const deprecated = [
+	// Implement `flex` layout.
+	{
+		attributes: {
+			iconColor: {
+				type: 'string',
+			},
+			customIconColor: {
+				type: 'string',
+			},
+			iconColorValue: {
+				type: 'string',
+			},
+			iconBackgroundColor: {
+				type: 'string',
+			},
+			customIconBackgroundColor: {
+				type: 'string',
+			},
+			iconBackgroundColorValue: {
+				type: 'string',
+			},
+			openInNewTab: {
+				type: 'boolean',
+				default: false,
+			},
+			size: {
+				type: 'string',
+			},
+		},
+		supports: {
+			align: [ 'left', 'center', 'right' ],
+			anchor: true,
+			__experimentalExposeControlsToChildren: true,
+		},
+		isEligible: ( { layout } ) => ! layout,
+		migrate: migrateWithLayout,
+		save( props ) {
+			const {
+				attributes: {
+					iconBackgroundColorValue,
+					iconColorValue,
+					itemsJustification,
+					size,
+				},
+			} = props;
+
+			const className = classNames( size, {
+				'has-icon-color': iconColorValue,
+				'has-icon-background-color': iconBackgroundColorValue,
+				[ `items-justified-${ itemsJustification }` ]: itemsJustification,
+			} );
+
+			return (
+				<ul { ...useBlockProps.save( { className } ) }>
+					<InnerBlocks.Content />
+				</ul>
+			);
+		},
+	},
 	// V1. Remove CSS variable use for colors.
 	{
 		attributes: {
@@ -46,6 +144,7 @@ const deprecated = [
 			align: [ 'left', 'center', 'right' ],
 			anchor: true,
 		},
+		migrate: migrateWithLayout,
 		save: ( props ) => {
 			const {
 				attributes: {

package/src/social-links/edit.js

@@ -6,15 +6,13 @@ import classNames from 'classnames';
 /**
  * WordPress dependencies
  */
-
+import { getBlockSupport } from '@wordpress/blocks';
 import { Fragment, useEffect } from '@wordpress/element';
-
 import {
 	BlockControls,
-	__experimentalUseInnerBlocksProps as useInnerBlocksProps,
+	useInnerBlocksProps,
 	useBlockProps,
 	InspectorControls,
-	JustifyContentControl,
 	ContrastChecker,
 	PanelColorSettings,
 	withColors,
@@ -38,8 +36,17 @@ const sizeOptions = [
 	{ name: __( 'Huge' ), value: 'has-huge-icon-size' },
 ];
 
+const getDefaultBlockLayout = ( blockTypeOrName ) => {
+	const layoutBlockSupportConfig = getBlockSupport(
+		blockTypeOrName,
+		'__experimentalLayout'
+	);
+	return layoutBlockSupportConfig?.default;
+};
+
 export function SocialLinksEdit( props ) {
 	const {
+		name,
 		attributes,
 		iconBackgroundColor,
 		iconColor,
@@ -52,10 +59,11 @@ export function SocialLinksEdit( props ) {
 	const {
 		iconBackgroundColorValue,
 		iconColorValue,
-		itemsJustification,
 		openInNewTab,
 		size,
+		layout,
 	} = attributes;
+	const usedLayout = layout || getDefaultBlockLayout( name );
 
 	// Remove icon background color if logos only style selected.
 	const logosOnly =
@@ -93,16 +101,15 @@ export function SocialLinksEdit( props ) {
 		'has-icon-color': iconColor.color || iconColorValue,
 		'has-icon-background-color':
 			iconBackgroundColor.color || iconBackgroundColorValue,
-		[ `items-justified-${ itemsJustification }` ]: itemsJustification,
 	} );
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		allowedBlocks: ALLOWED_BLOCKS,
-		orientation: 'horizontal',
 		placeholder: isSelected ? SelectedSocialPlaceholder : SocialPlaceholder,
 		templateLock: false,
 		__experimentalAppenderTagName: 'li',
+		__experimentalLayout: usedLayout,
 	} );
 
 	const POPOVER_PROPS = {
@@ -111,24 +118,6 @@ export function SocialLinksEdit( props ) {
 
 	return (
 		<Fragment>
-			<BlockControls group="block">
-				<JustifyContentControl
-					allowedControls={ [
-						'left',
-						'center',
-						'right',
-						'space-between',
-					] }
-					value={ itemsJustification }
-					onChange={ ( value ) =>
-						setAttributes( { itemsJustification: value } )
-					}
-					popoverProps={ {
-						position: 'bottom right',
-						isAlternate: true,
-					} }
-				/>
-			</BlockControls>
 			<BlockControls group="other">
 				<ToolbarDropdownMenu
 					label={ __( 'Size' ) }
@@ -177,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,27 +6,19 @@ 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 {
-		attributes: {
-			iconBackgroundColorValue,
-			iconColorValue,
-			itemsJustification,
-			size,
-		},
+		attributes: { iconBackgroundColorValue, iconColorValue, size },
 	} = props;
 
 	const className = classNames( size, {
 		'has-icon-color': iconColorValue,
 		'has-icon-background-color': iconBackgroundColorValue,
-		[ `items-justified-${ itemsJustification }` ]: itemsJustification,
 	} );
+	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

@@ -1,6 +1,4 @@
 .wp-block-social-links {
-	display: flex;
-	flex-wrap: wrap;
 	padding-left: 0;
 	padding-right: 0;
 	// Some themes set text-indent on all <ul>
@@ -16,13 +14,7 @@
 		box-shadow: none;
 	}
 
-	// Vertically balance the margin of each icon.
 	.wp-social-link {
-		// This needs specificity to override some themes.
-		&.wp-social-link.wp-social-link {
-			margin: 4px 8px 4px 0;
-		}
-
 		// By setting the font size, we can scale icons and paddings consistently based on that.
 		// This also allows themes to override this, if need be.
 		a {
@@ -112,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/style.scss

@@ -1,8 +1,3 @@
-// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor.
-#start-resizable-editor-section {
-	display: none;
-}
-
 @import "./archives/style.scss";
 @import "./audio/style.scss";
 @import "./button/style.scss";
@@ -24,6 +19,7 @@
 @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";
@@ -35,6 +31,7 @@
 @import "./post-title/style.scss";
 @import "./preformatted/style.scss";
 @import "./pullquote/style.scss";
+@import "./post-content/style.scss";
 @import "./post-template/style.scss";
 @import "./query-pagination/style.scss";
 @import "./quote/style.scss";

package/src/table/block.json

@@ -3,7 +3,7 @@
 	"name": "core/table",
 	"title": "Table",
 	"category": "text",
-	"description": "Insert a table — perfect for sharing charts and data.",
+	"description": "Create structured content in rows and columns to display information.",
 	"textdomain": "default",
 	"attributes": {
 		"hasFixedLayout": {
@@ -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/advanced-controls.js

@@ -4,7 +4,7 @@
 import { useEntityProp } from '@wordpress/core-data';
 import { SelectControl, TextControl } from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
-import { InspectorAdvancedControls } from '@wordpress/block-editor';
+import { InspectorControls } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
 
 export function TemplatePartAdvancedControls( {
@@ -44,7 +44,7 @@ export function TemplatePartAdvancedControls( {
 	}, [] );
 
 	return (
-		<InspectorAdvancedControls>
+		<InspectorControls __experimentalGroup="advanced">
 			{ isEntityAvailable && (
 				<>
 					<TextControl
@@ -87,6 +87,6 @@ export function TemplatePartAdvancedControls( {
 				value={ tagName || '' }
 				onChange={ ( value ) => setAttributes( { tagName: value } ) }
 			/>
-		</InspectorAdvancedControls>
+		</InspectorControls>
 	);
 }

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

@@ -179,9 +179,6 @@ export default function TemplatePartEdit( {
 								<ToolbarButton
 									aria-expanded={ isOpen }
 									onClick={ onToggle }
-									// Disable when open to prevent odd FireFox bug causing reopening.
-									// As noted in https://github.com/WordPress/gutenberg/pull/24990#issuecomment-689094119 .
-									disabled={ isOpen }
 								>
 									{ __( 'Replace' ) }
 								</ToolbarButton>

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()
 			) }
 		/>