@wordpress/block-editor 7.0.4 → 8.0.0

package/src/components/inserter/hooks/use-block-type-impressions.native.js

@@ -10,29 +10,22 @@ import { setBlockTypeImpressions } from '@wordpress/react-native-bridge';
 import { store as blockEditorStore } from '../../../store';
 
 function useBlockTypeImpressions( blockTypes ) {
-	const { blockTypeImpressions, enableEditorOnboarding } = useSelect(
-		( select ) => {
-			const { getSettings: getBlockEditorSettings } = select(
-				blockEditorStore
-			);
-			const { editorOnboarding, impressions } = getBlockEditorSettings();
-
-			return {
-				blockTypeImpressions: impressions,
-				enableEditorOnboarding: editorOnboarding,
-			};
-		},
-		[]
-	);
+	const { blockTypeImpressions } = useSelect( ( select ) => {
+		const { getSettings: getBlockEditorSettings } = select(
+			blockEditorStore
+		);
+		const { impressions } = getBlockEditorSettings();
+
+		return {
+			blockTypeImpressions: impressions,
+		};
+	}, [] );
 	const { updateSettings } = useDispatch( blockEditorStore );
 
-	const items = enableEditorOnboarding
-		? blockTypes.map( ( blockType ) => ( {
-				...blockType,
-				isNew: blockTypeImpressions[ blockType.name ] > 0,
-		  } ) )
-		: blockTypes;
-
+	const items = blockTypes.map( ( blockType ) => ( {
+		...blockType,
+		isNew: blockTypeImpressions[ blockType.name ] > 0,
+	} ) );
 	const trackBlockTypeSelected = ( { name } ) => {
 		if ( blockTypeImpressions[ name ] > 0 ) {
 			const updatedBlockTypeImpressions = {

package/src/components/inserter/pattern-panel.js

@@ -6,15 +6,17 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { SelectControl } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { Flex, FlexItem, SelectControl, Button } from '@wordpress/components';
+import { __, _x } from '@wordpress/i18n';
+import { useViewportMatch } from '@wordpress/compose';
 
 function PatternInserterPanel( {
 	selectedCategory,
 	patternCategories,
 	onClickCategory,
-	children,
+	openPatternExplorer,
 } ) {
+	const isMobile = useViewportMatch( 'medium', '<' );
 	const categoryOptions = () => {
 		const options = [];
 
@@ -36,12 +38,10 @@ function PatternInserterPanel( {
 		);
 	};
 
-	const getPanelHeaderClassName = () => {
-		return classnames(
-			'block-editor-inserter__panel-header',
-			'block-editor-inserter__panel-header-patterns'
-		);
-	};
+	const className = classnames(
+		'block-editor-inserter__panel-header',
+		'block-editor-inserter__panel-header-patterns'
+	);
 
 	// In iOS-based mobile devices, the onBlur will fire when selecting an option
 	// from a Select element. To prevent closing the useDialog on iOS devices, we
@@ -54,8 +54,13 @@ function PatternInserterPanel( {
 	};
 
 	return (
-		<>
-			<div className={ getPanelHeaderClassName() }>
+		<Flex
+			justify="space-between"
+			align="start"
+			gap="4"
+			className={ className }
+		>
+			<FlexItem isBlock>
 				<SelectControl
 					className="block-editor-inserter__panel-dropdown"
 					label={ __( 'Filter patterns' ) }
@@ -65,11 +70,23 @@ function PatternInserterPanel( {
 					onBlur={ onBlur }
 					options={ categoryOptions() }
 				/>
-			</div>
-			<div className="block-editor-inserter__panel-content">
-				{ children }
-			</div>
-		</>
+			</FlexItem>
+			{ ! isMobile && (
+				<FlexItem>
+					<Button
+						variant="secondary"
+						className="block-editor-inserter__patterns-explorer-expand"
+						label={ __( 'Explore all patterns' ) }
+						onClick={ () => openPatternExplorer() }
+					>
+						{ _x(
+							'Explore',
+							'Label for showing all block patterns'
+						) }
+					</Button>
+				</FlexItem>
+			) }
+		</Flex>
 	);
 }
 

package/src/components/inserter/style.scss

@@ -166,7 +166,8 @@ $block-inserter-tabs-height: 44px;
 }
 
 .block-editor-inserter__panel-dropdown select.components-select-control__input.components-select-control__input.components-select-control__input {
-	line-height: 1.2;
+	height: 36px;
+	line-height: 36px;
 }
 
 .block-editor-inserter__panel-dropdown select {
@@ -296,6 +297,12 @@ $block-inserter-tabs-height: 44px;
 		display: grid;
 		grid-template-columns: 1fr 1fr;
 		grid-gap: $grid-unit-10;
+		.block-editor-block-patterns-list__list-item {
+			margin-bottom: 0;
+		}
+		.block-editor-block-preview__container {
+			min-height: 100px;
+		}
 	}
 }
 
@@ -330,3 +337,59 @@ $block-inserter-tabs-height: 44px;
 		border-color: var(--wp-admin-theme-color);
 	}
 }
+
+.block-editor-block-patterns-explorer {
+	&__sidebar {
+		position: absolute;
+		top: $header-height;
+		left: 0;
+		bottom: 0;
+		width: $sidebar-width;
+		padding: $grid-unit-30 $grid-unit-40 $grid-unit-40;
+		overflow-x: visible;
+		overflow-y: scroll;
+
+		&__categories-list__item {
+			display: block;
+			width: 100%;
+			height: 48px;
+			text-align: left;
+		}
+	}
+
+	&__search {
+		margin-bottom: $grid-unit-40;
+	}
+
+	&__search-results-count {
+		padding-bottom: $grid-unit-40;
+	}
+
+	&__list {
+		margin-left: $sidebar-width - $grid-unit-40;
+	}
+
+	.block-editor-block-patterns-list {
+		display: grid;
+		grid-gap: $grid-unit-40;
+		grid-template-columns: repeat(1, 1fr);
+
+		@include break-xlarge() {
+			grid-template-columns: repeat(2, 1fr);
+		}
+
+		@include break-huge() {
+			grid-template-columns: repeat(3, 1fr);
+		}
+
+		.block-editor-block-patterns-list__list-item {
+			min-height: 240px;
+		}
+
+		.block-editor-block-preview__container {
+			height: inherit;
+			min-height: 100px;
+			max-height: 800px;
+		}
+	}
+}

package/src/components/inserter/test/block-types-tab.native.js

@@ -24,7 +24,7 @@ const selectMock = {
 	canInsertBlockType: jest.fn(),
 	getBlockType: jest.fn(),
 	getClipboard: jest.fn(),
-	getSettings: jest.fn( () => ( {} ) ),
+	getSettings: jest.fn( () => ( { impressions: {} } ) ),
 };
 
 describe( 'BlockTypesTab component', () => {

package/src/components/inserter/test/fixtures/index.native.js

@@ -0,0 +1,12 @@
+/**
+ * Internal dependencies
+ */
+import fixtures from './index.js';
+
+export * from './index';
+
+export default fixtures.map( ( filteredItems ) => ( {
+	...filteredItems,
+	// Set `isNew` property expected from block type impressions
+	isNew: false,
+} ) );

package/src/components/inspector-controls/groups.js

@@ -8,11 +8,15 @@ const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
 const InspectorControlsDimensions = createSlotFill(
 	'InspectorControlsDimensions'
 );
+const InspectorControlsTypography = createSlotFill(
+	'InspectorControlsTypography'
+);
 
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
 	dimensions: InspectorControlsDimensions,
+	typography: InspectorControlsTypography,
 };
 
 export default groups;

package/src/components/letter-spacing-control/index.js

@@ -15,12 +15,18 @@ import useSetting from '../../components/use-setting';
 /**
  * Control for letter-spacing.
  *
- * @param {Object}   props          Component props.
- * @param {string}   props.value    Currently selected letter-spacing.
- * @param {Function} props.onChange Handles change in letter-spacing selection.
- * @return {WPElement}                      Letter-spacing control.
+ * @param {Object}   props                      Component props.
+ * @param {string}   props.value                Currently selected letter-spacing.
+ * @param {Function} props.onChange             Handles change in letter-spacing selection.
+ * @param {boolean}  props.__unstableInputWidth Input width to pass through to inner UnitControl.
+ *
+ * @return {WPElement}                          Letter-spacing control.
  */
-export default function LetterSpacingControl( { value, onChange } ) {
+export default function LetterSpacingControl( {
+	value,
+	onChange,
+	__unstableInputWidth = '60px',
+} ) {
 	const units = useCustomUnits( {
 		availableUnits: useSetting( 'spacing.units' ) || [ 'px', 'em', 'rem' ],
 		defaultValues: { px: '2', em: '.2', rem: '.2' },
@@ -29,7 +35,7 @@ export default function LetterSpacingControl( { value, onChange } ) {
 		<UnitControl
 			label={ __( 'Letter-spacing' ) }
 			value={ value }
-			__unstableInputWidth="60px"
+			__unstableInputWidth={ __unstableInputWidth }
 			units={ units }
 			onChange={ onChange }
 		/>

package/src/components/link-control/README.md

@@ -192,6 +192,13 @@ A `suggestion` should have the following shape:
 	)}
 />
 ```
+### renderControlBottom 
+
+-   Type: `Function`
+-   Required: No
+-   Default: null
+
+A render prop that can be used to pass optional controls to be rendered at the bottom of the component.
 
 # LinkControlSearchInput
 

package/src/components/link-control/index.js

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { noop } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice } from '@wordpress/components';
+import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
 import { keyboardReturn } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
@@ -93,6 +94,7 @@ import { DEFAULT_LINK_SETTINGS } from './constants';
  * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
  * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.
  * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.
+ * @property {Function}                   renderControlBottom        Optional controls to be rendered at the bottom of the component.
  */
 
 /**
@@ -119,6 +121,8 @@ function LinkControl( {
 	noURLSuggestion = false,
 	createSuggestionButtonText,
 	hasRichPreviews = false,
+	hasTextControl = false,
+	renderControlBottom = null,
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
@@ -126,8 +130,13 @@ function LinkControl( {
 
 	const isMounting = useRef( true );
 	const wrapperNode = useRef();
+	const textInputRef = useRef();
+
 	const [ internalInputValue, setInternalInputValue ] = useState(
-		( value && value.url ) || ''
+		value?.url || ''
+	);
+	const [ internalTextValue, setInternalTextValue ] = useState(
+		value?.title || ''
 	);
 	const currentInputValue = propInputValue || internalInputValue;
 	const [ isEditingLink, setIsEditingLink ] = useState(
@@ -149,22 +158,53 @@ function LinkControl( {
 	}, [ forceIsEditingLink ] );
 
 	useEffect( () => {
+		// We don't auto focus into the Link UI on mount
+		// because otherwise using the keyboard to select text
+		// *within* the link format is not possible.
 		if ( isMounting.current ) {
 			isMounting.current = false;
 			return;
 		}
+		// Unless we are mounting, we always want to focus either:
+		// - the URL input
+		// - the first focusable element in the Link UI.
+		// But in editing mode if there is a text input present then
+		// the URL input is at index 1. If not then it is at index 0.
+		const whichFocusTargetIndex = textInputRef?.current ? 1 : 0;
 
-		// When switching between editable and non editable LinkControl
-		// move focus to the first element to avoid focus loss.
+		// Scenario - when:
+		// - switching between editable and non editable LinkControl
+		// - clicking on a link
+		// ...then move focus to the *first* element to avoid focus loss
+		// and to ensure focus is *within* the Link UI.
 		const nextFocusTarget =
-			focus.focusable.find( wrapperNode.current )[ 0 ] ||
-			wrapperNode.current;
+			focus.focusable.find( wrapperNode.current )[
+				whichFocusTargetIndex
+			] || wrapperNode.current;
 
 		nextFocusTarget.focus();
 
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink ] );
 
+	useEffect( () => {
+		/**
+		 * If the value's `text` property changes then sync this
+		 * back up with state.
+		 */
+		if ( value?.title && value.title !== internalTextValue ) {
+			setInternalTextValue( value.title );
+		}
+
+		/**
+		 * Update the state value internalInputValue if the url value changes
+		 * for example when clicking on another anchor
+		 */
+		if ( value?.url ) {
+			setInternalInputValue( value.url );
+		}
+	}, [ value ] );
+
 	/**
 	 * Cancels editing state and marks that focus may need to be restored after
 	 * the next render, if focus was within the wrapper when editing finished.
@@ -182,22 +222,47 @@ function LinkControl( {
 	);
 
 	const handleSelectSuggestion = ( updatedValue ) => {
-		onChange( updatedValue );
+		onChange( {
+			...updatedValue,
+			title: internalTextValue || updatedValue?.title,
+		} );
 		stopEditing();
 	};
 
-	const handleSubmitButton = () => {
-		if ( currentInputValue !== value?.url ) {
-			onChange( { url: currentInputValue } );
+	const handleSubmit = () => {
+		if (
+			currentInputValue !== value?.url ||
+			internalTextValue !== value?.title
+		) {
+			onChange( {
+				url: currentInputValue,
+				title: internalTextValue,
+			} );
 		}
 		stopEditing();
 	};
 
+	const handleSubmitWithEnter = ( event ) => {
+		const { keyCode } = event;
+		if (
+			keyCode === ENTER &&
+			! currentInputIsEmpty // disallow submitting empty values.
+		) {
+			event.preventDefault();
+			handleSubmit();
+		}
+	};
+
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
 	const showSettingsDrawer = !! settings?.length;
 
+	// Only show text control once a URL value has been committed
+	// and it isn't just empty whitespace.
+	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
+	const showTextControl = value?.url?.trim()?.length > 0 && hasTextControl;
+
 	return (
 		<div
 			tabIndex={ -1 }
@@ -212,10 +277,26 @@ function LinkControl( {
 
 			{ ( isEditingLink || ! value ) && ! isCreatingPage && (
 				<>
-					<div className="block-editor-link-control__search-input-wrapper">
+					<div
+						className={ classnames( {
+							'block-editor-link-control__search-input-wrapper': true,
+							'has-text-control': showTextControl,
+						} ) }
+					>
+						{ showTextControl && (
+							<TextControl
+								ref={ textInputRef }
+								className="block-editor-link-control__field block-editor-link-control__text-content"
+								label="Text"
+								value={ internalTextValue }
+								onChange={ setInternalTextValue }
+								onKeyDown={ handleSubmitWithEnter }
+							/>
+						) }
+
 						<LinkControlSearchInput
 							currentLink={ value }
-							className="block-editor-link-control__search-input"
+							className="block-editor-link-control__field block-editor-link-control__search-input"
 							placeholder={ searchInputPlaceholder }
 							value={ currentInputValue }
 							withCreateSuggestion={ withCreateSuggestion }
@@ -230,20 +311,11 @@ function LinkControl( {
 							createSuggestionButtonText={
 								createSuggestionButtonText
 							}
+							useLabel={ showTextControl }
 						>
 							<div className="block-editor-link-control__search-actions">
 								<Button
-									onClick={ () => handleSubmitButton() }
-									onKeyDown={ ( event ) => {
-										const { keyCode } = event;
-										if (
-											keyCode === ENTER &&
-											! currentInputIsEmpty // disallow submitting empty values.
-										) {
-											event.preventDefault();
-											handleSubmitButton();
-										}
-									} }
+									onClick={ handleSubmit }
 									label={ __( 'Submit' ) }
 									icon={ keyboardReturn }
 									className="block-editor-link-control__search-submit"
@@ -270,28 +342,21 @@ function LinkControl( {
 					value={ value }
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
+					hasUnlinkControl={ shownUnlinkControl }
+					onRemove={ onRemove }
 				/>
 			) }
 
-			{ ( showSettingsDrawer || shownUnlinkControl ) && (
+			{ showSettingsDrawer && (
 				<div className="block-editor-link-control__tools">
 					<LinkControlSettingsDrawer
 						value={ value }
 						settings={ settings }
 						onChange={ onChange }
 					/>
-					{ shownUnlinkControl && (
-						<Button
-							className="block-editor-link-control__unlink"
-							isDestructive
-							variant="link"
-							onClick={ onRemove }
-						>
-							{ __( 'Unlink' ) }
-						</Button>
-					) }
 				</div>
 			) }
+			{ renderControlBottom && renderControlBottom() }
 		</div>
 	);
 }

package/src/components/link-control/link-preview.js

@@ -13,7 +13,8 @@ import {
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
-import { Icon, globe, info } from '@wordpress/icons';
+import { Icon, globe, info, linkOff, edit } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -26,6 +27,8 @@ export default function LinkPreview( {
 	value,
 	onEditClick,
 	hasRichPreviews = false,
+	hasUnlinkControl = false,
+	onRemove,
 } ) {
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
@@ -39,6 +42,8 @@ export default function LinkPreview( {
 		( value && filterURLForDisplay( safeDecodeURI( value.url ), 16 ) ) ||
 		'';
 
+	const displayTitle = richData?.title || value?.title || displayURL;
+
 	const isEmptyURL = ! value.url.length;
 
 	let icon;
@@ -82,9 +87,7 @@ export default function LinkPreview( {
 									className="block-editor-link-control__search-item-title"
 									href={ value.url }
 								>
-									{ richData?.title ||
-										value?.title ||
-										displayURL }
+									{ stripHTML( displayTitle ) }
 								</ExternalLink>
 
 								{ value?.url && (
@@ -102,12 +105,21 @@ export default function LinkPreview( {
 				</span>
 
 				<Button
-					variant="secondary"
-					onClick={ () => onEditClick() }
+					icon={ edit }
+					label={ __( 'Edit' ) }
 					className="block-editor-link-control__search-item-action"
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					onClick={ onEditClick }
+					iconSize={ 24 }
+				/>
+				{ hasUnlinkControl && (
+					<Button
+						icon={ linkOff }
+						label={ __( 'Unlink' ) }
+						className="block-editor-link-control__search-item-action block-editor-link-control__unlink"
+						onClick={ onRemove }
+						iconSize={ 24 }
+					/>
+				) }
 				<ViewerSlot fillProps={ value } />
 			</div>
 

package/src/components/link-control/search-input.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop, omit } from 'lodash';
-
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
@@ -45,6 +45,7 @@ const LinkControlSearchInput = forwardRef(
 			suggestionsQuery = {},
 			withURLSuggestion = true,
 			createSuggestionButtonText,
+			useLabel = false,
 		},
 		ref
 	) => {
@@ -117,10 +118,15 @@ const LinkControlSearchInput = forwardRef(
 			}
 		};
 
+		const inputClasses = classnames( className, {
+			'has-no-label': ! useLabel,
+		} );
+
 		return (
-			<div>
+			<div className="block-editor-link-control__search-input-container">
 				<URLInput
-					className={ className }
+					label={ useLabel ? 'URL' : undefined }
+					className={ inputClasses }
 					value={ value }
 					onChange={ onInputChange }
 					placeholder={ placeholder ?? __( 'Search or type url' ) }