@wordpress/block-library 9.7.1-next.5368f64a9.0 → 9.8.1

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>
 			) }
 		</>

package/src/query/edit/query-content.js

@@ -3,7 +3,7 @@
  */
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useCallback } from '@wordpress/element';
 import {
 	BlockControls,
 	InspectorControls,
@@ -32,6 +32,7 @@ export default function QueryContent( {
 	openPatternSelectionModal,
 	name,
 	clientId,
+	context,
 } ) {
 	const {
 		queryId,
@@ -41,6 +42,7 @@ export default function QueryContent( {
 		tagName: TagName = 'div',
 		query: { inherit } = {},
 	} = attributes;
+	const { postType } = context;
 	const { __unstableMarkNextChangeAsNotPersistent } =
 		useDispatch( blockEditorStore );
 	const instanceId = useInstanceId( QueryContent );
@@ -48,6 +50,16 @@ export default function QueryContent( {
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
 		template: TEMPLATE,
 	} );
+	const isTemplate = useSelect(
+		( select ) => {
+			const currentTemplate =
+				select( coreStore ).__experimentalGetTemplateForLink()?.type;
+			const isInTemplate = 'wp_template' === currentTemplate;
+			const isInSingularContent = postType !== undefined;
+			return isInTemplate && ! isInSingularContent;
+		},
+		[ postType ]
+	);
 	const { postsPerPage } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
 		const { getEntityRecord, getEntityRecordEdits, canUser } =
@@ -81,6 +93,10 @@ export default function QueryContent( {
 	// Changes in query property (which is an object) need to be in the same callback,
 	// because updates are batched after the render and changes in different query properties
 	// would cause to override previous wanted changes.
+	const updateQuery = useCallback(
+		( newQuery ) => setAttributes( { query: { ...query, ...newQuery } } ),
+		[ query, setAttributes ]
+	);
 	useEffect( () => {
 		const newQuery = {};
 		// When we inherit from global query always need to set the `perPage`
@@ -90,11 +106,24 @@ export default function QueryContent( {
 		} else if ( ! query.perPage && postsPerPage ) {
 			newQuery.perPage = postsPerPage;
 		}
+		// We need to reset the `inherit` value if not in a template, as queries
+		// are not inherited when outside a template (e.g. when in singular content).
+		if ( ! isTemplate && query.inherit ) {
+			newQuery.inherit = false;
+		}
 		if ( !! Object.keys( newQuery ).length ) {
 			__unstableMarkNextChangeAsNotPersistent();
 			updateQuery( newQuery );
 		}
-	}, [ query.perPage, postsPerPage, inherit ] );
+	}, [
+		query.perPage,
+		postsPerPage,
+		inherit,
+		isTemplate,
+		query.inherit,
+		__unstableMarkNextChangeAsNotPersistent,
+		updateQuery,
+	] );
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
@@ -102,9 +131,12 @@ export default function QueryContent( {
 			__unstableMarkNextChangeAsNotPersistent();
 			setAttributes( { queryId: instanceId } );
 		}
-	}, [ queryId, instanceId ] );
-	const updateQuery = ( newQuery ) =>
-		setAttributes( { query: { ...query, ...newQuery } } );
+	}, [
+		queryId,
+		instanceId,
+		__unstableMarkNextChangeAsNotPersistent,
+		setAttributes,
+	] );
 	const updateDisplayLayout = ( newDisplayLayout ) =>
 		setAttributes( {
 			displayLayout: { ...displayLayout, ...newDisplayLayout },
@@ -135,6 +167,7 @@ export default function QueryContent( {
 					setDisplayLayout={ updateDisplayLayout }
 					setAttributes={ setAttributes }
 					clientId={ clientId }
+					isTemplate={ isTemplate }
 				/>
 			</InspectorControls>
 			<BlockControls>

package/src/query/utils.js

@@ -94,6 +94,7 @@ export const mapToIHasNameAndId = ( entities, path ) => {
  * Returns a helper object that contains:
  * 1. An `options` object from the available post types, to be passed to a `SelectControl`.
  * 2. A helper map with available taxonomies per post type.
+ * 3. A helper map with post format support per post type.
  *
  * @return {Object} The helper object related to post types.
  */
@@ -124,7 +125,21 @@ export const usePostTypes = () => {
 			} ) ),
 		[ postTypes ]
 	);
-	return { postTypesTaxonomiesMap, postTypesSelectOptions };
+	const postTypeFormatSupportMap = useMemo( () => {
+		if ( ! postTypes?.length ) {
+			return {};
+		}
+		return postTypes.reduce( ( accumulator, type ) => {
+			accumulator[ type.slug ] =
+				type.supports?.[ 'post-formats' ] || false;
+			return accumulator;
+		}, {} );
+	}, [ postTypes ] );
+	return {
+		postTypesTaxonomiesMap,
+		postTypesSelectOptions,
+		postTypeFormatSupportMap,
+	};
 };
 
 /**

package/src/site-title/block.json

@@ -75,8 +75,5 @@
 		}
 	},
 	"editorStyle": "wp-block-site-title-editor",
-	"style": "wp-block-site-title",
-	"selectors": {
-		"typography": ".wp-block-site-title > span, .wp-block-site-title > a"
-	}
+	"style": "wp-block-site-title"
 }

package/src/site-title/style.scss

@@ -2,31 +2,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) {
+		color: inherit;
 		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;
 	}
-
-	:where(a) {
-		color: inherit;
-	}
 }

package/src/social-link/edit.js

@@ -22,6 +22,7 @@ import {
 	PanelBody,
 	PanelRow,
 	TextControl,
+	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { keyboardReturn } from '@wordpress/icons';
@@ -78,15 +79,18 @@ const SocialLinkURLPopover = ( {
 							}
 							removeBlock( clientId );
 						} }
+						suffix={
+							<InputControlSuffixWrapper variant="control">
+								<Button
+									icon={ keyboardReturn }
+									label={ __( 'Apply' ) }
+									type="submit"
+									size="small"
+								/>
+							</InputControlSuffixWrapper>
+						}
 					/>
 				</div>
-				<Button
-					// TODO: Switch to `true` (40px size) if possible.
-					__next40pxDefaultSize={ false }
-					icon={ keyboardReturn }
-					label={ __( 'Apply' ) }
-					type="submit"
-				/>
 			</form>
 		</URLPopover>
 	);