@wordpress/block-library 7.15.1-next.4d3b314fd5.0 → 7.17.0

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

@@ -8,14 +8,18 @@ import { store as coreStore } from '@wordpress/core-data';
 /**
  * Internal dependencies
  */
-import { getEntitiesInfo, useTaxonomies } from '../../utils';
+import { useTaxonomies } from '../../utils';
 import { MAX_FETCHED_TERMS } from '../../constants';
 
 // Helper function to get the term id based on user input in terms `FormTokenField`.
-const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
+const getTermIdByTermValue = ( terms, termValue ) => {
 	// First we check for exact match by `term.id` or case sensitive `term.name` match.
-	const termId = termValue?.id || termsMappedByName[ termValue ]?.id;
-	if ( termId ) return termId;
+	const termId =
+		termValue?.id || terms.find( ( term ) => term.name === termValue )?.id;
+	if ( termId ) {
+		return termId;
+	}
+
 	/**
 	 * Here we make an extra check for entered terms in a non case sensitive way,
 	 * to match user expectations, due to `FormTokenField` behaviour that shows
@@ -26,100 +30,92 @@ const getTermIdByTermValue = ( termsMappedByName, termValue ) => {
 	 * In this edge case we always apply the first match from the terms list.
 	 */
 	const termValueLower = termValue.toLocaleLowerCase();
-	for ( const term in termsMappedByName ) {
-		if ( term.toLocaleLowerCase() === termValueLower ) {
-			return termsMappedByName[ term ].id;
-		}
-	}
+	return terms.find(
+		( term ) => term.name.toLocaleLowerCase() === termValueLower
+	)?.id;
 };
 
-export const useTaxonomiesInfo = ( postType ) => {
-	const taxonomies = useTaxonomies( postType );
-	const taxonomiesInfo = useSelect(
+const useTaxonomyTerms = ( slug ) => {
+	return useSelect(
 		( select ) => {
-			const { getEntityRecords } = select( coreStore );
-			const termsQuery = { context: 'view', per_page: MAX_FETCHED_TERMS };
-			const _taxonomiesInfo = taxonomies?.map( ( { slug, name } ) => {
-				const _terms = getEntityRecords( 'taxonomy', slug, termsQuery );
-				return {
-					slug,
-					name,
-					terms: getEntitiesInfo( _terms ),
-				};
-			} );
-			return _taxonomiesInfo;
+			const terms = select( coreStore ).getEntityRecords(
+				'taxonomy',
+				slug,
+				{ context: 'view', per_page: MAX_FETCHED_TERMS }
+			);
+			return { terms };
 		},
-		[ taxonomies ]
+		[ slug ]
 	);
-	return taxonomiesInfo;
 };
 
 export function TaxonomyControls( { onChange, query } ) {
-	const taxonomiesInfo = useTaxonomiesInfo( query.postType );
-	const onTermsChange = ( taxonomySlug ) => ( newTermValues ) => {
-		const taxonomyInfo = taxonomiesInfo.find(
-			( { slug } ) => slug === taxonomySlug
-		);
-		if ( ! taxonomyInfo ) return;
-		const termIds = Array.from(
-			newTermValues.reduce( ( accumulator, termValue ) => {
-				const termId = getTermIdByTermValue(
-					taxonomyInfo.terms.mapByName,
-					termValue
+	const { postType, taxQuery } = query;
+
+	const taxonomies = useTaxonomies( postType );
+	if ( ! taxonomies || taxonomies.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ taxonomies.map( ( taxonomy ) => {
+				const value = taxQuery?.[ taxonomy.slug ] || [];
+				const handleChange = ( newTermIds ) =>
+					onChange( {
+						taxQuery: {
+							...taxQuery,
+							[ taxonomy.slug ]: newTermIds,
+						},
+					} );
+
+				return (
+					<TaxonomyItem
+						key={ taxonomy.slug }
+						taxonomy={ taxonomy }
+						value={ value }
+						onChange={ handleChange }
+					/>
 				);
-				if ( termId ) accumulator.add( termId );
-				return accumulator;
-			}, new Set() )
-		);
-		const newTaxQuery = {
-			...query.taxQuery,
-			[ taxonomySlug ]: termIds,
-		};
-		onChange( { taxQuery: newTaxQuery } );
+			} ) }
+		</>
+	);
+}
+function TaxonomyItem( { taxonomy, value, onChange } ) {
+	const { terms } = useTaxonomyTerms( taxonomy.slug );
+	if ( ! terms?.length ) {
+		return null;
+	}
+
+	const onTermsChange = ( newTermValues ) => {
+		const termIds = new Set();
+		for ( const termValue of newTermValues ) {
+			const termId = getTermIdByTermValue( terms, termValue );
+			if ( termId ) {
+				termIds.add( termId );
+			}
+		}
+
+		onChange( Array.from( termIds ) );
 	};
-	// Returns only the existing term ids in proper format to be
+
+	// Selects only the existing term ids in proper format to be
 	// used in `FormTokenField`. This prevents the component from
 	// crashing in the editor, when non existing term ids were provided.
-	const getExistingTaxQueryValue = ( taxonomySlug ) => {
-		const taxonomyInfo = taxonomiesInfo.find(
-			( { slug } ) => slug === taxonomySlug
-		);
-		if ( ! taxonomyInfo ) return [];
-		return ( query.taxQuery?.[ taxonomySlug ] || [] ).reduce(
-			( accumulator, termId ) => {
-				const term = taxonomyInfo.terms.mapById[ termId ];
-				if ( term ) {
-					accumulator.push( {
-						id: termId,
-						value: term.name,
-					} );
-				}
-				return accumulator;
-			},
-			[]
-		);
-	};
+	const taxQueryValue = value
+		.map( ( termId ) => terms.find( ( t ) => t.id === termId ) )
+		.filter( Boolean )
+		.map( ( term ) => ( { id: term.id, value: term.name } ) );
+
 	return (
-		<>
-			{ !! taxonomiesInfo?.length &&
-				taxonomiesInfo.map( ( { slug, name, terms } ) => {
-					if ( ! terms?.names?.length ) {
-						return null;
-					}
-					return (
-						<div
-							key={ slug }
-							className="block-library-query-inspector__taxonomy-control"
-						>
-							<FormTokenField
-								label={ name }
-								value={ getExistingTaxQueryValue( slug ) }
-								suggestions={ terms.names }
-								onChange={ onTermsChange( slug ) }
-							/>
-						</div>
-					);
-				} ) }
-		</>
+		<div className="block-library-query-inspector__taxonomy-control">
+			<FormTokenField
+				label={ taxonomy.name }
+				value={ taxQueryValue }
+				suggestions={ terms.map( ( t ) => t.name ) }
+				onChange={ onTermsChange }
+				__experimentalShowHowTo={ false }
+			/>
+		</div>
 	);
 }

package/src/query/utils.js

@@ -162,7 +162,7 @@ export function useAllowedControls( attributes ) {
 			select( blocksStore ).getActiveBlockVariation(
 				queryLoopName,
 				attributes
-			)?.allowControls,
+			)?.allowedControls,
 
 		[ attributes ]
 	);

package/src/quote/block.json

@@ -29,7 +29,6 @@
 	},
 	"supports": {
 		"anchor": true,
-		"__experimentalSlashInserter": true,
 		"__experimentalOnEnter": true,
 		"typography": {
 			"fontSize": true,

package/src/rss/index.php

@@ -20,7 +20,7 @@ function render_block_core_rss( $attributes ) {
 	$rss = fetch_feed( $attributes['feedURL'] );
 
 	if ( is_wp_error( $rss ) ) {
-		return '<div class="components-placeholder"><div class="notice notice-error"><strong>' . __( 'RSS Error:' ) . '</strong> ' . $rss->get_error_message() . '</div></div>';
+		return '<div class="components-placeholder"><div class="notice notice-error"><strong>' . __( 'RSS Error:' ) . '</strong> ' . esc_html( $rss->get_error_message() ) . '</div></div>';
 	}
 
 	if ( ! $rss->get_item_quantity() ) {
@@ -48,8 +48,8 @@ function render_block_core_rss( $attributes ) {
 			if ( $date ) {
 				$date = sprintf(
 					'<time datetime="%1$s" class="wp-block-rss__item-publish-date">%2$s</time> ',
-					date_i18n( get_option( 'c' ), $date ),
-					date_i18n( get_option( 'date_format' ), $date )
+					esc_attr( date_i18n( get_option( 'c' ), $date ) ),
+					esc_attr( date_i18n( get_option( 'date_format' ), $date ) )
 				);
 			}
 		}

package/src/search/edit.js

@@ -16,6 +16,7 @@ import {
 	getTypographyClassesAndStyles as useTypographyProps,
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
+	useSetting,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -113,7 +114,11 @@ export default function SearchEdit( {
 	}
 
 	const colorProps = useColorProps( attributes );
-	const typographyProps = useTypographyProps( attributes );
+	const fluidTypographyEnabled = useSetting( 'typography.fluid' );
+	const typographyProps = useTypographyProps(
+		attributes,
+		fluidTypographyEnabled
+	);
 	const unitControlInstanceId = useInstanceId( UnitControl );
 	const unitControlInputId = `wp-block-search__width-${ unitControlInstanceId }`;
 	const isButtonPositionInside = 'button-inside' === buttonPosition;

package/src/search/index.php

@@ -367,12 +367,12 @@ function styles_for_block_core_search( $attributes ) {
 	// Add color styles.
 	$has_text_color = ! empty( $attributes['style']['color']['text'] );
 	if ( $has_text_color ) {
-		$button_styles[] = sprintf( 'color: %s;', esc_attr( $attributes['style']['color']['text'] ) );
+		$button_styles[] = sprintf( 'color: %s;', $attributes['style']['color']['text'] );
 	}
 
 	$has_background_color = ! empty( $attributes['style']['color']['background'] );
 	if ( $has_background_color ) {
-		$button_styles[] = sprintf( 'background-color: %s;', esc_attr( $attributes['style']['color']['background'] ) );
+		$button_styles[] = sprintf( 'background-color: %s;', $attributes['style']['color']['background'] );
 	}
 
 	$has_custom_gradient = ! empty( $attributes['style']['color']['gradient'] );
@@ -381,7 +381,7 @@ function styles_for_block_core_search( $attributes ) {
 	}
 
 	// Get typography styles to be shared across inner elements.
-	$typography_styles = get_typography_styles_for_block_core_search( $attributes );
+	$typography_styles = esc_attr( get_typography_styles_for_block_core_search( $attributes ) );
 	if ( ! empty( $typography_styles ) ) {
 		$label_styles [] = $typography_styles;
 		$button_styles[] = $typography_styles;
@@ -399,9 +399,9 @@ function styles_for_block_core_search( $attributes ) {
 	}
 
 	return array(
-		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $input_styles ) ) ) : '',
-		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $button_styles ) ) ) : '',
-		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) : '',
+		'input'   => ! empty( $input_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $input_styles ) ) ) ) : '',
+		'button'  => ! empty( $button_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $button_styles ) ) ) ) : '',
+		'wrapper' => ! empty( $wrapper_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $wrapper_styles ) ) ) ) : '',
 		'label'   => ! empty( $label_styles ) ? sprintf( ' style="%s"', esc_attr( safecss_filter_attr( implode( ' ', $label_styles ) ) ) ) : '',
 	);
 }
@@ -442,31 +442,39 @@ function get_typography_styles_for_block_core_search( $attributes ) {
 
 	// Add typography styles.
 	if ( ! empty( $attributes['style']['typography']['fontSize'] ) ) {
-		$typography_styles[] = sprintf( 'font-size: %s;', esc_attr( $attributes['style']['typography']['fontSize'] ) );
+		$typography_styles[] = sprintf(
+			'font-size: %s;',
+			wp_get_typography_font_size_value(
+				array(
+					'size' => $attributes['style']['typography']['fontSize'],
+				)
+			)
+		);
+
 	}
 
 	if ( ! empty( $attributes['style']['typography']['fontFamily'] ) ) {
-		$typography_styles[] = sprintf( 'font-family: %s;', esc_attr( $attributes['style']['typography']['fontFamily'] ) );
+		$typography_styles[] = sprintf( 'font-family: %s;', $attributes['style']['typography']['fontFamily'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['letterSpacing'] ) ) {
-		$typography_styles[] = sprintf( 'letter-spacing: %s;', esc_attr( $attributes['style']['typography']['letterSpacing'] ) );
+		$typography_styles[] = sprintf( 'letter-spacing: %s;', $attributes['style']['typography']['letterSpacing'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['fontWeight'] ) ) {
-		$typography_styles[] = sprintf( 'font-weight: %s;', esc_attr( $attributes['style']['typography']['fontWeight'] ) );
+		$typography_styles[] = sprintf( 'font-weight: %s;', $attributes['style']['typography']['fontWeight'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['fontStyle'] ) ) {
-		$typography_styles[] = sprintf( 'font-style: %s;', esc_attr( $attributes['style']['typography']['fontStyle'] ) );
+		$typography_styles[] = sprintf( 'font-style: %s;', $attributes['style']['typography']['fontStyle'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['lineHeight'] ) ) {
-		$typography_styles[] = sprintf( 'line-height: %s;', esc_attr( $attributes['style']['typography']['lineHeight'] ) );
+		$typography_styles[] = sprintf( 'line-height: %s;', $attributes['style']['typography']['lineHeight'] );
 	}
 
 	if ( ! empty( $attributes['style']['typography']['textTransform'] ) ) {
-		$typography_styles[] = sprintf( 'text-transform: %s;', esc_attr( $attributes['style']['typography']['textTransform'] ) );
+		$typography_styles[] = sprintf( 'text-transform: %s;', $attributes['style']['typography']['textTransform'] );
 	}
 
 	return implode( '', $typography_styles );

package/src/site-logo/edit.js

@@ -81,12 +81,12 @@ const SiteLogo = ( {
 	} );
 	const { imageEditing, maxWidth, title } = useSelect( ( select ) => {
 		const { getSettings } = select( blockEditorStore );
-		const siteEntities = select( coreStore ).getEditedEntityRecord(
+		const siteEntities = select( coreStore ).getEntityRecord(
 			'root',
-			'site'
+			'__unstableBase'
 		);
 		return {
-			title: siteEntities.title,
+			title: siteEntities?.name,
 			...pick( getSettings(), [ 'imageEditing', 'maxWidth' ] ),
 		};
 	}, [] );
@@ -370,12 +370,14 @@ export default function LogoEdit( {
 	} = useSelect( ( select ) => {
 		const { canUser, getEntityRecord, getEditedEntityRecord } =
 			select( coreStore );
-		const siteSettings = getEditedEntityRecord( 'root', 'site' );
-		const siteData = getEntityRecord( 'root', '__unstableBase' );
-		const _siteLogo = siteSettings?.site_logo;
-		const _readOnlyLogo = siteData?.site_logo;
 		const _canUserEdit = canUser( 'update', 'settings' );
-		const _siteLogoId = _canUserEdit ? _siteLogo : _readOnlyLogo;
+		const siteSettings = _canUserEdit
+			? getEditedEntityRecord( 'root', 'site' )
+			: undefined;
+		const siteData = getEntityRecord( 'root', '__unstableBase' );
+		const _siteLogoId = _canUserEdit
+			? siteSettings?.site_logo
+			: siteData?.site_logo;
 		const _siteIconId = siteSettings?.site_icon;
 		const mediaItem =
 			_siteLogoId &&

package/src/site-logo/editor.scss

@@ -47,6 +47,7 @@
 
 	// Style the placeholder.
 	.components-placeholder {
+		display: flex;
 		justify-content: center;
 		align-items: center;
 		padding: 0;

package/src/site-title/block.json

@@ -60,5 +60,6 @@
 			}
 		}
 	},
-	"editorStyle": "wp-block-site-title-editor"
+	"editorStyle": "wp-block-site-title-editor",
+	"style": "wp-block-site-title"
 }

package/src/site-title/editor.scss

@@ -2,3 +2,9 @@
 	padding: 1em 0;
 	border: 1px dashed;
 }
+
+.editor-styles-wrapper .wp-block-site-title {
+	a {
+		color: inherit;
+	}
+}

package/src/site-title/style.scss

@@ -0,0 +1,5 @@
+.wp-block-site-title {
+	a {
+		color: inherit;
+	}
+}

package/src/style.scss

@@ -44,6 +44,7 @@
 @import "./search/style.scss";
 @import "./separator/style.scss";
 @import "./site-logo/style.scss";
+@import "./site-title/style.scss";
 @import "./social-links/style.scss";
 @import "./spacer/style.scss";
 @import "./tag-cloud/style.scss";

package/src/table/state.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, mapValues, every, pick } from 'lodash';
+import { get, mapValues, pick } from 'lodash';
 
 const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
 
@@ -309,7 +309,7 @@ export function toggleSection( state, sectionName ) {
  * @return {boolean} True if the table section is empty, false otherwise.
  */
 export function isEmptyTableSection( section ) {
-	return ! section || ! section.length || every( section, isEmptyRow );
+	return ! section || ! section.length || section.every( isEmptyRow );
 }
 
 /**

package/src/table-of-contents/edit.js

@@ -21,7 +21,6 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { useDisabled } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { renderToString, useEffect } from '@wordpress/element';
@@ -55,7 +54,6 @@ export default function TableOfContentsEdit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps();
-	const disabledRef = useDisabled();
 
 	const canInsertList = useSelect(
 		( select ) => {
@@ -295,7 +293,7 @@ export default function TableOfContentsEdit( {
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol ref={ disabledRef }>
+				<ol inert="true">
 					<TableOfContentsList nestedHeadingList={ headingTree } />
 				</ol>
 			</nav>

package/src/tag-cloud/block.json

@@ -40,6 +40,14 @@
 		"spacing": {
 			"margin": true,
 			"padding": true
+		},
+		"typography": {
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
 		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"

package/src/tag-cloud/edit.js

@@ -168,7 +168,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 			{ inspectorControls }
 			<div { ...useBlockProps() }>
 				<ServerSideRender
-					key="tag-cloud"
+					skipBlockSupportAttributes
 					block="core/tag-cloud"
 					attributes={ attributes }
 				/>

package/src/tag-cloud/style.scss

@@ -1,4 +1,7 @@
 .wp-block-tag-cloud {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&.aligncenter {
 		text-align: center;
 		justify-content: center;

package/src/template-part/index.js

@@ -62,13 +62,13 @@ export const init = () => {
 		'blockEditor.__unstableCanInsertBlockType',
 		'removeTemplatePartsFromPostTemplates',
 		(
-			can,
+			canInsert,
 			blockType,
 			rootClientId,
 			{ getBlock, getBlockParentsByBlockName }
 		) => {
 			if ( blockType.name !== 'core/template-part' ) {
-				return can;
+				return canInsert;
 			}
 
 			for ( const disallowedParentType of DISALLOWED_PARENTS ) {

package/src/template-part/index.php

@@ -189,6 +189,10 @@ function build_template_part_block_area_variations() {
  * @return array Array containing the block variation objects.
  */
 function build_template_part_block_instance_variations() {
+	// Block themes are unavailable during installation.
+	if ( wp_installing() ) {
+		return array();
+	}
 	$variations     = array();
 	$template_parts = get_block_templates(
 		array(

package/src/video/edit.js

@@ -13,6 +13,7 @@ import {
 	Disabled,
 	PanelBody,
 	Spinner,
+	Placeholder,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -43,6 +44,23 @@ import VideoCommonSettings from './edit-common-settings';
 import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 
+// Much of this description is duplicated from MediaPlaceholder.
+const placeholder = ( content ) => {
+	return (
+		<Placeholder
+			className="block-editor-media-placeholder"
+			withIllustration={ true }
+			icon={ icon }
+			label={ __( 'Video' ) }
+			instructions={ __(
+				'Upload a video file, pick one from your media library, or add one with a URL.'
+			) }
+		>
+			{ content }
+		</Placeholder>
+	);
+};
+
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -146,6 +164,7 @@ function VideoEdit( {
 					allowedTypes={ ALLOWED_MEDIA_TYPES }
 					value={ attributes }
 					onError={ onUploadError }
+					placeholder={ placeholder }
 				/>
 			</div>
 		);

package/src/video/editor.scss

@@ -1,3 +1,40 @@
+// Provide special styling for the placeholder.
+// @todo: this particular minimal style of placeholder could be componentized further.
+.wp-block-video.wp-block-video {
+	// Show Placeholder style on-select.
+	&.is-selected .components-placeholder {
+		// Block UI appearance.
+		color: $gray-900;
+		background-color: $white;
+		box-shadow: inset 0 0 0 $border-width $gray-900;
+		border: none;
+
+		// @todo: this should eventually be overridden by a custom border-radius set in the inspector.
+		border-radius: $radius-block-ui;
+
+		> svg {
+			opacity: 0;
+		}
+
+		.components-placeholder__illustration {
+			display: none;
+		}
+
+		&::before {
+			opacity: 0;
+		}
+	}
+
+	// Remove the transition while we still have a legacy placeholder style.
+	// Otherwise the content jumps between the 1px placeholder border, and any inherited custom
+	// parent border that may get applied when you deselect.
+	.components-placeholder__label,
+	.components-placeholder__instructions,
+	.components-button {
+		transition: none;
+	}
+}
+
 .wp-block[data-align="center"] > .wp-block-video {
 	text-align: center;
 }