@wordpress/block-editor 12.14.0 → 12.16.0

package/src/components/editable-text/README.md

@@ -47,40 +47,6 @@ _Optional._ Called when the block can be removed. `forward` is true when the sel
 
 ## Example
 
-{% codetabs %}
-{% ES5 %}
-
-```js
-wp.blocks.registerBlockType( /* ... */, {
-	// ...
-
-	attributes: {
-		content: {
-			source: 'html',
-			selector: 'div',
-		},
-	},
-
-	edit: function( props ) {
-		return React.createElement( wp.editor.EditableText, {
-			className: props.className,
-			value: props.attributes.content,
-			onChange: function( content ) {
-				props.setAttributes( { content: content } );
-			}
-		} );
-	},
-
-	save: function( props ) {
-		return React.createElement( wp.editor.EditableText.Content, {
-			value: props.attributes.content
-		} );
-	}
-} );
-```
-
-{% ESNext %}
-
 ```js
 const { registerBlockType } = wp.blocks;
 const { EditableText } = wp.editor;
@@ -110,5 +76,3 @@ registerBlockType( /* ... */, {
 	}
 } );
 ```
-
-{% end %}

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

@@ -30,7 +30,7 @@ export default function AdvancedPanel( {
 		} );
 		if ( cssError ) {
 			const [ transformed ] = transformStyles(
-				[ { css: value } ],
+				[ { css: newValue } ],
 				'.editor-styles-wrapper'
 			);
 			if ( transformed ) {

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

@@ -12,12 +12,12 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	TabPanel,
 	ColorIndicator,
 	Flex,
 	FlexItem,
 	Dropdown,
 	Button,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
@@ -29,6 +29,7 @@ import ColorGradientControl from '../colors-gradients/control';
 import { useColorsPerOrigin, useGradientsPerOrigin } from './hooks';
 import { getValueFromVariable } from './utils';
 import { setImmutably } from '../../utils/object';
+import { unlock } from '../../lock-unlock';
 
 export function useHasColorPanel( settings ) {
 	const hasTextPanel = useHasTextPanel( settings );
@@ -203,12 +204,11 @@ function ColorPanelDropdown( {
 	colorGradientControlSettings,
 	panelId,
 } ) {
-	const tabConfigs = tabs.map( ( { key, label: tabLabel } ) => {
-		return {
-			name: key,
-			title: tabLabel,
-		};
-	} );
+	const currentTab = tabs.find( ( tab ) => tab.userValue !== undefined );
+	// Unlocking `Tabs` too early causes the `unlock` method to receive an empty
+	// object, due to circular dependencies.
+	// See https://github.com/WordPress/gutenberg/issues/52692
+	const { Tabs } = unlock( componentsPrivateApis );
 
 	return (
 		<ToolsPanelItem
@@ -258,26 +258,35 @@ function ColorPanelDropdown( {
 								/>
 							) }
 							{ tabs.length > 1 && (
-								<TabPanel tabs={ tabConfigs }>
-									{ ( tab ) => {
-										const selectedTab = tabs.find(
-											( t ) => t.key === tab.name
-										);
-
-										if ( ! selectedTab ) {
-											return null;
-										}
-
+								<Tabs initialTabId={ currentTab?.key }>
+									<Tabs.TabList>
+										{ tabs.map( ( tab ) => (
+											<Tabs.Tab
+												key={ tab.key }
+												tabId={ tab.key }
+											>
+												{ tab.label }
+											</Tabs.Tab>
+										) ) }
+									</Tabs.TabList>
+
+									{ tabs.map( ( tab ) => {
 										return (
-											<ColorPanelTab
-												{ ...selectedTab }
-												colorGradientControlSettings={
-													colorGradientControlSettings
-												}
-											/>
+											<Tabs.TabPanel
+												key={ tab.key }
+												tabId={ tab.key }
+												focusable={ false }
+											>
+												<ColorPanelTab
+													{ ...tab }
+													colorGradientControlSettings={
+														colorGradientControlSettings
+													}
+												/>
+											</Tabs.TabPanel>
 										);
-									} }
-								</TabPanel>
+									} ) }
+								</Tabs>
 							) }
 						</div>
 					</DropdownContentWrapper>

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

@@ -12,9 +12,9 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
-	__experimentalVStack as VStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
+	MenuGroup,
 	ColorIndicator,
 	DuotonePicker,
 	DuotoneSwatch,
@@ -82,6 +82,10 @@ function FiltersToolsPanel( {
 			label={ _x( 'Filters', 'Name for applying graphical effects' ) }
 			resetAll={ resetAll }
 			panelId={ panelId }
+			dropdownMenuProps={ {
+				placement: 'left-start',
+				offset: 258, // sidebar width (280px) - button width (24px) + border (2px)
+			} }
 		>
 			{ children }
 		</ToolsPanel>
@@ -197,8 +201,8 @@ export default function FiltersPanel( {
 							);
 						} }
 						renderContent={ () => (
-							<DropdownContentWrapper paddingSize="medium">
-								<VStack>
+							<DropdownContentWrapper paddingSize="small">
+								<MenuGroup label={ __( 'Duotone' ) }>
 									<p>
 										{ __(
 											'Create a two-tone color effect without losing your original image.'
@@ -213,7 +217,7 @@ export default function FiltersPanel( {
 										value={ duotone }
 										onChange={ setDuotone }
 									/>
-								</VStack>
+								</MenuGroup>
 							</DropdownContentWrapper>
 						) }
 					/>

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

@@ -13,6 +13,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import { mergeOrigins, hasMergedOrigins } from '../use-settings';
 import FontFamilyControl from '../font-family';
 import FontAppearanceControl from '../font-appearance-control';
 import LineHeightControl from '../line-height-control';
@@ -51,25 +52,14 @@ export function useHasTypographyPanel( settings ) {
 }
 
 function useHasFontSizeControl( settings ) {
-	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes = []
-		.concat( fontSizesPerOrigin?.custom ?? [] )
-		.concat( fontSizesPerOrigin?.theme ?? [] )
-		.concat( fontSizesPerOrigin.default ?? [] );
-	return !! fontSizes?.length || ! disableCustomFontSizes;
+	return (
+		hasMergedOrigins( settings?.typography?.fontSizes ) ||
+		settings?.typography?.customFontSize
+	);
 }
 
 function useHasFontFamilyControl( settings ) {
-	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
-	const fontFamilies = []
-		.concat( fontFamiliesPerOrigin?.custom ?? [] )
-		.concat( fontFamiliesPerOrigin?.theme ?? [] )
-		.concat( fontFamiliesPerOrigin?.default ?? [] )
-		.sort( ( a, b ) =>
-			( a?.name || a?.slug )?.localeCompare( b?.name || a?.slug )
-		);
-	return !! fontFamilies?.length;
+	return hasMergedOrigins( settings?.typography?.fontFamilies );
 }
 
 function useHasLineHeightControl( settings ) {
@@ -77,18 +67,14 @@ function useHasLineHeightControl( settings ) {
 }
 
 function useHasAppearanceControl( settings ) {
-	const hasFontStyles = settings?.typography?.fontStyle;
-	const hasFontWeights = settings?.typography?.fontWeight;
-	return hasFontStyles || hasFontWeights;
+	return settings?.typography?.fontStyle || settings?.typography?.fontWeight;
 }
 
 function useAppearanceControlLabel( settings ) {
-	const hasFontStyles = settings?.typography?.fontStyle;
-	const hasFontWeights = settings?.typography?.fontWeight;
-	if ( ! hasFontStyles ) {
+	if ( ! settings?.typography?.fontStyle ) {
 		return __( 'Font weight' );
 	}
-	if ( ! hasFontWeights ) {
+	if ( ! settings?.typography?.fontWeight ) {
 		return __( 'Font style' );
 	}
 	return __( 'Appearance' );
@@ -115,18 +101,15 @@ function useHasTextColumnsControl( settings ) {
 }
 
 function getUniqueFontSizesBySlug( settings ) {
-	const fontSizesPerOrigin = settings?.typography?.fontSizes ?? {};
-	const fontSizes = []
-		.concat( fontSizesPerOrigin?.custom ?? [] )
-		.concat( fontSizesPerOrigin?.theme ?? [] )
-		.concat( fontSizesPerOrigin.default ?? [] );
-
-	return fontSizes.reduce( ( acc, currentSize ) => {
-		if ( ! acc.some( ( { slug } ) => slug === currentSize.slug ) ) {
-			acc.push( currentSize );
+	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 acc;
-	}, [] );
+	}
+	return uniqueSizes;
 }
 
 function TypographyToolsPanel( {
@@ -178,14 +161,11 @@ export default function TypographyPanel( {
 
 	// Font Family
 	const hasFontFamilyEnabled = useHasFontFamilyControl( settings );
-	const fontFamiliesPerOrigin = settings?.typography?.fontFamilies;
-	const fontFamilies = []
-		.concat( fontFamiliesPerOrigin?.custom ?? [] )
-		.concat( fontFamiliesPerOrigin?.theme ?? [] )
-		.concat( fontFamiliesPerOrigin?.default ?? [] );
+	const fontFamilies = settings?.typography?.fontFamilies;
+	const mergedFontFamilies = fontFamilies ? mergeOrigins( fontFamilies ) : [];
 	const fontFamily = decodeValue( inheritedValue?.typography?.fontFamily );
 	const setFontFamily = ( newValue ) => {
-		const slug = fontFamilies?.find(
+		const slug = mergedFontFamilies?.find(
 			( { fontFamily: f } ) => f === newValue
 		)?.slug;
 		onChange(
@@ -204,7 +184,7 @@ export default function TypographyPanel( {
 	// Font Size
 	const hasFontSizeEnabled = useHasFontSizeControl( settings );
 	const disableCustomFontSizes = ! settings?.typography?.customFontSize;
-	const fontSizes = getUniqueFontSizesBySlug( settings );
+	const mergedFontSizes = getUniqueFontSizesBySlug( settings );
 
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
 	const setFontSize = ( newValue, metadata ) => {
@@ -368,7 +348,7 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<FontFamilyControl
-						fontFamilies={ fontFamilies }
+						fontFamilies={ mergedFontFamilies }
 						value={ fontFamily }
 						onChange={ setFontFamily }
 						size="__unstable-large"
@@ -387,7 +367,7 @@ export default function TypographyPanel( {
 					<FontSizePicker
 						value={ fontSize }
 						onChange={ setFontSize }
-						fontSizes={ fontSizes }
+						fontSizes={ mergedFontSizes }
 						disableCustomFontSizes={ disableCustomFontSizes }
 						withReset={ false }
 						withSlider

package/src/components/image-link-destinations/index.native.js

@@ -0,0 +1,152 @@
+/**
+ * External dependencies
+ */
+import { useNavigation, useRoute } from '@react-navigation/native';
+import { StyleSheet } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Icon, check, chevronRight } from '@wordpress/icons';
+import { usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { BottomSheet, PanelBody } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+import { blockSettingsScreens } from '../block-settings';
+
+const LINK_DESTINATION_NONE = 'none';
+const LINK_DESTINATION_MEDIA = 'media';
+const LINK_DESTINATION_ATTACHMENT = 'attachment';
+const LINK_DESTINATION_CUSTOM = 'custom';
+
+function LinkDestination( {
+	children,
+	isSelected,
+	label,
+	onPress,
+	value,
+	valueStyle,
+} ) {
+	const optionIcon = usePreferredColorSchemeStyle(
+		styles.optionIcon,
+		styles.optionIconDark
+	);
+
+	return (
+		<BottomSheet.Cell
+			icon={ check }
+			iconStyle={ StyleSheet.flatten( [
+				optionIcon,
+				! isSelected && styles.unselectedOptionIcon,
+			] ) }
+			label={ label }
+			leftAlign
+			onPress={ onPress }
+			value={ value }
+			valueStyle={ valueStyle }
+			separatorType="leftMargin"
+		>
+			{ children }
+		</BottomSheet.Cell>
+	);
+}
+
+function ImageLinkDestinationsScreen( props ) {
+	const navigation = useNavigation();
+	const route = useRoute();
+	const { url = '' } = props;
+	const {
+		inputValue = url,
+		imageUrl,
+		attachmentPageUrl,
+		linkDestination,
+	} = route.params || {};
+
+	function goToLinkPicker() {
+		navigation.navigate( blockSettingsScreens.linkPicker, {
+			inputValue:
+				linkDestination === LINK_DESTINATION_CUSTOM ? inputValue : '',
+		} );
+	}
+
+	const setLinkDestination = ( newLinkDestination ) => () => {
+		let newUrl;
+		switch ( newLinkDestination ) {
+			case LINK_DESTINATION_MEDIA:
+				newUrl = imageUrl;
+				break;
+			case LINK_DESTINATION_ATTACHMENT:
+				newUrl = attachmentPageUrl;
+				break;
+			default:
+				newUrl = '';
+				break;
+		}
+
+		navigation.navigate( blockSettingsScreens.settings, {
+			// The `inputValue` name is reused from LinkPicker, as it helps avoid
+			// bugs from stale values remaining in the React Navigation route
+			// parameters.
+			inputValue: newUrl,
+			// Clear link text value that may be set from LinkPicker.
+			text: '',
+		} );
+	};
+
+	return (
+		<>
+			<BottomSheet.NavBar>
+				<BottomSheet.NavBar.BackButton onPress={ navigation.goBack } />
+				<BottomSheet.NavBar.Heading>
+					{ __( 'Link To' ) }
+				</BottomSheet.NavBar.Heading>
+			</BottomSheet.NavBar>
+			<PanelBody>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_NONE }
+					label={ __( 'None' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_NONE ) }
+				/>
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_MEDIA }
+					label={ __( 'Media File' ) }
+					onPress={ setLinkDestination( LINK_DESTINATION_MEDIA ) }
+				/>
+				{ !! attachmentPageUrl && (
+					<LinkDestination
+						isSelected={
+							linkDestination === LINK_DESTINATION_ATTACHMENT
+						}
+						label={ __( 'Attachment Page' ) }
+						onPress={ setLinkDestination(
+							LINK_DESTINATION_ATTACHMENT
+						) }
+					/>
+				) }
+				<LinkDestination
+					isSelected={ linkDestination === LINK_DESTINATION_CUSTOM }
+					label={ __( 'Custom URL' ) }
+					onPress={ goToLinkPicker }
+					value={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? inputValue
+							: ''
+					}
+					valueStyle={
+						linkDestination === LINK_DESTINATION_CUSTOM
+							? undefined
+							: styles.placeholderTextColor
+					}
+				>
+					<Icon icon={ chevronRight }></Icon>
+				</LinkDestination>
+			</PanelBody>
+		</>
+	);
+}
+
+export default ImageLinkDestinationsScreen;

package/src/components/image-link-destinations/style.native.scss

@@ -0,0 +1,16 @@
+// used in both light and dark modes
+.placeholderTextColor {
+	color: #87a6bc;
+}
+
+.optionIcon {
+	color: $blue-50;
+}
+
+.optionIconDark {
+	color: $blue-30;
+}
+
+.unselectedOptionIcon {
+	opacity: 0;
+}

package/src/components/image-size-control/index.js

@@ -8,7 +8,6 @@ import {
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
 } from '@wordpress/components';
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -31,11 +30,6 @@ export default function ImageSizeControl( {
 	onChange,
 	onChangeImage = noop,
 } ) {
-	deprecated( 'wp.blockEditor.__experimentalImageSizeControl', {
-		since: '6.3',
-		alternative:
-			'wp.blockEditor.privateApis.DimensionsTool and wp.blockEditor.privateApis.ResolutionTool',
-	} );
 	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
 		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
 

package/src/components/index.native.js

@@ -90,6 +90,7 @@ export { default as BlockStyles } from './block-styles';
 export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
+export { default as InserterButton } from './inserter-button';
 export { useBlockProps } from './block-list/use-block-props';
 export { default as FloatingToolbar } from './floating-toolbar';
 

package/src/components/inner-blocks/README.md

@@ -188,8 +188,19 @@ For example, a button block, deeply nested in several levels of block `X` that u
 
 ### `defaultBlock`
 
-- **Type:** `Array`
-- **Default:** - `undefined`. Determines which block type should be inserted by default and any attributes that should be set by default when the block is inserted. Takes an array in the form of `[ blockname, {blockAttributes} ]`.
+- **Type:** `Object`
+- **Default:** - `undefined`
+
+Determines which block type should be inserted by default and any attributes that should be set by default when the block is inserted. Takes an object in the form of `{ name: blockname, attributes: {blockAttributes} }`.
+
+```jsx
+const DEFAULT_BLOCK = { name: 'core/paragraph', attributes: { content: 'Lorem ipsum...' } };
+...
+<InnerBlocks
+    defaultBlock={ DEFAULT_BLOCK }
+    directInsert={ true }
+/>
+```
 
 ### `directInsert`
 

package/src/components/inner-blocks/index.js

@@ -169,8 +169,11 @@ const ForwardedInnerBlocks = forwardRef( ( props, ref ) => {
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/inner-blocks/README.md
  */
 export function useInnerBlocksProps( props = {}, options = {} ) {
-	const { __unstableDisableLayoutClassNames, __unstableDisableDropZone } =
-		options;
+	const {
+		__unstableDisableLayoutClassNames,
+		__unstableDisableDropZone,
+		dropZoneElement,
+	} = options;
 	const {
 		clientId,
 		layout = null,
@@ -211,6 +214,7 @@ export function useInnerBlocksProps( props = {}, options = {} ) {
 	);
 
 	const blockDropZoneRef = useBlockDropZone( {
+		dropZoneElement,
 		rootClientId: clientId,
 	} );