@wordpress/block-editor 12.16.1-next.79a6196f.0 → 12.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-editor",
-	"version": "12.16.1-next.79a6196f.0",
+	"version": "12.17.0",
 	"description": "Generic block editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,35 +35,35 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/styled": "^11.6.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^3.48.1-next.79a6196f.0",
-		"@wordpress/api-fetch": "^6.45.1-next.79a6196f.0",
-		"@wordpress/blob": "^3.48.1-next.79a6196f.0",
-		"@wordpress/blocks": "^12.25.1-next.79a6196f.0",
-		"@wordpress/commands": "^0.19.1-next.79a6196f.0",
-		"@wordpress/components": "^25.15.1-next.79a6196f.0",
-		"@wordpress/compose": "^6.25.1-next.79a6196f.0",
-		"@wordpress/data": "^9.18.1-next.79a6196f.0",
-		"@wordpress/date": "^4.48.1-next.79a6196f.0",
-		"@wordpress/deprecated": "^3.48.1-next.79a6196f.0",
-		"@wordpress/dom": "^3.48.1-next.79a6196f.0",
-		"@wordpress/element": "^5.25.1-next.79a6196f.0",
-		"@wordpress/escape-html": "^2.48.1-next.79a6196f.0",
-		"@wordpress/hooks": "^3.48.1-next.79a6196f.0",
-		"@wordpress/html-entities": "^3.48.1-next.79a6196f.0",
-		"@wordpress/i18n": "^4.48.1-next.79a6196f.0",
-		"@wordpress/icons": "^9.39.1-next.79a6196f.0",
-		"@wordpress/is-shallow-equal": "^4.48.1-next.79a6196f.0",
-		"@wordpress/keyboard-shortcuts": "^4.25.1-next.79a6196f.0",
-		"@wordpress/keycodes": "^3.48.1-next.79a6196f.0",
-		"@wordpress/notices": "^4.16.1-next.79a6196f.0",
-		"@wordpress/preferences": "^3.25.1-next.79a6196f.0",
-		"@wordpress/private-apis": "^0.30.1-next.79a6196f.0",
-		"@wordpress/rich-text": "^6.25.1-next.79a6196f.0",
-		"@wordpress/style-engine": "^1.31.1-next.79a6196f.0",
-		"@wordpress/token-list": "^2.48.1-next.79a6196f.0",
-		"@wordpress/url": "^3.49.1-next.79a6196f.0",
-		"@wordpress/warning": "^2.48.1-next.79a6196f.0",
-		"@wordpress/wordcount": "^3.48.1-next.79a6196f.0",
+		"@wordpress/a11y": "^3.49.0",
+		"@wordpress/api-fetch": "^6.46.0",
+		"@wordpress/blob": "^3.49.0",
+		"@wordpress/blocks": "^12.26.0",
+		"@wordpress/commands": "^0.20.0",
+		"@wordpress/components": "^25.15.0",
+		"@wordpress/compose": "^6.26.0",
+		"@wordpress/data": "^9.19.0",
+		"@wordpress/date": "^4.49.0",
+		"@wordpress/deprecated": "^3.49.0",
+		"@wordpress/dom": "^3.49.0",
+		"@wordpress/element": "^5.26.0",
+		"@wordpress/escape-html": "^2.49.0",
+		"@wordpress/hooks": "^3.49.0",
+		"@wordpress/html-entities": "^3.49.0",
+		"@wordpress/i18n": "^4.49.0",
+		"@wordpress/icons": "^9.40.0",
+		"@wordpress/is-shallow-equal": "^4.49.0",
+		"@wordpress/keyboard-shortcuts": "^4.26.0",
+		"@wordpress/keycodes": "^3.49.0",
+		"@wordpress/notices": "^4.17.0",
+		"@wordpress/preferences": "^3.26.0",
+		"@wordpress/private-apis": "^0.31.0",
+		"@wordpress/rich-text": "^6.26.0",
+		"@wordpress/style-engine": "^1.32.0",
+		"@wordpress/token-list": "^2.49.0",
+		"@wordpress/url": "^3.50.0",
+		"@wordpress/warning": "^2.49.0",
+		"@wordpress/wordcount": "^3.49.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -87,5 +87,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1e74b942ac0119a22ceaaf5c9594263f3ec516ab"
+	"gitHead": "5e6f9caa205d3bfdbac131952b7bf9c6ec60569b"
 }

package/src/components/block-lock/toolbar.js

@@ -33,24 +33,16 @@ export default function BlockLockToolbar( { clientId } ) {
 		}
 	}, [ isLocked ] );
 
-	if ( ! isLocked && ! hasLockButtonShown.current ) {
+	if ( ! canLock || ( ! isLocked && ! hasLockButtonShown.current ) ) {
 		return null;
 	}
 
-	let label = isLocked ? __( 'Unlock' ) : __( 'Lock' );
-
-	if ( ! canLock && isLocked ) {
-		label = __( 'Locked' );
-	}
-
 	return (
 		<>
 			<ToolbarGroup className="block-editor-block-lock-toolbar">
 				<ToolbarButton
-					accessibleWhenDisabled
-					disabled={ ! canLock }
 					icon={ isLocked ? lock : unlock }
-					label={ label }
+					label={ isLocked ? __( 'Unlock' ) : __( 'Lock' ) }
 					onClick={ toggleModal }
 					aria-expanded={ isModalOpen }
 					aria-haspopup="dialog"

package/src/components/global-styles/hooks.js

@@ -66,7 +66,6 @@ const VALID_SETTINGS = [
 	'spacing.units',
 	'typography.fluid',
 	'typography.customFontSize',
-	'typography.defaultFontSizes',
 	'typography.dropCap',
 	'typography.fontFamilies',
 	'typography.fontSizes',
@@ -239,7 +238,6 @@ export function useSettingsForBlockElement(
 				...updatedSettings.typography,
 				fontSizes: {},
 				customFontSize: false,
-				defaultFontSizes: false,
 			};
 		}
 

package/src/components/global-styles/typography-panel.js

@@ -22,7 +22,7 @@ import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import WritingModeControl from '../writing-mode-control';
 import { getValueFromVariable, TOOLSPANEL_DROPDOWNMENU_PROPS } from './utils';
-import { setImmutably, uniqByProperty } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 const MIN_TEXT_COLUMNS = 1;
 const MAX_TEXT_COLUMNS = 6;
@@ -53,10 +53,7 @@ export function useHasTypographyPanel( settings ) {
 
 function useHasFontSizeControl( settings ) {
 	return (
-		( settings?.typography?.defaultFontSizes !== false &&
-			settings?.typography?.fontSizes?.default?.length ) ||
-		settings?.typography?.fontSizes?.theme?.length ||
-		settings?.typography?.fontSizes?.custom?.length ||
+		hasMergedOrigins( settings?.typography?.fontSizes ) ||
 		settings?.typography?.customFontSize
 	);
 }
@@ -103,45 +100,16 @@ function useHasTextColumnsControl( settings ) {
 	return settings?.typography?.textColumns;
 }
 
-/**
- * TODO: The reversing and filtering of default font sizes is a hack so the
- * dropdown UI matches what is generated in the global styles CSS stylesheet.
- *
- * This is a temporary solution until #57733 is resolved. At which point,
- * the mergedFontSizes would just need to be the concatenated array of all
- * presets or a custom dropdown with sections for each.
- *
- * @see {@link https://github.com/WordPress/gutenberg/issues/57733}
- *
- * @param {Object} settings The global styles settings.
- *
- * @return {Array} The merged font sizes.
- */
-function getMergedFontSizes( settings ) {
-	// The font size presets are merged in reverse order so that the duplicates
-	// that may defined later in the array have higher priority to match the CSS.
-	const mergedFontSizesAll = uniqByProperty(
-		[
-			settings?.typography?.fontSizes?.custom,
-			settings?.typography?.fontSizes?.theme,
-			settings?.typography?.fontSizes?.default,
-		].flatMap( ( presets ) => presets?.toReversed() ?? [] ),
-		'slug'
-	).reverse();
-
-	// Default presets exist in the global styles CSS no matter the setting, so
-	// filtering them out in the UI has to be done after merging.
-	const mergedFontSizes =
-		settings?.typography?.defaultFontSizes === false
-			? mergedFontSizesAll.filter(
-					( { slug } ) =>
-						! [ 'small', 'medium', 'large', 'x-large' ].includes(
-							slug
-						)
-			  )
-			: mergedFontSizesAll;
-
-	return mergedFontSizes;
+function getUniqueFontSizesBySlug( settings ) {
+	const fontSizes = settings?.typography?.fontSizes;
+	const mergedFontSizes = fontSizes ? mergeOrigins( fontSizes ) : [];
+	const uniqueSizes = [];
+	for ( const currentSize of mergedFontSizes ) {
+		if ( ! uniqueSizes.some( ( { slug } ) => slug === currentSize.slug ) ) {
+			uniqueSizes.push( currentSize );
+		}
+	}
+	return uniqueSizes;
 }
 
 function TypographyToolsPanel( {
@@ -217,7 +185,7 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const mergedFontSizes = getMergedFontSizes( settings );
+	const mergedFontSizes = getUniqueFontSizesBySlug( settings );
 
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {

package/src/hooks/custom-fields.js

@@ -0,0 +1,115 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+import { PanelBody, TextControl } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import { hasBlockSupport } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import { InspectorControls } from '../components';
+import { useBlockEditingMode } from '../components/block-editing-mode';
+
+/**
+ * Filters registered block settings, extending attributes to include `connections`.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+function addAttribute( settings ) {
+	if ( hasBlockSupport( settings, '__experimentalConnections', true ) ) {
+		// Gracefully handle if settings.attributes.connections is undefined.
+		settings.attributes = {
+			...settings.attributes,
+			connections: {
+				type: 'object',
+			},
+		};
+	}
+
+	return settings;
+}
+
+function CustomFieldsControlPure( { name, connections, setAttributes } ) {
+	const blockEditingMode = useBlockEditingMode();
+	if ( blockEditingMode !== 'default' ) {
+		return null;
+	}
+
+	// If the block is a paragraph or image block, we need to know which
+	// attribute to use for the connection. Only the `content` attribute
+	// of the paragraph block and the `url` attribute of the image block are supported.
+	let attributeName;
+	if ( name === 'core/paragraph' ) attributeName = 'content';
+	if ( name === 'core/image' ) attributeName = 'url';
+
+	return (
+		<InspectorControls>
+			<PanelBody title={ __( 'Connections' ) } initialOpen={ true }>
+				<TextControl
+					__nextHasNoMarginBottom
+					autoComplete="off"
+					label={ __( 'Custom field meta_key' ) }
+					value={
+						connections?.attributes?.[ attributeName ]?.value || ''
+					}
+					onChange={ ( nextValue ) => {
+						if ( nextValue === '' ) {
+							setAttributes( {
+								connections: undefined,
+								[ attributeName ]: undefined,
+								placeholder: undefined,
+							} );
+						} else {
+							setAttributes( {
+								connections: {
+									attributes: {
+										// The attributeName will be either `content` or `url`.
+										[ attributeName ]: {
+											// Source will be variable, could be post_meta, user_meta, term_meta, etc.
+											// Could even be a custom source like a social media attribute.
+											source: 'meta_fields',
+											value: nextValue,
+										},
+									},
+								},
+								[ attributeName ]: undefined,
+								placeholder: sprintf(
+									'This content will be replaced on the frontend by the value of "%s" custom field.',
+									nextValue
+								),
+							} );
+						}
+					} }
+				/>
+			</PanelBody>
+		</InspectorControls>
+	);
+}
+
+export default {
+	edit: CustomFieldsControlPure,
+	attributeKeys: [ 'connections' ],
+	hasSupport( name ) {
+		return (
+			hasBlockSupport( name, '__experimentalConnections', false ) &&
+			// Check if the current block is a paragraph or image block.
+			// Currently, only these two blocks are supported.
+			[ 'core/paragraph', 'core/image' ].includes( name )
+		);
+	},
+};
+
+if (
+	window.__experimentalConnections ||
+	window.__experimentalPatternPartialSyncing
+) {
+	addFilter(
+		'blocks.registerBlockType',
+		'core/editor/connections/attribute',
+		addAttribute
+	);
+}

package/src/hooks/index.js

@@ -25,6 +25,7 @@ import layout from './layout';
 import childLayout from './layout-child';
 import contentLockUI from './content-lock-ui';
 import './metadata';
+import customFields from './custom-fields';
 import blockHooks from './block-hooks';
 import blockRenaming from './block-renaming';
 
@@ -38,6 +39,7 @@ createBlockEditFilter(
 		position,
 		layout,
 		contentLockUI,
+		window.__experimentalConnections ? customFields : null,
 		blockHooks,
 		blockRenaming,
 	].filter( Boolean )

package/src/hooks/utils.js

@@ -177,10 +177,7 @@ export function useBlockSettings( name, parentLayout ) {
 		backgroundImage,
 		backgroundSize,
 		fontFamilies,
-		userFontSizes,
-		themeFontSizes,
-		defaultFontSizes,
-		defaultFontSizesEnabled,
+		fontSizes,
 		customFontSize,
 		fontStyle,
 		fontWeight,
@@ -225,10 +222,7 @@ export function useBlockSettings( name, parentLayout ) {
 		'background.backgroundImage',
 		'background.backgroundSize',
 		'typography.fontFamilies',
-		'typography.fontSizes.custom',
-		'typography.fontSizes.theme',
-		'typography.fontSizes.default',
-		'typography.defaultFontSizes',
+		'typography.fontSizes',
 		'typography.customFontSize',
 		'typography.fontStyle',
 		'typography.fontWeight',
@@ -310,12 +304,9 @@ export function useBlockSettings( name, parentLayout ) {
 					custom: fontFamilies,
 				},
 				fontSizes: {
-					custom: userFontSizes,
-					theme: themeFontSizes,
-					default: defaultFontSizes,
+					custom: fontSizes,
 				},
 				customFontSize,
-				defaultFontSizes: defaultFontSizesEnabled,
 				fontStyle,
 				fontWeight,
 				lineHeight,
@@ -350,10 +341,7 @@ export function useBlockSettings( name, parentLayout ) {
 		backgroundImage,
 		backgroundSize,
 		fontFamilies,
-		userFontSizes,
-		themeFontSizes,
-		defaultFontSizes,
-		defaultFontSizesEnabled,
+		fontSizes,
 		customFontSize,
 		fontStyle,
 		fontWeight,

package/src/utils/object.js

@@ -49,19 +49,3 @@ export const getValueFromObjectPath = ( object, path, defaultValue ) => {
 	} );
 	return value ?? defaultValue;
 };
-
-/**
- * Helper util to filter out objects with duplicate values for a given property.
- *
- * @param {Object[]} array    Array of objects to filter.
- * @param {string}   property Property to filter unique values by.
- *
- * @return {Object[]} Array of objects with unique values for the specified property.
- */
-export function uniqByProperty( array, property ) {
-	const seen = new Set();
-	return array.filter( ( item ) => {
-		const value = item[ property ];
-		return seen.has( value ) ? false : seen.add( value );
-	} );
-}