@wordpress/block-library 9.7.1-next.1f6eadc42.0 → 9.8.0

package/src/embed/embed-preview.js

@@ -14,7 +14,7 @@ import clsx from 'clsx';
 import { __, sprintf } from '@wordpress/i18n';
 import { Placeholder, SandBox } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
-import { Component } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { getAuthority } from '@wordpress/url';
 
 /**
@@ -23,129 +23,113 @@ import { getAuthority } from '@wordpress/url';
 import WpEmbedPreview from './wp-embed-preview';
 import { Caption } from '../utils/caption';
 
-class EmbedPreview extends Component {
-	constructor() {
-		super( ...arguments );
-		this.hideOverlay = this.hideOverlay.bind( this );
-		this.state = {
-			interactive: false,
-		};
-	}
-
-	static getDerivedStateFromProps( nextProps, state ) {
-		if ( ! nextProps.isSelected && state.interactive ) {
-			// We only want to change this when the block is not selected, because changing it when
-			// the block becomes selected makes the overlap disappear too early. Hiding the overlay
-			// happens on mouseup when the overlay is clicked.
-			return { interactive: false };
-		}
+export default function EmbedPreview( {
+	preview,
+	previewable,
+	url,
+	type,
+	isSelected,
+	className,
+	icon,
+	label,
+	insertBlocksAfter,
+	attributes,
+	setAttributes,
+} ) {
+	const [ interactive, setInteractive ] = useState( false );
 
-		return null;
+	if ( ! isSelected && interactive ) {
+		// We only want to change this when the block is not selected, because changing it when
+		// the block becomes selected makes the overlap disappear too early. Hiding the overlay
+		// happens on mouseup when the overlay is clicked.
+		setInteractive( false );
 	}
 
-	hideOverlay() {
+	const hideOverlay = () => {
 		// This is called onMouseUp on the overlay. We can't respond to the `isSelected` prop
 		// changing, because that happens on mouse down, and the overlay immediately disappears,
 		// and the mouse event can end up in the preview content. We can't use onClick on
 		// the overlay to hide it either, because then the editor misses the mouseup event, and
 		// thinks we're multi-selecting blocks.
-		this.setState( { interactive: true } );
-	}
+		setInteractive( true );
+	};
 
-	render() {
-		const {
-			preview,
-			previewable,
-			url,
-			type,
-			className,
-			icon,
-			label,
-			insertBlocksAfter,
-			attributes,
-			setAttributes,
-			isSelected,
-		} = this.props;
-		const { scripts } = preview;
-		const { interactive } = this.state;
+	const { scripts } = preview;
 
-		const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
-		const embedSourceUrl = getAuthority( url );
-		const iframeTitle = sprintf(
-			// translators: %s: host providing embed content e.g: www.youtube.com
-			__( 'Embedded content from %s' ),
-			embedSourceUrl
-		);
-		const sandboxClassnames = clsx(
-			type,
-			className,
-			'wp-block-embed__wrapper'
-		);
+	const html = 'photo' === type ? getPhotoHtml( preview ) : preview.html;
+	const embedSourceUrl = getAuthority( url );
+	const iframeTitle = sprintf(
+		// translators: %s: host providing embed content e.g: www.youtube.com
+		__( 'Embedded content from %s' ),
+		embedSourceUrl
+	);
+	const sandboxClassnames = clsx(
+		type,
+		className,
+		'wp-block-embed__wrapper'
+	);
 
-		// Disabled because the overlay div doesn't actually have a role or functionality
-		// as far as the user is concerned. We're just catching the first click so that
-		// the block can be selected without interacting with the embed preview that the overlay covers.
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
-		const embedWrapper =
-			'wp-embed' === type ? (
-				<WpEmbedPreview html={ html } />
-			) : (
-				<div className="wp-block-embed__wrapper">
-					<SandBox
-						html={ html }
-						scripts={ scripts }
-						title={ iframeTitle }
-						type={ sandboxClassnames }
-						onFocus={ this.hideOverlay }
+	// Disabled because the overlay div doesn't actually have a role or functionality
+	// as far as the user is concerned. We're just catching the first click so that
+	// the block can be selected without interacting with the embed preview that the overlay covers.
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	const embedWrapper =
+		'wp-embed' === type ? (
+			<WpEmbedPreview html={ html } />
+		) : (
+			<div className="wp-block-embed__wrapper">
+				<SandBox
+					html={ html }
+					scripts={ scripts }
+					title={ iframeTitle }
+					type={ sandboxClassnames }
+					onFocus={ hideOverlay }
+				/>
+				{ ! interactive && (
+					<div
+						className="block-library-embed__interactive-overlay"
+						onMouseUp={ hideOverlay }
 					/>
-					{ ! interactive && (
-						<div
-							className="block-library-embed__interactive-overlay"
-							onMouseUp={ this.hideOverlay }
-						/>
-					) }
-				</div>
-			);
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
-
-		return (
-			<figure
-				className={ clsx( className, 'wp-block-embed', {
-					'is-type-video': 'video' === type,
-				} ) }
-			>
-				{ previewable ? (
-					embedWrapper
-				) : (
-					<Placeholder
-						icon={ <BlockIcon icon={ icon } showColors /> }
-						label={ label }
-					>
-						<p className="components-placeholder__error">
-							<a href={ url }>{ url }</a>
-						</p>
-						<p className="components-placeholder__error">
-							{ sprintf(
-								/* translators: %s: host providing embed content e.g: www.youtube.com */
-								__(
-									"Embedded content from %s can't be previewed in the editor."
-								),
-								embedSourceUrl
-							) }
-						</p>
-					</Placeholder>
 				) }
-				<Caption
-					attributes={ attributes }
-					setAttributes={ setAttributes }
-					isSelected={ isSelected }
-					insertBlocksAfter={ insertBlocksAfter }
-					label={ __( 'Embed caption text' ) }
-					showToolbarButton={ isSelected }
-				/>
-			</figure>
+			</div>
 		);
-	}
-}
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
 
-export default EmbedPreview;
+	return (
+		<figure
+			className={ clsx( className, 'wp-block-embed', {
+				'is-type-video': 'video' === type,
+			} ) }
+		>
+			{ previewable ? (
+				embedWrapper
+			) : (
+				<Placeholder
+					icon={ <BlockIcon icon={ icon } showColors /> }
+					label={ label }
+				>
+					<p className="components-placeholder__error">
+						<a href={ url }>{ url }</a>
+					</p>
+					<p className="components-placeholder__error">
+						{ sprintf(
+							/* translators: %s: host providing embed content e.g: www.youtube.com */
+							__(
+								"Embedded content from %s can't be previewed in the editor."
+							),
+							embedSourceUrl
+						) }
+					</p>
+				</Placeholder>
+			) }
+			<Caption
+				attributes={ attributes }
+				setAttributes={ setAttributes }
+				isSelected={ isSelected }
+				insertBlocksAfter={ insertBlocksAfter }
+				label={ __( 'Embed caption text' ) }
+				showToolbarButton={ isSelected }
+			/>
+		</figure>
+	);
+}

package/src/image/image.js

@@ -559,7 +559,8 @@ export default function Image( {
 	const mediaReplaceFlow = isSingleSelected &&
 		! isEditingImage &&
 		! lockUrlControls && (
-			<BlockControls group="other">
+			// For contentOnly mode, put this button in its own area so it has borders around it.
+			<BlockControls group={ isContentOnlyMode ? 'inline' : 'other' }>
 				<MediaReplaceFlow
 					mediaId={ id }
 					mediaURL={ url }

package/src/navigation-submenu/block.json

@@ -59,6 +59,19 @@
 	"supports": {
 		"reusable": false,
 		"html": false,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
 		"interactivity": {
 			"clientNavigation": true
 		}

package/src/post-template/edit.js

@@ -90,6 +90,7 @@ export default function PostTemplateEdit( {
 			taxQuery,
 			parents,
 			pages,
+			format,
 			// We gather extra query args to pass to the REST API call.
 			// This way extenders of Query Loop can add their own query args,
 			// and have accurate previews in the editor.
@@ -163,6 +164,10 @@ export default function PostTemplateEdit( {
 			if ( parents?.length ) {
 				query.parent = parents;
 			}
+			if ( format?.length ) {
+				query.format = format;
+			}
+
 			// If sticky is not set, it will return all posts in the results.
 			// If sticky is set to `only`, it will limit the results to sticky posts only.
 			// If it is anything else, it will exclude sticky posts from results. For the record the value stored is `exclude`.
@@ -205,6 +210,7 @@ export default function PostTemplateEdit( {
 			templateSlug,
 			taxQuery,
 			parents,
+			format,
 			restQueryArgs,
 			previewPostType,
 		]

package/src/post-template/index.php

@@ -64,6 +64,11 @@ function render_block_core_post_template( $attributes, $content, $block ) {
 		if ( in_the_loop() ) {
 			$query = clone $wp_query;
 			$query->rewind_posts();
+
+			// If in a single post of any post type, default to the 'post' post type.
+			if ( is_singular() ) {
+				query_posts( array( 'post_type' => 'post' ) );
+			}
 		} else {
 			$query = $wp_query;
 		}

package/src/post-title/block.json

@@ -80,8 +80,5 @@
 			}
 		}
 	},
-	"style": "wp-block-post-title",
-	"selectors": {
-		"typography": ".wp-block-post-title, .wp-block-post-title > a"
-	}
+	"style": "wp-block-post-title"
 }

package/src/post-title/style.scss

@@ -3,31 +3,14 @@
 	// This block has customizable padding, border-box makes that more predictable.
 	box-sizing: border-box;
 
-	&[style*="font-weight"] :where(a) {
-		font-weight: inherit;
-	}
-	&[class*="-font-family"] :where(a),
-	&[style*="font-family"] :where(a) {
+	:where(a) {
+		display: inline-block;
 		font-family: inherit;
-	}
-	&[class*="-font-size"] :where(a),
-	&[style*="font-size"] :where(a) {
 		font-size: inherit;
-	}
-	&[style*="line-height"] :where(a) {
-		line-height: inherit;
-	}
-	&[style*="font-style"] :where(a) {
 		font-style: inherit;
-	}
-	&[style*="letter-spacing"] :where(a) {
+		font-weight: inherit;
 		letter-spacing: inherit;
-	}
-	&[style*="text-decoration"] :where(a) {
+		line-height: inherit;
 		text-decoration: inherit;
 	}
-
-	a {
-		display: inline-block;
-	}
 }

package/src/query/block.json

@@ -25,7 +25,8 @@
 				"sticky": "",
 				"inherit": true,
 				"taxQuery": null,
-				"parents": []
+				"parents": [],
+				"format": []
 			}
 		},
 		"tagName": {
@@ -40,6 +41,7 @@
 			"default": false
 		}
 	},
+	"usesContext": [ "postType" ],
 	"providesContext": {
 		"queryId": "queryId",
 		"query": "query",

package/src/query/edit/inspector-controls/format-controls.js

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { FormTokenField } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+
+// All WP post formats, sorted alphabetically by translated name.
+// Value is the post format slug. Label is the name.
+const POST_FORMATS = [
+	{ value: 'aside', label: __( 'Aside' ) },
+	{ value: 'audio', label: __( 'Audio' ) },
+	{ value: 'chat', label: __( 'Chat' ) },
+	{ value: 'gallery', label: __( 'Gallery' ) },
+	{ value: 'image', label: __( 'Image' ) },
+	{ value: 'link', label: __( 'Link' ) },
+	{ value: 'quote', label: __( 'Quote' ) },
+	{ value: 'standard', label: __( 'Standard' ) },
+	{ value: 'status', label: __( 'Status' ) },
+	{ value: 'video', label: __( 'Video' ) },
+].sort( ( a, b ) => {
+	const normalizedA = a.label.toUpperCase();
+	const normalizedB = b.label.toUpperCase();
+
+	if ( normalizedA < normalizedB ) {
+		return -1;
+	}
+	if ( normalizedA > normalizedB ) {
+		return 1;
+	}
+	return 0;
+} );
+
+// A helper function to convert translatable post format names into their static values.
+function formatNamesToValues( names, formats ) {
+	return names
+		.map( ( name ) => {
+			return formats.find(
+				( item ) =>
+					item.label.toLocaleLowerCase() === name.toLocaleLowerCase()
+			)?.value;
+		} )
+		.filter( Boolean );
+}
+
+export default function FormatControls( { onChange, query: { format } } ) {
+	// 'format' is expected to be an array. If it is not an array, for example
+	// if a user has manually entered an invalid value in the block markup,
+	// convert it to an array to prevent JavaScript errors.
+	const normalizedFormats = Array.isArray( format ) ? format : [ format ];
+
+	const { supportedFormats } = useSelect( ( select ) => {
+		const themeSupports = select( coreStore ).getThemeSupports();
+		return {
+			supportedFormats: themeSupports.formats,
+		};
+	}, [] );
+
+	const formats = POST_FORMATS.filter( ( item ) =>
+		supportedFormats.includes( item.value )
+	);
+
+	const values = normalizedFormats
+		.map(
+			( name ) => formats.find( ( item ) => item.value === name )?.label
+		)
+		.filter( Boolean );
+
+	const suggestions = formats
+		.filter( ( item ) => ! format.includes( item.value ) )
+		.map( ( item ) => item.label );
+
+	return (
+		<FormTokenField
+			label={ __( 'Formats' ) }
+			value={ values }
+			suggestions={ suggestions }
+			onChange={ ( newValues ) => {
+				onChange( {
+					format: formatNamesToValues( newValues, formats ),
+				} );
+			} }
+			__experimentalShowHowTo={ false }
+			__experimentalExpandOnFocus
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+		/>
+	);
+}

package/src/query/edit/inspector-controls/index.js

@@ -12,6 +12,8 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
 import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 import { debounce } from '@wordpress/compose';
@@ -24,6 +26,7 @@ import OrderControl from './order-control';
 import AuthorControl from './author-control';
 import ParentControl from './parent-control';
 import { TaxonomyControls } from './taxonomy-controls';
+import FormatControls from './format-controls';
 import StickyControl from './sticky-control';
 import CreateNewPostLink from './create-new-post-link';
 import PerPageControl from './per-page-control';
@@ -42,7 +45,7 @@ import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
 const { BlockInfo } = unlock( blockEditorPrivateApis );
 
 export default function QueryInspectorControls( props ) {
-	const { attributes, setQuery, setDisplayLayout } = props;
+	const { attributes, setQuery, setDisplayLayout, isTemplate } = props;
 	const { query, displayLayout } = attributes;
 	const {
 		order,
@@ -56,10 +59,15 @@ export default function QueryInspectorControls( props ) {
 		inherit,
 		taxQuery,
 		parents,
+		format,
 	} = query;
 	const allowedControls = useAllowedControls( attributes );
 	const [ showSticky, setShowSticky ] = useState( postType === 'post' );
-	const { postTypesTaxonomiesMap, postTypesSelectOptions } = usePostTypes();
+	const {
+		postTypesTaxonomiesMap,
+		postTypesSelectOptions,
+		postTypeFormatSupportMap,
+	} = usePostTypes();
 	const taxonomies = useTaxonomies( postType );
 	const isPostTypeHierarchical = useIsPostTypeHierarchical( postType );
 	useEffect( () => {
@@ -88,6 +96,14 @@ export default function QueryInspectorControls( props ) {
 		}
 		// We need to reset `parents` because they are tied to each post type.
 		updateQuery.parents = [];
+		// Post types can register post format support with `add_post_type_support`.
+		// But we need to reset the `format` property when switching to post types
+		// that do not support post formats.
+		const hasFormatSupport = postTypeFormatSupportMap[ newValue ];
+		if ( ! hasFormatSupport ) {
+			updateQuery.format = [];
+		}
+
 		setQuery( updateQuery );
 	};
 	const [ querySearch, setQuerySearch ] = useState( query.search );
@@ -103,20 +119,25 @@ export default function QueryInspectorControls( props ) {
 		onChangeDebounced();
 		return onChangeDebounced.cancel;
 	}, [ querySearch, onChangeDebounced ] );
-	const showInheritControl = isControlAllowed( allowedControls, 'inherit' );
+
+	const showInheritControl =
+		isTemplate && isControlAllowed( allowedControls, 'inherit' );
 	const showPostTypeControl =
-		! inherit && isControlAllowed( allowedControls, 'postType' );
+		( ! inherit && isControlAllowed( allowedControls, 'postType' ) ) ||
+		! isTemplate;
 	const postTypeControlLabel = __( 'Post type' );
 	const postTypeControlHelp = __(
 		'Select the type of content to display: posts, pages, or custom post types.'
 	);
 	const showColumnsControl = false;
 	const showOrderControl =
-		! inherit && isControlAllowed( allowedControls, 'order' );
+		( ! inherit && isControlAllowed( allowedControls, 'order' ) ) ||
+		! isTemplate;
 	const showStickyControl =
-		! inherit &&
-		showSticky &&
-		isControlAllowed( allowedControls, 'sticky' );
+		( ! inherit &&
+			showSticky &&
+			isControlAllowed( allowedControls, 'sticky' ) ) ||
+		( showSticky && ! isTemplate );
 	const showSettingsPanel =
 		showInheritControl ||
 		showPostTypeControl ||
@@ -132,11 +153,36 @@ export default function QueryInspectorControls( props ) {
 		isControlAllowed( allowedControls, 'parents' ) &&
 		isPostTypeHierarchical;
 
+	const postTypeHasFormatSupport = postTypeFormatSupportMap[ postType ];
+	const showFormatControl = useSelect(
+		( select ) => {
+			// Check if the post type supports post formats and if the control is allowed.
+			if (
+				! postTypeHasFormatSupport ||
+				! isControlAllowed( allowedControls, 'format' )
+			) {
+				return false;
+			}
+
+			const themeSupports = select( coreStore ).getThemeSupports();
+
+			// If there are no supported formats, getThemeSupports still includes the default 'standard' format,
+			// and in this case the control should not be shown since the user has no other formats to choose from.
+			return (
+				themeSupports.formats &&
+				themeSupports.formats.length > 0 &&
+				themeSupports.formats.some( ( type ) => type !== 'standard' )
+			);
+		},
+		[ allowedControls, postTypeHasFormatSupport ]
+	);
+
 	const showFiltersPanel =
 		showTaxControl ||
 		showAuthorControl ||
 		showSearchControl ||
-		showParentControl;
+		showParentControl ||
+		showFormatControl;
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 
 	const showPostCountControl = isControlAllowed(
@@ -313,6 +359,7 @@ export default function QueryInspectorControls( props ) {
 							parents: [],
 							search: '',
 							taxQuery: null,
+							format: [],
 						} );
 						setQuerySearch( '' );
 					} }
@@ -374,6 +421,18 @@ export default function QueryInspectorControls( props ) {
 							/>
 						</ToolsPanelItem>
 					) }
+					{ showFormatControl && (
+						<ToolsPanelItem
+							hasValue={ () => !! format?.length }
+							label={ __( 'Formats' ) }
+							onDeselect={ () => setQuery( { format: [] } ) }
+						>
+							<FormatControls
+								onChange={ setQuery }
+								query={ query }
+							/>
+						</ToolsPanelItem>
+					) }
 				</ToolsPanel>
 			) }
 		</>