@wordpress/block-editor 10.5.0 → 11.1.0

package/src/components/off-canvas-editor/style.scss

@@ -1,397 +1,30 @@
-.block-editor-list-view-tree {
-	width: 100%;
-	border-collapse: collapse;
+.offcanvas-editor__appender .block-editor-inserter__toggle {
+	background-color: #1e1e1e;
+	color: #fff;
+	margin: $grid-unit-10 0 0 24px;
+	border-radius: 2px;
+	height: 24px;
+	min-width: 24px;
 	padding: 0;
-	margin: 0;
 
-	// Move upwards when in modal.
-	.components-modal__content & {
-		margin: (-$grid-unit-15) (-$grid-unit-15 * 0.5) 0;
-		width: calc(100% + #{ $grid-unit-15 });
-	}
-}
-
-.block-editor-list-view-leaf {
-	// Use position relative for row animation.
-	position: relative;
-
-	// The background has to be applied to the td, not tr, or border-radius won't work.
-	&.is-selected td {
+	&:hover,
+	&:focus {
 		background: var(--wp-admin-theme-color);
-	}
-	&.is-selected .block-editor-list-view-block-contents,
-	&.is-selected .components-button.has-icon {
-		color: $white;
-	}
-	&.is-selected .block-editor-list-view-block-contents {
-		// Hide selection styles while a user is dragging blocks/files etc.
-		.is-dragging-components-draggable & {
-			background: none;
-			color: $gray-900;
-		}
-	}
-	&.is-selected .block-editor-list-view-block-contents:focus {
-		&::after {
-			box-shadow:
-				inset 0 0 0 1px $white,
-				0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		}
-	}
-	&.is-selected .block-editor-list-view-block__menu:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $white;
-	}
-
-	&.is-dragging {
-		display: none;
-	}
-
-	// Border radius for corners of the selected item.
-	&.is-first-selected td:first-child {
-		border-top-left-radius: $radius-block-ui;
-	}
-	&.is-first-selected td:last-child {
-		border-top-right-radius: $radius-block-ui;
-	}
-	&.is-last-selected td:first-child {
-		border-bottom-left-radius: $radius-block-ui;
-	}
-	&.is-last-selected td:last-child {
-		border-bottom-right-radius: $radius-block-ui;
-	}
-	&.is-branch-selected:not(.is-selected) {
-		// Lighten a CSS variable without introducing a new SASS variable
-		background:
-			linear-gradient(transparentize($white, 0.1), transparentize($white, 0.1)),
-			linear-gradient(var(--wp-admin-theme-color), var(--wp-admin-theme-color));
-	}
-	&.is-branch-selected.is-first-selected td:first-child {
-		border-top-left-radius: $radius-block-ui;
-	}
-	&.is-branch-selected.is-first-selected td:last-child {
-		border-top-right-radius: $radius-block-ui;
-	}
-	&[aria-expanded="false"] {
-		&.is-branch-selected.is-first-selected td:first-child {
-			border-top-left-radius: $radius-block-ui;
-		}
-		&.is-branch-selected.is-first-selected td:last-child {
-			border-top-right-radius: $radius-block-ui;
-		}
-		&.is-branch-selected.is-last-selected td:first-child {
-			border-bottom-left-radius: $radius-block-ui;
-		}
-		&.is-branch-selected.is-last-selected td:last-child {
-			border-bottom-right-radius: $radius-block-ui;
-		}
-	}
-	&.is-branch-selected:not(.is-selected) td {
-		border-radius: 0;
-	}
-
-
-	// List View renders a fixed number of items and relies on each item having a fixed height of 36px.
-	// If this value changes, we should also change the itemHeight value set in useFixedWindowList.
-	// See: https://github.com/WordPress/gutenberg/pull/35230 for additional context.
-	.block-editor-list-view-block-contents {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		height: auto;
-		padding: ($grid-unit-15 * 0.5) $grid-unit-05 ($grid-unit-15 * 0.5) 0;
-		text-align: left;
-		color: $gray-900;
-		border-radius: $radius-block-ui;
-		position: relative;
-		white-space: nowrap;
-
-		&.is-dropping-before::before {
-			content: "";
-			position: absolute;
-			pointer-events: none;
-			transition: border-color 0.1s linear, border-style 0.1s linear, box-shadow 0.1s linear;
-			top: -2px;
-			right: 0;
-			left: 0;
-			border-top: 4px solid var(--wp-admin-theme-color);
-		}
-
-		.components-modal__content & {
-			padding-left: 0;
-			padding-right: 0;
-		}
-	}
-
-	.block-editor-list-view-block-contents:focus {
-		box-shadow: none;
-
-		&::after {
-			content: "";
-			position: absolute;
-			top: 0;
-			right: -(24px + 5px); // Icon size + padding.
-			bottom: 0;
-			left: 0;
-			border-radius: inherit;
-			box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-			z-index: 2;
-			pointer-events: none;
-
-			// Hide focus styles while a user is dragging blocks/files etc.
-			.is-dragging-components-draggable & {
-				box-shadow: none;
-			}
-		}
-	}
-	// Fix focus styling width when one row has fewer cells.
-	&.has-single-cell .block-editor-list-view-block-contents:focus::after {
-		right: 0;
-	}
-
-	.block-editor-list-view-block__menu:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
-		z-index: 1;
-
-		// Hide focus styles while a user is dragging blocks/files etc.
-		.is-dragging-components-draggable & {
-			box-shadow: none;
-		}
-	}
-
-	&.is-visible .block-editor-list-view-block-contents {
-		opacity: 1;
-		@include edit-post__fade-in-animation;
-	}
-
-	.block-editor-block-icon {
-		align-self: flex-start;
-		margin-right: $grid-unit-10;
-		width: $icon-size;
-	}
-
-	.block-editor-list-view-block__menu-cell,
-	.block-editor-list-view-block__mover-cell,
-	.block-editor-list-view-block__contents-cell {
-		padding-top: 0;
-		padding-bottom: 0;
-	}
-
-	.block-editor-list-view-block__menu-cell,
-	.block-editor-list-view-block__mover-cell {
-		line-height: 0;
-		width: $button-size;
-		vertical-align: middle;
-		@include reduce-motion("transition");
-
-		> * {
-			opacity: 0;
-		}
-
-		// Show on hover, visible, and show above to keep the hit area size.
-		&:hover,
-		&.is-visible {
-			position: relative;
-			z-index: 1;
-
-			> * {
-				opacity: 1;
-				@include edit-post__fade-in-animation;
-			}
-		}
-
-		&,
-		.components-button.has-icon {
-			width: 24px;
-			min-width: 24px;
-			padding: 0;
-		}
-	}
-
-	.block-editor-list-view-block__menu-cell {
-		padding-right: $grid-unit-05;
-
-		.components-button.has-icon {
-			height: 24px;
-		}
-	}
-
-	.block-editor-list-view-block__mover-cell-alignment-wrapper {
-		display: flex;
-		height: 100%;
-		flex-direction: column;
-		align-items: center;
-	}
-
-	// Keep the tap target large but the focus target small.
-	.block-editor-block-mover-button {
-		position: relative;
-		width: $button-size;
-		height: $button-size-small;
-
-		// Position the icon.
-		svg {
-			position: relative;
-			height: $button-size-small;
-		}
-
-		&.is-up-button {
-			margin-top: -$grid-unit-15 * 0.5;
-			align-items: flex-end;
-			svg {
-				bottom: -$grid-unit-05;
-			}
-		}
-
-		&.is-down-button {
-			margin-bottom: -$grid-unit-15 * 0.5;
-			align-items: flex-start;
-			svg {
-				top: -$grid-unit-05;
-			}
-		}
-
-		// Tweak size and position of focus ring.
-		&::before {
-			height: 16px;
-			min-width: 100%;
-			left: 0;
-			right: 0;
-		}
-	}
-
-	.block-editor-inserter__toggle {
-		background: $gray-900;
-		color: $white;
-		height: $grid-unit-30;
-		margin: 6px 6px 6px 1px;
-		min-width: $grid-unit-30;
-
-		&:active {
-			color: $white;
-		}
-	}
-
-	.block-editor-list-view-block-select-button__label-wrapper {
-		min-width: 120px;
-	}
-
-	.block-editor-list-view-block-select-button__title {
-		flex: 1;
-		position: relative;
-
-		.components-truncate {
-			position: absolute;
-			width: 100%;
-			transform: translateY(-50%);
-		}
-	}
-
-	.block-editor-list-view-block-select-button__anchor-wrapper {
-		position: relative;
-		max-width: min(110px, 40%);
-		width: 100%;
-	}
-
-	.block-editor-list-view-block-select-button__anchor {
-		position: absolute;
-		right: 0;
-		transform: translateY(-50%);
-		background: rgba($black, 0.1);
-		border-radius: $radius-block-ui;
-		padding: 2px 6px;
-		max-width: 100%;
-		box-sizing: border-box;
-	}
-
-	&.is-selected .block-editor-list-view-block-select-button__anchor {
-		background: rgba($black, 0.3);
-	}
-
-	.block-editor-list-view-block-select-button__lock {
-		line-height: 0;
-		width: 24px;
-		min-width: 24px;
-		margin-left: auto;
-		padding: 0;
-		vertical-align: middle;
+		color: #fff;
 	}
 }
 
-.block-editor-list-view-block-select-button__description,
-.block-editor-list-view-appender__description {
-	display: none;
+.offcanvas-editor-list-view-tree-wrapper {
+	max-width: 100%;
+	overflow-x: auto;
 }
 
-.block-editor-list-view-block__contents-cell,
-.block-editor-list-view-appender__cell {
-	.block-editor-list-view-block__contents-container,
-	.block-editor-list-view-appender__container {
-		display: flex;
-	}
-}
-
-// Chevron container metrics.
-.block-editor-list-view__expander {
-	height: $icon-size;
-	margin-left: $grid-unit-05;
-	width: $icon-size;
-}
-
-// First level of indentation is aria-level 2, max indent is 8.
-// Indent is a full icon size, plus 4px which optically aligns child icons to the text label above.
-$block-navigation-max-indent: 8;
-.block-editor-list-view-leaf[aria-level] .block-editor-list-view__expander {
-	margin-left: ( $icon-size ) * $block-navigation-max-indent + 4 * ( $block-navigation-max-indent - 1 );
-}
-
-.block-editor-list-view-leaf:not([aria-level="1"]) {
-	.block-editor-list-view__expander {
-		margin-right: 4px;
-	}
-}
-
-@for $i from 0 to $block-navigation-max-indent {
-	.block-editor-list-view-leaf[aria-level="#{ $i + 1 }"] .block-editor-list-view__expander {
-		@if $i - 1 >= 0 {
-			margin-left: ( $icon-size * $i ) + 4 * ($i - 1);
-		}
-		@else {
-			margin-left: ( $icon-size * $i );
-		}
-	}
-}
-
-.block-editor-list-view-leaf .block-editor-list-view__expander {
-	visibility: hidden;
-}
-
-// Point downwards when open.
-.block-editor-list-view-leaf[aria-expanded="true"] .block-editor-list-view__expander svg {
-	visibility: visible;
-	transition: transform 0.2s ease;
-	transform: rotate(90deg);
-	@include reduce-motion("transition");
-}
-
-// Point rightwards when closed
-.block-editor-list-view-leaf[aria-expanded="false"] .block-editor-list-view__expander svg {
-	visibility: visible;
-	transform: rotate(0deg);
-	transition: transform 0.2s ease;
-	@include reduce-motion("transition");
-}
-
-.block-editor-list-view-drop-indicator {
-	pointer-events: none;
-
-	.block-editor-list-view-drop-indicator__line {
-		background: var(--wp-admin-theme-color);
-		height: $border-width;
-	}
+.offcanvas-editor-list-view-leaf {
+	display: block;
+	// sidebar width - tab panel padding
+	max-width: $sidebar-width - (2 * $grid-unit-20);
 }
 
-.block-editor-list-view-placeholder {
-	padding: 0;
-	margin: 0;
-	height: 36px;
+.offcanvas-editor-list-view-is-empty {
+	margin-left: $grid-unit-20;
 }
-

package/src/components/off-canvas-editor/test/use-inserted-block.js

@@ -0,0 +1,108 @@
+/**
+ * Internal dependencies
+ */
+import { useInsertedBlock } from '../use-inserted-block';
+
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react';
+
+jest.mock( '@wordpress/data/src/components/use-select', () => {
+	// This allows us to tweak the returned value on each test.
+	const mock = jest.fn();
+	return mock;
+} );
+
+jest.mock( '@wordpress/data/src/components/use-dispatch', () => ( {
+	useDispatch: jest.fn(),
+} ) );
+
+describe( 'useInsertedBlock', () => {
+	const mockUpdateBlockAttributes = jest.fn();
+
+	it( 'returns undefined values when called without a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () => useInsertedBlock() );
+
+		const {
+			insertedBlockName,
+			insertedBlockAttributes,
+			setInsertedBlockAttributes,
+		} = result.current;
+
+		expect( insertedBlockName ).toBeUndefined();
+		expect( insertedBlockAttributes ).toBeUndefined();
+		expect(
+			setInsertedBlockAttributes( { 'some-attribute': 'new-value' } )
+		).toBeUndefined();
+	} );
+
+	it( 'returns name and attributes when called with a block clientId', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const { result } = renderHook( () =>
+			useInsertedBlock( 'some-client-id-here' )
+		);
+
+		const { insertedBlockName, insertedBlockAttributes } = result.current;
+
+		expect( insertedBlockName ).toBe( 'core/navigation-link' );
+		expect( insertedBlockAttributes ).toEqual( {
+			'some-attribute': 'some-value',
+		} );
+	} );
+
+	it( 'dispatches updateBlockAttributes on provided client ID with new attributes when setInsertedBlockAttributes is called', () => {
+		useSelect.mockImplementation( () => ( {
+			insertedBlockAttributes: {
+				'some-attribute': 'some-value',
+			},
+			insertedBlockName: 'core/navigation-link',
+		} ) );
+
+		useDispatch.mockImplementation( () => ( {
+			updateBlockAttributes: mockUpdateBlockAttributes,
+		} ) );
+
+		const clientId = '123456789';
+
+		const { result } = renderHook( () => useInsertedBlock( clientId ) );
+
+		const { setInsertedBlockAttributes } = result.current;
+
+		act( () => {
+			setInsertedBlockAttributes( {
+				'some-attribute': 'new-value',
+			} );
+		} );
+
+		expect( mockUpdateBlockAttributes ).toHaveBeenCalledWith( clientId, {
+			'some-attribute': 'new-value',
+		} );
+	} );
+} );

package/src/components/off-canvas-editor/update-attributes.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { escapeHTML } from '@wordpress/escape-html';
+import { safeDecodeURI } from '@wordpress/url';
+
+/**
+ * @typedef {'post-type'|'custom'|'taxonomy'|'post-type-archive'} WPNavigationLinkKind
+ */
+/**
+ * Navigation Link Block Attributes
+ *
+ * @typedef {Object} WPNavigationLinkBlockAttributes
+ *
+ * @property {string}               [label]         Link text.
+ * @property {WPNavigationLinkKind} [kind]          Kind is used to differentiate between term and post ids to check post draft status.
+ * @property {string}               [type]          The type such as post, page, tag, category and other custom types.
+ * @property {string}               [rel]           The relationship of the linked URL.
+ * @property {number}               [id]            A post or term id.
+ * @property {boolean}              [opensInNewTab] Sets link target to _blank when true.
+ * @property {string}               [url]           Link href.
+ * @property {string}               [title]         Link title attribute.
+ */
+/**
+ * Link Control onChange handler that updates block attributes when a setting is changed.
+ *
+ * @param {Object}                          updatedValue    New block attributes to update.
+ * @param {Function}                        setAttributes   Block attribute update function.
+ * @param {WPNavigationLinkBlockAttributes} blockAttributes Current block attributes.
+ *
+ */
+
+export const updateAttributes = (
+	updatedValue = {},
+	setAttributes,
+	blockAttributes = {}
+) => {
+	const {
+		label: originalLabel = '',
+		kind: originalKind = '',
+		type: originalType = '',
+	} = blockAttributes;
+
+	const {
+		title: newLabel = '', // the title of any provided Post.
+		url: newUrl = '',
+		opensInNewTab,
+		id,
+		kind: newKind = originalKind,
+		type: newType = originalType,
+	} = updatedValue;
+
+	const newLabelWithoutHttp = newLabel.replace( /http(s?):\/\//gi, '' );
+	const newUrlWithoutHttp = newUrl.replace( /http(s?):\/\//gi, '' );
+
+	const useNewLabel =
+		newLabel &&
+		newLabel !== originalLabel &&
+		// LinkControl without the title field relies
+		// on the check below. Specifically, it assumes that
+		// the URL is the same as a title.
+		// This logic a) looks suspicious and b) should really
+		// live in the LinkControl and not here. It's a great
+		// candidate for future refactoring.
+		newLabelWithoutHttp !== newUrlWithoutHttp;
+
+	// Unfortunately this causes the escaping model to be inverted.
+	// The escaped content is stored in the block attributes (and ultimately in the database),
+	// and then the raw data is "recovered" when outputting into the DOM.
+	// It would be preferable to store the **raw** data in the block attributes and escape it in JS.
+	// Why? Because there isn't one way to escape data. Depending on the context, you need to do
+	// different transforms. It doesn't make sense to me to choose one of them for the purposes of storage.
+	// See also:
+	// - https://github.com/WordPress/gutenberg/pull/41063
+	// - https://github.com/WordPress/gutenberg/pull/18617.
+	const label = useNewLabel
+		? escapeHTML( newLabel )
+		: originalLabel || escapeHTML( newUrlWithoutHttp );
+
+	// In https://github.com/WordPress/gutenberg/pull/24670 we decided to use "tag" in favor of "post_tag"
+	const type = newType === 'post_tag' ? 'tag' : newType.replace( '-', '_' );
+
+	const isBuiltInType =
+		[ 'post', 'page', 'tag', 'category' ].indexOf( type ) > -1;
+
+	const isCustomLink =
+		( ! newKind && ! isBuiltInType ) || newKind === 'custom';
+	const kind = isCustomLink ? 'custom' : newKind;
+
+	setAttributes( {
+		// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
+		...( newUrl && { url: encodeURI( safeDecodeURI( newUrl ) ) } ),
+		...( label && { label } ),
+		...( undefined !== opensInNewTab && { opensInNewTab } ),
+		...( id && Number.isInteger( id ) && { id } ),
+		...( kind && { kind } ),
+		...( type && type !== 'URL' && { type } ),
+	} );
+};

package/src/components/off-canvas-editor/use-inserted-block.js

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+
+export const useInsertedBlock = ( insertedBlockClientId ) => {
+	const { insertedBlockAttributes, insertedBlockName } = useSelect(
+		( select ) => {
+			const { getBlockName, getBlockAttributes } =
+				select( blockEditorStore );
+
+			return {
+				insertedBlockAttributes: getBlockAttributes(
+					insertedBlockClientId
+				),
+				insertedBlockName: getBlockName( insertedBlockClientId ),
+			};
+		},
+		[ insertedBlockClientId ]
+	);
+
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const setInsertedBlockAttributes = ( _updatedAttributes ) => {
+		if ( ! insertedBlockClientId ) return;
+		updateBlockAttributes( insertedBlockClientId, _updatedAttributes );
+	};
+
+	if ( ! insertedBlockClientId ) {
+		return {
+			insertedBlockAttributes: undefined,
+			insertedBlockName: undefined,
+			setInsertedBlockAttributes,
+		};
+	}
+
+	return {
+		insertedBlockAttributes,
+		insertedBlockName,
+		setInsertedBlockAttributes,
+	};
+};