@wordpress/block-library 7.18.0 → 8.0.0

package/src/navigation-link/link-ui.js

@@ -0,0 +1,213 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
+import { Popover, Button } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalLinkControl as LinkControl,
+	BlockIcon,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { createInterpolateElement } from '@wordpress/element';
+import { store as coreStore } from '@wordpress/core-data';
+import { decodeEntities } from '@wordpress/html-entities';
+import { switchToBlockType } from '@wordpress/blocks';
+import { useSelect, useDispatch } from '@wordpress/data';
+
+/**
+ * Given the Link block's type attribute, return the query params to give to
+ * /wp/v2/search.
+ *
+ * @param {string} type Link block's type attribute.
+ * @param {string} kind Link block's entity of kind (post-type|taxonomy)
+ * @return {{ type?: string, subtype?: string }} Search query params.
+ */
+export function getSuggestionsQuery( type, kind ) {
+	switch ( type ) {
+		case 'post':
+		case 'page':
+			return { type: 'post', subtype: type };
+		case 'category':
+			return { type: 'term', subtype: 'category' };
+		case 'tag':
+			return { type: 'term', subtype: 'post_tag' };
+		case 'post_format':
+			return { type: 'post-format' };
+		default:
+			if ( kind === 'taxonomy' ) {
+				return { type: 'term', subtype: type };
+			}
+			if ( kind === 'post-type' ) {
+				return { type: 'post', subtype: type };
+			}
+			return {};
+	}
+}
+
+/**
+ * Add transforms to Link Control
+ *
+ * @param {Object} props          Component props.
+ * @param {string} props.clientId Block client ID.
+ */
+function LinkControlTransforms( { clientId } ) {
+	const { getBlock, blockTransforms } = useSelect(
+		( select ) => {
+			const {
+				getBlock: _getBlock,
+				getBlockRootClientId,
+				getBlockTransformItems,
+			} = select( blockEditorStore );
+
+			return {
+				getBlock: _getBlock,
+				blockTransforms: getBlockTransformItems(
+					_getBlock( clientId ),
+					getBlockRootClientId( clientId )
+				),
+			};
+		},
+		[ clientId ]
+	);
+
+	const { replaceBlock } = useDispatch( blockEditorStore );
+
+	const featuredBlocks = [
+		'core/page-list',
+		'core/site-logo',
+		'core/social-links',
+		'core/search',
+	];
+
+	const transforms = blockTransforms.filter( ( item ) => {
+		return featuredBlocks.includes( item.name );
+	} );
+
+	if ( ! transforms?.length ) {
+		return null;
+	}
+
+	if ( ! clientId ) {
+		return null;
+	}
+
+	return (
+		<div className="link-control-transform">
+			<h3 className="link-control-transform__subheading">
+				{ __( 'Transform' ) }
+			</h3>
+			<div className="link-control-transform__items">
+				{ transforms.map( ( item, index ) => {
+					return (
+						<Button
+							key={ `transform-${ index }` }
+							onClick={ () =>
+								replaceBlock(
+									clientId,
+									switchToBlockType(
+										getBlock( clientId ),
+										item.name
+									)
+								)
+							}
+							className="link-control-transform__item"
+						>
+							<BlockIcon icon={ item.icon } />
+							{ item.title }
+						</Button>
+					);
+				} ) }
+			</div>
+		</div>
+	);
+}
+
+export function LinkUI( props ) {
+	const { saveEntityRecord } = useDispatch( coreStore );
+
+	async function handleCreate( pageTitle ) {
+		const postType = props.link.type || 'page';
+
+		const page = await saveEntityRecord( 'postType', postType, {
+			title: pageTitle,
+			status: 'draft',
+		} );
+
+		return {
+			id: page.id,
+			type: postType,
+			// Make `title` property consistent with that in `fetchLinkSuggestions` where the `rendered` title (containing HTML entities)
+			// is also being decoded. By being consistent in both locations we avoid having to branch in the rendering output code.
+			// Ideally in the future we will update both APIs to utilise the "raw" form of the title which is better suited to edit contexts.
+			// e.g.
+			// - title.raw = "Yes & No"
+			// - title.rendered = "Yes &#038; No"
+			// - decodeEntities( title.rendered ) = "Yes & No"
+			// See:
+			// - https://github.com/WordPress/gutenberg/pull/41063
+			// - https://github.com/WordPress/gutenberg/blob/a1e1fdc0e6278457e9f4fc0b31ac6d2095f5450b/packages/core-data/src/fetch/__experimental-fetch-link-suggestions.js#L212-L218
+			title: decodeEntities( page.title.rendered ),
+			url: page.link,
+			kind: 'post-type',
+		};
+	}
+
+	const { label, url, opensInNewTab, type, kind } = props.link;
+	const link = {
+		url,
+		opensInNewTab,
+		title: label && stripHTML( label ),
+	};
+
+	return (
+		<Popover
+			placement="bottom"
+			onClose={ props.onClose }
+			anchor={ props.anchor }
+			shift
+		>
+			<LinkControl
+				hasTextControl
+				hasRichPreviews
+				className={ props.className }
+				value={ link }
+				showInitialSuggestions={ true }
+				withCreateSuggestion={ props.hasCreateSuggestion }
+				createSuggestion={ handleCreate }
+				createSuggestionButtonText={ ( searchTerm ) => {
+					let format;
+
+					if ( type === 'post' ) {
+						/* translators: %s: search term. */
+						format = __( 'Create draft post: <mark>%s</mark>' );
+					} else {
+						/* translators: %s: search term. */
+						format = __( 'Create draft page: <mark>%s</mark>' );
+					}
+
+					return createInterpolateElement(
+						sprintf( format, searchTerm ),
+						{
+							mark: <mark />,
+						}
+					);
+				} }
+				noDirectEntry={ !! type }
+				noURLSuggestion={ !! type }
+				suggestionsQuery={ getSuggestionsQuery( type, kind ) }
+				onChange={ props.onChange }
+				onRemove={ props.onRemove }
+				renderControlBottom={
+					! url
+						? () => (
+								<LinkControlTransforms
+									clientId={ props.clientId }
+								/>
+						  )
+						: null
+				}
+			/>
+		</Popover>
+	);
+}

package/src/navigation-link/test/edit.js

@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-import { updateNavigationLinkBlockAttributes } from '../edit';
+import { updateAttributes } from '../update-attributes';
 
 describe( 'edit', () => {
-	describe( 'updateNavigationLinkBlockAttributes', () => {
+	describe( 'updateAttributes', () => {
 		// Data shapes are linked to fetchLinkSuggestions from
 		// core-data/src/fetch/__experimental-fetch-link-suggestions.js.
 		it( 'can update a post link', () => {
@@ -18,10 +18,7 @@ describe( 'edit', () => {
 				type: 'post',
 			};
 
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 1337,
 				label: 'Menu Test',
@@ -42,10 +39,7 @@ describe( 'edit', () => {
 				type: 'page',
 				url: 'http://wordpress.local/sample-page/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 2,
 				kind: 'post-type',
@@ -66,10 +60,7 @@ describe( 'edit', () => {
 				type: 'post_tag',
 				url: 'http://wordpress.local/tag/bar/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 15,
 				kind: 'taxonomy',
@@ -90,10 +81,7 @@ describe( 'edit', () => {
 				type: 'category',
 				url: 'http://wordpress.local/category/cats/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 9,
 				kind: 'taxonomy',
@@ -114,10 +102,7 @@ describe( 'edit', () => {
 				type: 'portfolio',
 				url: 'http://wordpress.local/portfolio/fall/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 131,
 				kind: 'post-type',
@@ -138,10 +123,7 @@ describe( 'edit', () => {
 				type: 'portfolio_tag',
 				url: 'http://wordpress.local/portfolio_tag/PortfolioTag/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 4,
 				kind: 'taxonomy',
@@ -162,10 +144,7 @@ describe( 'edit', () => {
 				type: 'portfolio_category',
 				url: 'http://wordpress.local/portfolio_category/Portfolio-category/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			expect( setAttributes ).toHaveBeenCalledWith( {
 				id: 2,
 				kind: 'taxonomy',
@@ -186,10 +165,7 @@ describe( 'edit', () => {
 				type: 'post-format',
 				url: 'http://wordpress.local/type/video/',
 			};
-			updateNavigationLinkBlockAttributes(
-				linkSuggestion,
-				setAttributes
-			);
+			updateAttributes( linkSuggestion, setAttributes );
 			// post_format returns a slug ID value from the Search API
 			// we do not persist this ID since we expect this value to be a post or term ID.
 			expect( setAttributes ).toHaveBeenCalledWith( {
@@ -208,10 +184,7 @@ describe( 'edit', () => {
 					opensInNewTab: false,
 					url: 'www.wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					url: 'www.wordpress.org',
@@ -229,10 +202,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'http://www.wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'www.wordpress.org',
@@ -250,10 +220,7 @@ describe( 'edit', () => {
 					type: 'mailto',
 					url: 'mailto:foo@example.com',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'mailto:foo@example.com',
@@ -272,10 +239,7 @@ describe( 'edit', () => {
 					type: 'internal',
 					url: '#foo',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: '#foo',
@@ -294,10 +258,7 @@ describe( 'edit', () => {
 					type: 'tel',
 					url: 'tel:5555555',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'tel:5555555',
@@ -319,10 +280,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'https://www.wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'www.wordpress.org',
@@ -339,10 +297,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'Custom Title',
@@ -359,10 +314,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'https://wordpress.org',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'Custom Title',
@@ -380,10 +332,7 @@ describe( 'edit', () => {
 					type: 'URL',
 					url: 'http://wordpress.org/?s=<>',
 				};
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes
-				);
+				updateAttributes( linkSuggestion, setAttributes );
 				expect( setAttributes ).toHaveBeenCalledWith( {
 					opensInNewTab: false,
 					label: 'Custom Title',
@@ -408,11 +357,7 @@ describe( 'edit', () => {
 					type: 'post',
 				};
 
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes,
-					mockState
-				);
+				updateAttributes( linkSuggestion, setAttributes, mockState );
 				expect( mockState ).toEqual( {
 					id: 1337,
 					label: 'Menu Test',
@@ -422,7 +367,7 @@ describe( 'edit', () => {
 					url: 'https://wordpress.local/menu-test/',
 				} );
 				// Click on the existing link control, and toggle opens new tab.
-				updateNavigationLinkBlockAttributes(
+				updateAttributes(
 					{
 						url: 'https://wordpress.local/menu-test/',
 						opensInNewTab: true,
@@ -453,11 +398,7 @@ describe( 'edit', () => {
 					type: 'post',
 				};
 
-				updateNavigationLinkBlockAttributes(
-					linkSuggestion,
-					setAttributes,
-					mockState
-				);
+				updateAttributes( linkSuggestion, setAttributes, mockState );
 				expect( mockState ).toEqual( {
 					id: 1337,
 					label: 'Menu Test',
@@ -467,7 +408,7 @@ describe( 'edit', () => {
 					url: 'https://wordpress.local/menu-test/',
 				} );
 				// Click on the existing link control, and toggle opens new tab.
-				updateNavigationLinkBlockAttributes(
+				updateAttributes(
 					{
 						url: 'https://wordpress.local/foo/',
 						opensInNewTab: false,

package/src/navigation-link/transforms.js

@@ -40,6 +40,13 @@ const transforms = {
 				return createBlock( 'core/navigation-link' );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/page-list' ],
+			transform: () => {
+				return createBlock( 'core/navigation-link' );
+			},
+		},
 	],
 	to: [
 		{
@@ -91,6 +98,13 @@ const transforms = {
 				} );
 			},
 		},
+		{
+			type: 'block',
+			blocks: [ 'core/page-list' ],
+			transform: () => {
+				return createBlock( 'core/page-list' );
+			},
+		},
 	],
 };
 

package/src/navigation-link/update-attributes.js

@@ -0,0 +1,99 @@
+/**
+ * WordPress dependencies
+ */
+import { safeDecodeURI } from '@wordpress/url';
+import { escapeHTML } from '@wordpress/escape-html';
+
+/**
+ * @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 } ),
+	} );
+};