@wordpress/block-editor 10.5.0 → 11.0.0

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

@@ -1,397 +1,26 @@
-.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 28px;
+	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;
-	}
+.offcanvas-editor-list-view-leaf {
+	display: block;
+	// sidebar width - tab panel padding
+	max-width: $sidebar-width - (2 * $grid-unit-20);
 }
-
-// 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;
-	}
-}
-
-.block-editor-list-view-placeholder {
-	padding: 0;
-	margin: 0;
-	height: 36px;
-}
-

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/recursion-provider/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 /**
  * Internal dependencies
@@ -19,12 +19,12 @@ function Edit( { attributes: { uniqueId } } ) {
 	const hasRecursion = useHasRecursion( uniqueId );
 
 	if ( hasRecursion ) {
-		return <div className={ `wp-block__${ name }--halted` }>Halt</div>;
+		return <div data-testid={ `wp-block__${ name }--halted` }>Halt</div>;
 	}
 
 	return (
 		<RecursionProvider uniqueId={ uniqueId }>
-			<div className={ `wp-block__${ name }` }>
+			<div data-testid={ `wp-block__${ name }` }>
 				{ uniqueId === 'SIMPLE' && <p>Done</p> }
 				{ uniqueId === 'SINGLY-RECURSIVE' && (
 					<Edit attributes={ { uniqueId } } />
@@ -51,76 +51,74 @@ describe( 'useHasRecursion/RecursionProvider', () => {
 	const context = { name: 'reusable-block' };
 
 	it( 'allows a single block to render', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'SIMPLE' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block' )
+		).toBeVisible();
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 0 );
+			screen.queryByTestId( 'wp-block__reusable-block--halted' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'allows equal but sibling blocks to render', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'SIMPLE' } } />
 				<Edit attributes={ { uniqueId: 'SIMPLE' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
+			screen.getAllByTestId( 'wp-block__reusable-block' )
 		).toHaveLength( 2 );
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 0 );
+			screen.queryByTestId( 'wp-block__reusable-block--halted' )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'prevents a block from rendering itself', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'SINGLY-RECURSIVE' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block' )
+		).toBeVisible();
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block--halted' )
+		).toBeVisible();
 	} );
 
 	it( 'prevents a block from rendering itself only when the same block type', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'ANOTHER-BLOCK-SAME-ID' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block' )
+		).toBeVisible();
+		expect( screen.getByTestId( 'wp-block__another-block' ) ).toBeVisible();
 		expect(
-			container.querySelectorAll( '.wp-block__another-block' )
-		).toHaveLength( 1 );
-		expect(
-			container.querySelectorAll( '.wp-block__another-block--halted' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__another-block--halted' )
+		).toBeVisible();
 	} );
 
 	it( 'prevents mutual recursion between two blocks', () => {
-		const { container } = render(
+		render(
 			<BlockEditContextProvider value={ context }>
 				<Edit attributes={ { uniqueId: 'MUTUALLY-RECURSIVE-1' } } />
 			</BlockEditContextProvider>
 		);
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block' )
+			screen.getAllByTestId( 'wp-block__reusable-block' )
 		).toHaveLength( 2 );
 		expect(
-			container.querySelectorAll( '.wp-block__reusable-block--halted' )
-		).toHaveLength( 1 );
+			screen.getByTestId( 'wp-block__reusable-block--halted' )
+		).toBeVisible();
 	} );
 } );

package/src/components/rich-text/content.scss

@@ -0,0 +1,42 @@
+.rich-text {
+	[data-rich-text-placeholder] {
+		pointer-events: none;
+	}
+
+	[data-rich-text-placeholder]::after {
+		content: attr(data-rich-text-placeholder);
+		// Use opacity to work in various editor styles.
+		// We don't specify the color here, because blocks or editor styles might provide their own.
+		opacity: 0.62;
+	}
+
+	&:focus {
+		// Removes outline added by the browser.
+		outline: none;
+
+		[data-rich-text-format-boundary] {
+			border-radius: 2px;
+		}
+	}
+}
+
+.block-editor-rich-text__editable {
+	> p:first-child {
+		margin-top: 0;
+	}
+}
+
+// Captions may have lighter (gray) text, or be shown on a range of different background luminosites.
+// To ensure legibility, we increase the default placeholder opacity to ensure contrast.
+figcaption.block-editor-rich-text__editable [data-rich-text-placeholder]::before {
+	opacity: 0.8;
+}
+
+[data-rich-text-script] {
+	display: inline;
+
+	&::before {
+		content: "</>";
+		background: rgb(255, 255, 0);
+	}
+}