@wordpress/block-editor 7.0.4 → 8.0.0

package/src/components/link-control/style.scss

@@ -30,24 +30,46 @@ $preview-image-height: 140px;
 	position: relative;
 }
 
-// LinkControl popover.
-.block-editor-link-control .block-editor-link-control__search-input {
-	// Specificity override.
-	&.block-editor-link-control__search-input input[type="text"] {
+// Provides positioning context for search actions
+.block-editor-link-control__search-input-container {
+	position: relative;
+}
+
+// If the input doesn't have a visible label then
+// we need to expand the input itself to occupy
+// the full available horizontal space.
+.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input {
+	flex: 1;
+}
+
+.block-editor-link-control__field {
+	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
+
+	// Element wrapping the label and input.
+	> .components-base-control__field {
+		display: flex;
+		align-items: center;
+		margin: 0;
+	}
+
+	.components-base-control__label {
+		margin-right: $grid-unit-20;
+		margin-bottom: 0;
+	}
+
+	input[type="text"],
+	// Specificity overide of URLInput defaults.
+	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
 		width: calc(100% - #{$grid-unit-20*2});
 		display: block;
 		padding: 11px $grid-unit-20;
 		padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
-		margin: $grid-unit-20;
+		margin: 0;
 		position: relative;
 		border: 1px solid $gray-300;
 		border-radius: $radius-block-ui;
 	}
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-link-control__search-error {
@@ -61,14 +83,13 @@ $preview-image-height: 140px;
 	 * when suggestions are rendered.
 	 *
 	 * Compensate for:
-	 *  - Input margin ($grid-unit-20)
 	 *  - Border (1px)
 	 *  - Vertically, for the difference in height between the input (40px) and
 	 *    the icon buttons.
 	 *  - Horizontally, pad to the minimum of: default input padding, or the
 	 *    equivalent of the vertical padding.
 	 */
-	top: $grid-unit-20 + 1px + ( ( 40px - $button-size ) * 0.5 );
+	top: 1px + ( ( 40px - $button-size ) * 0.5 );
 	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) * 0.5);
 }
 
@@ -171,7 +192,6 @@ $preview-image-height: 140px;
 		flex-direction: row;
 		align-items: flex-start;
 		margin-right: $grid-unit-10;
-		overflow: hidden;
 
 		// Force text to wrap to improve UX when encountering long lines
 		// of text, particular those with no spaces.
@@ -189,10 +209,6 @@ $preview-image-height: 140px;
 		align-items: center;
 	}
 
-	.block-editor-link-control__search-item-details {
-		overflow: hidden; // clip to force text ellipsis.
-	}
-
 	.block-editor-link-control__search-item-icon {
 		position: relative;
 		top: 0.2em;

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

@@ -202,9 +202,9 @@ describe( 'Basic rendering', () => {
 			} );
 
 			// Click the "Edit" button to trigger into the editing mode.
-			const editButton = Array.from(
-				container.querySelectorAll( 'button' )
-			).find( ( button ) => button.innerHTML.includes( 'Edit' ) );
+			const editButton = queryByRole( container, 'button', {
+				name: 'Edit',
+			} );
 
 			act( () => {
 				Simulate.click( editButton );
@@ -1653,7 +1653,7 @@ describe( 'Selecting links', () => {
 					);
 				}
 
-				// Commit the selected item as the current link
+				// Submit the selected item as the current link
 				act( () => {
 					Simulate.keyDown( searchInput, { keyCode: ENTER } );
 				} );
@@ -2274,3 +2274,178 @@ describe( 'Rich link previews', () => {
 		mockFetchRichUrlData = undefined;
 	} );
 } );
+
+describe( 'Controlling link title text', () => {
+	const selectedLink = first( fauxEntitySuggestions );
+
+	it( 'should not show a means to alter the link title text by default', async () => {
+		act( () => {
+			render(
+				<LinkControl value={ selectedLink } forceIsEditingLink />,
+				container
+			);
+		} );
+
+		expect(
+			queryByRole( container, 'textbox', { name: 'Text' } )
+		).toBeFalsy();
+	} );
+
+	it.each( [ null, undefined, '   ' ] )(
+		'should not show the link title text input when the URL is `%s`',
+		async ( urlValue ) => {
+			const selectedLinkWithoutURL = {
+				...first( fauxEntitySuggestions ),
+				url: urlValue,
+			};
+
+			act( () => {
+				render(
+					<LinkControl
+						value={ selectedLinkWithoutURL }
+						forceIsEditingLink
+						hasTextControl
+					/>,
+					container
+				);
+			} );
+
+			expect(
+				queryByRole( container, 'textbox', { name: 'Text' } )
+			).toBeFalsy();
+		}
+	);
+
+	it( 'should show a text input to alter the link title text when hasTextControl prop is truthy', async () => {
+		act( () => {
+			render(
+				<LinkControl
+					value={ selectedLink }
+					forceIsEditingLink
+					hasTextControl
+				/>,
+				container
+			);
+		} );
+
+		expect(
+			queryByRole( container, 'textbox', { name: 'Text' } )
+		).toBeTruthy();
+	} );
+
+	it.each( [
+		[ '', 'Testing' ],
+		[ '(with leading and traling whitespace)', '    Testing    ' ],
+		[
+			// Note: link control should always preserve the original value.
+			// The consumer is responsible for filtering or otherwise handling the value.
+			'(when containing HTML)',
+			'<strong>Yes this</strong> <em>is</em> expected behaviour',
+		],
+	] )(
+		"should ensure text input reflects the current link value's `title` property %s",
+		async ( _unused, titleValue ) => {
+			const linkWithTitle = { ...selectedLink, title: titleValue };
+			act( () => {
+				render(
+					<LinkControl
+						value={ linkWithTitle }
+						forceIsEditingLink
+						hasTextControl
+					/>,
+					container
+				);
+			} );
+
+			const textInput = queryByRole( container, 'textbox', {
+				name: 'Text',
+			} );
+
+			expect( textInput.value ).toEqual( titleValue );
+		}
+	);
+
+	it( "should ensure title value matching the text input's current value is included in onChange handler value on submit", async () => {
+		const mockOnChange = jest.fn();
+		const textValue = 'My new text value';
+
+		act( () => {
+			render(
+				<LinkControl
+					value={ selectedLink }
+					forceIsEditingLink
+					hasTextControl
+					onChange={ mockOnChange }
+				/>,
+				container
+			);
+		} );
+
+		let textInput = queryByRole( container, 'textbox', { name: 'Text' } );
+
+		act( () => {
+			Simulate.change( textInput, {
+				target: { value: textValue },
+			} );
+		} );
+
+		textInput = queryByRole( container, 'textbox', { name: 'Text' } );
+
+		expect( textInput.value ).toEqual( textValue );
+
+		const submitButton = queryByRole( container, 'button', {
+			name: 'Submit',
+		} );
+
+		act( () => {
+			Simulate.click( submitButton );
+		} );
+
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: textValue,
+			} )
+		);
+	} );
+
+	it( 'should allow `ENTER` keypress within the text field to trigger submission of value', async () => {
+		const textValue = 'My new text value';
+		const mockOnChange = jest.fn();
+		act( () => {
+			render(
+				<LinkControl
+					value={ selectedLink }
+					forceIsEditingLink
+					hasTextControl
+					onChange={ mockOnChange }
+				/>,
+				container
+			);
+		} );
+
+		const textInput = queryByRole( container, 'textbox', { name: 'Text' } );
+
+		expect( textInput ).toBeTruthy();
+
+		act( () => {
+			Simulate.change( textInput, {
+				target: { value: textValue },
+			} );
+		} );
+
+		// Attempt to submit the empty search value in the input.
+		act( () => {
+			Simulate.keyDown( textInput, { keyCode: ENTER } );
+		} );
+
+		expect( mockOnChange ).toHaveBeenCalledWith( {
+			title: textValue,
+			url: selectedLink.url,
+		} );
+
+		// The text input should not be showing as the form is submitted.
+		expect(
+			queryByRole( container, 'textbox', { name: 'Text' } )
+		).toBeFalsy();
+	} );
+} );

package/src/components/list-view/block.js

@@ -11,7 +11,13 @@ import {
 	__experimentalTreeGridItem as TreeGridItem,
 } from '@wordpress/components';
 import { moreVertical } from '@wordpress/icons';
-import { useState, useRef, useEffect } from '@wordpress/element';
+import {
+	useState,
+	useRef,
+	useEffect,
+	useCallback,
+	memo,
+} from '@wordpress/element';
 import { useDispatch } from '@wordpress/data';
 
 /**
@@ -27,14 +33,12 @@ import BlockSettingsDropdown from '../block-settings-menu/block-settings-dropdow
 import { useListViewContext } from './context';
 import { store as blockEditorStore } from '../../store';
 
-export default function ListViewBlock( {
+function ListViewBlock( {
 	block,
-	isSelected,
 	isDragged,
+	isSelected,
 	isBranchSelected,
-	isLastOfSelectedBranch,
-	onClick,
-	onToggleExpanded,
+	selectBlock,
 	position,
 	level,
 	rowCount,
@@ -49,17 +53,22 @@ export default function ListViewBlock( {
 
 	const { toggleBlockHighlight } = useDispatch( blockEditorStore );
 
+	const {
+		__experimentalFeatures: withExperimentalFeatures,
+		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
+		__experimentalHideContainerBlockActions: hideContainerBlockActions,
+		isTreeGridMounted,
+		expand,
+		collapse,
+	} = useListViewContext();
+
 	const hasSiblings = siblingBlockCount > 0;
 	const hasRenderedMovers = showBlockMovers && hasSiblings;
 	const moverCellClassName = classnames(
 		'block-editor-list-view-block__mover-cell',
 		{ 'is-visible': isHovered || isSelected }
 	);
-	const {
-		__experimentalFeatures: withExperimentalFeatures,
-		__experimentalPersistentListViewFeatures: withExperimentalPersistentListViewFeatures,
-		isTreeGridMounted,
-	} = useListViewContext();
+
 	const listViewBlockSettingsClassName = classnames(
 		'block-editor-list-view-block__menu-cell',
 		{ 'is-visible': isHovered || isSelected }
@@ -82,23 +91,56 @@ export default function ListViewBlock( {
 		? toggleBlockHighlight
 		: () => {};
 
-	const onMouseEnter = () => {
+	const onMouseEnter = useCallback( () => {
 		setIsHovered( true );
 		highlightBlock( clientId, true );
-	};
-	const onMouseLeave = () => {
+	}, [ clientId, setIsHovered, highlightBlock ] );
+	const onMouseLeave = useCallback( () => {
 		setIsHovered( false );
 		highlightBlock( clientId, false );
-	};
+	}, [ clientId, setIsHovered, highlightBlock ] );
+
+	const selectEditorBlock = useCallback(
+		( event ) => {
+			event.stopPropagation();
+			selectBlock( clientId );
+		},
+		[ clientId, selectBlock ]
+	);
+
+	const toggleExpanded = useCallback(
+		( event ) => {
+			event.stopPropagation();
+			if ( isExpanded === true ) {
+				collapse( clientId );
+			} else if ( isExpanded === false ) {
+				expand( clientId );
+			}
+		},
+		[ clientId, expand, collapse, isExpanded ]
+	);
+
+	const showBlockActions =
+		withExperimentalFeatures &&
+		//hide actions for blocks like core/widget-areas
+		( ! hideContainerBlockActions ||
+			( hideContainerBlockActions && level > 1 ) );
+
+	const hideBlockActions = withExperimentalFeatures && ! showBlockActions;
+
+	let colSpan;
+	if ( hasRenderedMovers ) {
+		colSpan = 2;
+	} else if ( hideBlockActions ) {
+		colSpan = 3;
+	}
 
 	const classes = classnames( {
 		'is-selected': isSelected,
 		'is-branch-selected':
 			withExperimentalPersistentListViewFeatures && isBranchSelected,
-		'is-last-of-selected-branch':
-			withExperimentalPersistentListViewFeatures &&
-			isLastOfSelectedBranch,
 		'is-dragging': isDragged,
+		'has-single-cell': hideBlockActions,
 	} );
 
 	return (
@@ -118,15 +160,15 @@ export default function ListViewBlock( {
 		>
 			<TreeGridCell
 				className="block-editor-list-view-block__contents-cell"
-				colSpan={ hasRenderedMovers ? undefined : 2 }
+				colSpan={ colSpan }
 				ref={ cellRef }
 			>
 				{ ( { ref, tabIndex, onFocus } ) => (
 					<div className="block-editor-list-view-block__contents-container">
 						<ListViewBlockContents
 							block={ block }
-							onClick={ onClick }
-							onToggleExpanded={ onToggleExpanded }
+							onClick={ selectEditorBlock }
+							onToggleExpanded={ toggleExpanded }
 							isSelected={ isSelected }
 							position={ position }
 							siblingBlockCount={ siblingBlockCount }
@@ -170,7 +212,7 @@ export default function ListViewBlock( {
 				</>
 			) }
 
-			{ withExperimentalFeatures && (
+			{ showBlockActions && (
 				<TreeGridCell className={ listViewBlockSettingsClassName }>
 					{ ( { ref, tabIndex, onFocus } ) => (
 						<BlockSettingsDropdown
@@ -183,7 +225,7 @@ export default function ListViewBlock( {
 								onFocus,
 							} }
 							disableOpenOnArrowDown
-							__experimentalSelectBlock={ onClick }
+							__experimentalSelectBlock={ selectEditorBlock }
 						/>
 					) }
 				</TreeGridCell>
@@ -191,3 +233,5 @@ export default function ListViewBlock( {
 		</ListViewLeaf>
 	);
 }
+
+export default memo( ListViewBlock );