@wordpress/block-editor 7.0.3 → 7.0.4

package/src/components/plain-text/index.native.js

@@ -1,12 +1,13 @@
 /**
  * External dependencies
  */
-import { TextInput, Platform } from 'react-native';
+import { TextInput, Platform, Dimensions } from 'react-native';
 
 /**
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
+import { getPxFromCssUnit } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -61,7 +62,30 @@ export default class PlainText extends Component {
 		this._input.blur();
 	}
 
+	getFontSize() {
+		const { style } = this.props;
+
+		if ( ! style?.fontSize ) {
+			return;
+		}
+
+		const { width, height } = Dimensions.get( 'window' );
+		const cssUnitOptions = { height, width };
+
+		return {
+			fontSize: parseFloat(
+				getPxFromCssUnit( style.fontSize, cssUnitOptions )
+			),
+		};
+	}
+
 	render() {
+		const { style } = this.props;
+		const textStyles = [
+			style || styles[ 'block-editor-plain-text' ],
+			this.getFontSize(),
+		];
+
 		return (
 			<TextInput
 				{ ...this.props }
@@ -75,9 +99,7 @@ export default class PlainText extends Component {
 					( this.props.style && this.props.style.fontFamily ) ||
 					styles[ 'block-editor-plain-text' ].fontFamily
 				}
-				style={
-					this.props.style || styles[ 'block-editor-plain-text' ]
-				}
+				style={ textStyles }
 				scrollEnabled={ false }
 			/>
 		);

package/src/components/rich-text/embed-handler-picker.native.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	forwardRef,
+	useRef,
+	useImperativeHandle,
+	memo,
+	useCallback,
+} from '@wordpress/element';
+import { Picker } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const DEFAULT_PICKER_OPTIONS = [
+	{
+		id: 'createEmbed',
+		label: __( 'Create embed' ),
+		value: 'createEmbed',
+		onSelect: noop,
+	},
+	{
+		id: 'createLink',
+		label: __( 'Create link' ),
+		value: 'createLink',
+		onSelect: noop,
+	},
+];
+
+const EmbedHandlerPicker = forwardRef( ( {}, ref ) => {
+	const pickerRef = useRef();
+	const pickerOptions = useRef( DEFAULT_PICKER_OPTIONS ).current;
+
+	const onPickerSelect = useCallback(
+		( value ) => {
+			const selectedItem = pickerOptions.find(
+				( item ) => item.value === value
+			);
+			selectedItem.onSelect();
+		},
+		[ pickerOptions ]
+	);
+
+	useImperativeHandle( ref, () => ( {
+		presentPicker: ( { createEmbed, createLink } ) => {
+			pickerOptions[ 0 ].onSelect = createEmbed;
+			pickerOptions[ 1 ].onSelect = createLink;
+			pickerRef.current?.presentPicker();
+		},
+	} ) );
+
+	return (
+		<Picker
+			ref={ pickerRef }
+			options={ pickerOptions }
+			onChange={ onPickerSelect }
+			hideCancelButton
+			leftAlign
+		/>
+	);
+} );
+
+export default memo( EmbedHandlerPicker );

package/src/components/rich-text/index.js

@@ -26,6 +26,7 @@ import {
 } from '@wordpress/rich-text';
 import deprecated from '@wordpress/deprecated';
 import { BACKSPACE, DELETE } from '@wordpress/keycodes';
+import { Popover } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -307,14 +308,17 @@ function RichTextWrapper(
 			{ isSelected && (
 				<keyboardShortcutContext.Provider value={ keyboardShortcuts }>
 					<inputEventContext.Provider value={ inputEvents }>
-						{ children && children( { value, onChange, onFocus } ) }
-						<FormatEdit
-							value={ value }
-							onChange={ onChange }
-							onFocus={ onFocus }
-							formatTypes={ formatTypes }
-							forwardedRef={ anchorRef }
-						/>
+						<Popover.__unstableSlotNameProvider value="__unstable-block-tools-after">
+							{ children &&
+								children( { value, onChange, onFocus } ) }
+							<FormatEdit
+								value={ value }
+								onChange={ onChange }
+								onFocus={ onFocus }
+								formatTypes={ formatTypes }
+								forwardedRef={ anchorRef }
+							/>
+						</Popover.__unstableSlotNameProvider>
 					</inputEventContext.Provider>
 				</keyboardShortcutContext.Provider>
 			) }

package/src/components/rich-text/index.native.js

@@ -55,7 +55,9 @@ import {
 	getMultilineTag,
 	getAllowedFormats,
 	isShortcode,
+	createLinkInParagraph,
 } from './utils';
+import EmbedHandlerPicker from './embed-handler-picker';
 
 const wrapperClasses = 'block-editor-rich-text';
 const classes = 'block-editor-rich-text__editable';
@@ -118,6 +120,7 @@ function RichTextWrapper(
 	const fallbackRef = useRef();
 	const { clientId, isSelected: blockIsSelected } = useBlockEditContext();
 	const nativeProps = useNativeProps();
+	const embedHandlerPickerRef = useRef();
 	const selector = ( select ) => {
 		const {
 			isCaretWithinFormattedText,
@@ -439,10 +442,19 @@ function RichTextWrapper(
 				mode = 'BLOCKS';
 			}
 
+			const isPastedURL = isURL( plainText.trim() );
+			const presentEmbedHandlerPicker = () =>
+				embedHandlerPickerRef.current?.presentPicker( {
+					createEmbed: () =>
+						onReplace( content, content.length - 1, -1 ),
+					createLink: () =>
+						createLinkInParagraph( plainText.trim(), onReplace ),
+				} );
+
 			if (
 				__unstableEmbedURLOnPaste &&
 				isEmpty( value ) &&
-				isURL( plainText.trim() )
+				isPastedURL
 			) {
 				mode = 'BLOCKS';
 			}
@@ -472,9 +484,30 @@ function RichTextWrapper(
 
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
+				// When an URL is pasted in an empty paragraph then the EmbedHandlerPicker should showcase options allowing the transformation of that URL
+				// into either an Embed block or a link within the target paragraph. If the paragraph is non-empty, the URL is pasted as text.
+				const canPasteEmbed =
+					isPastedURL &&
+					content.length === 1 &&
+					content[ 0 ].name === 'core/embed';
 				if ( onReplace && isEmpty( value ) ) {
+					if ( canPasteEmbed ) {
+						onChange(
+							insert( value, create( { text: plainText } ) )
+						);
+						if ( __unstableEmbedURLOnPaste ) {
+							presentEmbedHandlerPicker();
+						}
+						return;
+					}
 					onReplace( content, content.length - 1, -1 );
 				} else {
+					if ( canPasteEmbed ) {
+						onChange(
+							insert( value, create( { text: plainText } ) )
+						);
+						return;
+					}
 					splitValue( value, content );
 				}
 			}
@@ -650,6 +683,7 @@ function RichTextWrapper(
 							/>
 						) }
 					</Autocomplete>
+					<EmbedHandlerPicker ref={ embedHandlerPickerRef } />
 				</>
 			) }
 		</RichText>

package/src/components/rich-text/use-paste-handler.js

@@ -21,6 +21,25 @@ import { filePasteHandler } from './file-paste-handler';
 import { addActiveFormats, isShortcode } from './utils';
 import { splitValue } from './split-value';
 
+/** @typedef {import('@wordpress/rich-text').RichTextValue} RichTextValue */
+
+/**
+ * Replaces line separators with line breaks if not multiline.
+ * Replaces line breaks with line separators if multiline.
+ *
+ * @param {RichTextValue} value       Value to adjust.
+ * @param {boolean}       isMultiline Whether to adjust to multiline or not.
+ *
+ * @return {RichTextValue} Adjusted value.
+ */
+function adjustLines( value, isMultiline ) {
+	if ( isMultiline ) {
+		return replace( value, /\n+/g, LINE_SEPARATOR );
+	}
+
+	return replace( value, new RegExp( LINE_SEPARATOR, 'g' ), '\n' );
+}
+
 export function usePasteHandler( props ) {
 	const propsRef = useRef( props );
 	propsRef.current = props;
@@ -110,13 +129,19 @@ export function usePasteHandler( props ) {
 			// without filtering the data. The filters are only meant for externally
 			// pasted content and remove inline styles.
 			if ( isInternal ) {
-				const pastedValue = create( {
+				const pastedMultilineTag =
+					clipboardData.getData( 'rich-text-multi-line-tag' ) ||
+					undefined;
+				let pastedValue = create( {
 					html,
-					multilineTag,
+					multilineTag: pastedMultilineTag,
 					multilineWrapperTags:
-						multilineTag === 'li' ? [ 'ul', 'ol' ] : undefined,
+						pastedMultilineTag === 'li'
+							? [ 'ul', 'ol' ]
+							: undefined,
 					preserveWhiteSpace,
 				} );
+				pastedValue = adjustLines( pastedValue, !! multilineTag );
 				addActiveFormats( pastedValue, value.activeFormats );
 				onChange( insert( value, pastedValue ) );
 				return;
@@ -190,18 +215,11 @@ export function usePasteHandler( props ) {
 			if ( typeof content === 'string' ) {
 				let valueToInsert = create( { html: content } );
 
-				addActiveFormats( valueToInsert, value.activeFormats );
-
 				// If the content should be multiline, we should process text
 				// separated by a line break as separate lines.
-				if ( multilineTag ) {
-					valueToInsert = replace(
-						valueToInsert,
-						/\n+/g,
-						LINE_SEPARATOR
-					);
-				}
+				valueToInsert = adjustLines( valueToInsert, !! multilineTag );
 
+				addActiveFormats( valueToInsert, value.activeFormats );
 				onChange( insert( value, valueToInsert ) );
 			} else if ( content.length > 0 ) {
 				if ( onReplace && isEmpty( value ) ) {

package/src/components/rich-text/utils.js

@@ -3,6 +3,8 @@
  */
 import { regexp } from '@wordpress/shortcode';
 import deprecated from '@wordpress/deprecated';
+import { renderToString } from '@wordpress/element';
+import { createBlock } from '@wordpress/blocks';
 
 export function addActiveFormats( value, activeFormats ) {
 	if ( activeFormats?.length ) {
@@ -60,3 +62,17 @@ export function getAllowedFormats( {
 getAllowedFormats.EMPTY_ARRAY = [];
 
 export const isShortcode = ( text ) => regexp( '.*' ).test( text );
+
+/**
+ * Creates a link from pasted URL.
+ * Creates a paragraph block containing a link to the URL, and calls `onReplace`.
+ *
+ * @param {string}   url       The URL that could not be embedded.
+ * @param {Function} onReplace Function to call with the created fallback block.
+ */
+export function createLinkInParagraph( url, onReplace ) {
+	const link = <a href={ url }>{ url }</a>;
+	onReplace(
+		createBlock( 'core/paragraph', { content: renderToString( link ) } )
+	);
+}

package/src/components/skip-to-selected-block/README.md

@@ -0,0 +1,39 @@
+# SkipToSelectedBlock
+
+`SkipToSelectedBlock` provides a way for keyboard and assistive technologies users to jump back to the currently selected block.
+
+The component renders as a visually hidden, secondary button with the text, 'Skip to the selected block'. When clicked it will set [focus](https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus) on the currently selected block. This means that the currently selected block will now receive all keyboard and similar events by default until focus is moved elsewhere.
+
+If there are multiple blocks selected, the focus will be set on the block that was selected first.
+
+## Usage
+
+Render a `<SkipToSelectedBlock />` component passing in the currently selected block's `clientId`.
+
+```jsx
+function render( { clientId } ) {
+	return (
+		<div>
+			<SkipToSelectedBlock selectedBlockClientId={ clientId } />
+		</div>
+	);
+}
+```
+
+_Note:_
+
+## Props
+
+### `selectedBlockClientId`
+
+-   **Type:** `String`
+-   **Required** `true`
+-   **Default:** `undefined`
+
+The `selectedBlockClientId` is passed to `useBlockRef` inside the component to correctly reference the currently selected block.
+
+If a `clientId` is not provided, the component will return `null`.
+
+## Examples
+
+This component is currently used in the [block inspector](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-editor/src/components/block-inspector) in the sidebar, at the bottom right corner of the screen.

package/src/hooks/align.js

@@ -63,7 +63,7 @@ export function getValidAlignments(
 		);
 	} else if ( blockAlign === true ) {
 		// `true` includes all alignments...
-		validAlignments = ALL_ALIGNMENTS;
+		validAlignments = [ ...ALL_ALIGNMENTS ];
 	} else {
 		validAlignments = [];
 	}
@@ -117,15 +117,19 @@ export function addAttribute( settings ) {
 export const withToolbarControls = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
 		const { name: blockName } = props;
-		// Compute the block allowed alignments without taking into account,
-		// if the theme supports wide alignments or not
-		// and without checking the layout for availble alignments.
-		// BlockAlignmentToolbar takes both of these into account.
+		// Compute the block valid alignments by taking into account,
+		// if the theme supports wide alignments or not and the layout's
+		// availble alignments. We do that for conditionally rendering
+		// Slot.
 		const blockAllowedAlignments = getValidAlignments(
 			getBlockSupport( blockName, 'align' ),
 			hasBlockSupport( blockName, 'alignWide', true )
 		);
 
+		const validAlignments = useAvailableAlignments(
+			blockAllowedAlignments
+		).map( ( { name } ) => name );
+
 		const updateAlignment = ( nextAlign ) => {
 			if ( ! nextAlign ) {
 				const blockType = getBlockType( props.name );
@@ -139,7 +143,7 @@ export const withToolbarControls = createHigherOrderComponent(
 
 		return (
 			<>
-				{ blockAllowedAlignments.length > 0 && (
+				{ !! validAlignments.length && (
 					<BlockControls
 						group="block"
 						__experimentalShareWithChildBlocks
@@ -147,7 +151,7 @@ export const withToolbarControls = createHigherOrderComponent(
 						<BlockAlignmentControl
 							value={ props.attributes.align }
 							onChange={ updateAlignment }
-							controls={ blockAllowedAlignments }
+							controls={ validAlignments }
 						/>
 					</BlockControls>
 				) }

package/src/hooks/anchor.js

@@ -81,9 +81,9 @@ export const withInspectorControl = createHigherOrderComponent(
 
 								{ isWeb && (
 									<ExternalLink
-										href={
+										href={ __(
 											'https://wordpress.org/support/article/page-jumps/'
-										}
+										) }
 									>
 										{ __( 'Learn more about anchors' ) }
 									</ExternalLink>

package/src/hooks/font-family.js

@@ -1,39 +1,111 @@
 /**
  * External dependencies
  */
-import { find } from 'lodash';
+import { find, kebabCase } from 'lodash';
 
 /**
  * WordPress dependencies
  */
+import { addFilter } from '@wordpress/hooks';
 import { hasBlockSupport } from '@wordpress/blocks';
+import TokenList from '@wordpress/token-list';
 
 /**
  * Internal dependencies
  */
-import { cleanEmptyObject } from './utils';
 import useSetting from '../components/use-setting';
 import FontFamilyControl from '../components/font-family';
 
 export const FONT_FAMILY_SUPPORT_KEY = 'typography.__experimentalFontFamily';
 
-const getFontFamilyFromAttributeValue = ( fontFamilies, value ) => {
-	const attributeParsed = /var:preset\|font-family\|(.+)/.exec( value );
-	if ( attributeParsed && attributeParsed[ 1 ] ) {
-		const fontFamilyObject = find( fontFamilies, ( { slug } ) => {
-			return slug === attributeParsed[ 1 ];
+/**
+ * Filters registered block settings, extending attributes to include
+ * the `fontFamily` attribute.
+ *
+ * @param  {Object} settings Original block settings
+ * @return {Object}          Filtered block settings
+ */
+function addAttributes( settings ) {
+	if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {
+		return settings;
+	}
+
+	// Allow blocks to specify a default value if needed.
+	if ( ! settings.attributes.fontFamily ) {
+		Object.assign( settings.attributes, {
+			fontFamily: {
+				type: 'string',
+			},
 		} );
-		if ( fontFamilyObject ) {
-			return fontFamilyObject.fontFamily;
-		}
 	}
-	return value;
-};
+
+	return settings;
+}
+
+/**
+ * Override props assigned to save component to inject font family.
+ *
+ * @param  {Object} props      Additional props applied to save element
+ * @param  {Object} blockType  Block type
+ * @param  {Object} attributes Block attributes
+ * @return {Object}            Filtered props applied to save element
+ */
+function addSaveProps( props, blockType, attributes ) {
+	if ( ! hasBlockSupport( blockType, FONT_FAMILY_SUPPORT_KEY ) ) {
+		return props;
+	}
+
+	if (
+		hasBlockSupport(
+			blockType,
+			'__experimentalSkipTypographySerialization'
+		)
+	) {
+		return props;
+	}
+
+	if ( ! attributes?.fontFamily ) {
+		return props;
+	}
+
+	// Use TokenList to dedupe classes.
+	const classes = new TokenList( props.className );
+	classes.add( `has-${ kebabCase( attributes?.fontFamily ) }-font-family` );
+	const newClassName = classes.value;
+	props.className = newClassName ? newClassName : undefined;
+
+	return props;
+}
+
+/**
+ * Filters registered block settings to expand the block edit wrapper
+ * by applying the desired styles and classnames.
+ *
+ * @param {Object} settings Original block settings.
+ *
+ * @return {Object} Filtered block settings.
+ */
+function addEditProps( settings ) {
+	if ( ! hasBlockSupport( settings, FONT_FAMILY_SUPPORT_KEY ) ) {
+		return settings;
+	}
+
+	const existingGetEditWrapperProps = settings.getEditWrapperProps;
+	settings.getEditWrapperProps = ( attributes ) => {
+		let props = {};
+		if ( existingGetEditWrapperProps ) {
+			props = existingGetEditWrapperProps( attributes );
+		}
+		return addSaveProps( props, settings, attributes );
+	};
+
+	return settings;
+}
 
 export function FontFamilyEdit( {
 	name,
 	setAttributes,
-	attributes: { style = {} },
+	attributes: { fontFamily },
 } ) {
 	const fontFamilies = useSetting( 'typography.fontFamilies' );
 	const isDisable = useIsFontFamilyDisabled( { name } );
@@ -42,26 +114,16 @@ export function FontFamilyEdit( {
 		return null;
 	}
 
-	const value = getFontFamilyFromAttributeValue(
-		fontFamilies,
-		style.typography?.fontFamily
-	);
+	const value = find( fontFamilies, ( { slug } ) => fontFamily === slug )
+		?.fontFamily;
 
 	function onChange( newValue ) {
 		const predefinedFontFamily = find(
 			fontFamilies,
-			( { fontFamily } ) => fontFamily === newValue
+			( { fontFamily: f } ) => f === newValue
 		);
 		setAttributes( {
-			style: cleanEmptyObject( {
-				...style,
-				typography: {
-					...( style.typography || {} ),
-					fontFamily: predefinedFontFamily
-						? `var:preset|font-family|${ predefinedFontFamily.slug }`
-						: newValue || undefined,
-				},
-			} ),
+			fontFamily: predefinedFontFamily?.slug,
 		} );
 	}
 
@@ -89,3 +151,21 @@ export function useIsFontFamilyDisabled( { name } ) {
 		! hasBlockSupport( name, FONT_FAMILY_SUPPORT_KEY )
 	);
 }
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/fontFamily/addAttribute',
+	addAttributes
+);
+
+addFilter(
+	'blocks.getSaveContent.extraProps',
+	'core/fontFamily/addSaveProps',
+	addSaveProps
+);
+
+addFilter(
+	'blocks.registerBlockType',
+	'core/fontFamily/addEditProps',
+	addEditProps
+);

package/src/hooks/style.js

@@ -18,6 +18,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
+import { useContext, createPortal } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import {
 	getBlockSupport,
@@ -30,6 +31,7 @@ import { createHigherOrderComponent, useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
+import BlockList from '../components/block-list';
 import { BORDER_SUPPORT_KEY, BorderPanel } from './border';
 import { COLOR_SUPPORT_KEY, ColorEdit } from './color';
 import {
@@ -262,9 +264,9 @@ export const withBlockControls = createHigherOrderComponent(
 			<>
 				{ shouldDisplayControls && (
 					<>
+						<ColorEdit { ...props } />
 						<TypographyPanel { ...props } />
 						<BorderPanel { ...props } />
-						<ColorEdit { ...props } />
 						<DimensionsPanel { ...props } />
 					</>
 				) }
@@ -292,16 +294,20 @@ const withElementsStyles = createHigherOrderComponent(
 			blockElementsContainerIdentifier,
 			props.attributes.style?.elements
 		);
+		const element = useContext( BlockList.__unstableElementContext );
 
 		return (
 			<>
-				{ elements && (
-					<style
-						dangerouslySetInnerHTML={ {
-							__html: styles,
-						} }
-					/>
-				) }
+				{ elements &&
+					element &&
+					createPortal(
+						<style
+							dangerouslySetInnerHTML={ {
+								__html: styles,
+							} }
+						/>,
+						element
+					) }
 
 				<BlockListBlock
 					{ ...props }

package/src/layouts/flow.js

@@ -144,9 +144,12 @@ export default {
 
 		if ( hasBlockGapStylesSupport ) {
 			style += `
+				${ appendSelectors( selector, '> *' ) } {
+					margin-top: 0;
+					margin-bottom: 0;
+				}
 				${ appendSelectors( selector, '> * + *' ) } {
 					margin-top: var( --wp--style--block-gap );
-					margin-bottom: 0;
 				}
 			`;
 		}