@wordpress/block-library 8.21.0 → 8.22.0

package/src/query/view.js

@@ -33,7 +33,14 @@ store( {
 		core: {
 			query: {
 				navigate: async ( { event, ref, context } ) => {
-					if ( isValidLink( ref ) && isValidEvent( event ) ) {
+					const isDisabled = ref.closest( '[data-wp-navigation-id]' )
+						?.dataset.wpNavigationDisabled;
+
+					if (
+						isValidLink( ref ) &&
+						isValidEvent( event ) &&
+						! isDisabled
+					) {
 						event.preventDefault();
 
 						const id = ref.closest( '[data-wp-navigation-id]' )
@@ -70,7 +77,9 @@ store( {
 					}
 				},
 				prefetch: async ( { ref } ) => {
-					if ( isValidLink( ref ) ) {
+					const isDisabled = ref.closest( '[data-wp-navigation-id]' )
+						?.dataset.wpNavigationDisabled;
+					if ( isValidLink( ref ) && ! isDisabled ) {
 						await prefetch( ref.href );
 					}
 				},

package/src/query-pagination-next/index.php

@@ -63,7 +63,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		wp_reset_postdata(); // Restore original Post Data.
 	}
 
-	if ( $enhanced_pagination ) {
+	if ( $enhanced_pagination && isset( $content ) ) {
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag(
 			array(

package/src/query-pagination-previous/index.php

@@ -51,7 +51,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 		);
 	}
 
-	if ( $enhanced_pagination ) {
+	if ( $enhanced_pagination && isset( $content ) ) {
 		$p = new WP_HTML_Tag_Processor( $content );
 		if ( $p->next_tag(
 			array(

package/src/search/edit.js

@@ -16,7 +16,7 @@ import {
 	getTypographyClassesAndStyles as useTypographyProps,
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
-	useSetting,
+	useSettings,
 } from '@wordpress/block-editor';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
@@ -125,8 +125,10 @@ export default function SearchEdit( {
 	}
 
 	const colorProps = useColorProps( attributes );
-	const fluidTypographySettings = useSetting( 'typography.fluid' );
-	const layout = useSetting( 'layout' );
+	const [ fluidTypographySettings, layout ] = useSettings(
+		'typography.fluid',
+		'layout'
+	);
 	const typographyProps = useTypographyProps( attributes, {
 		typography: {
 			fluid: fluidTypographySettings,

package/src/social-link/edit.native.js

@@ -16,7 +16,7 @@ import {
 	ToolbarButton,
 	LinkSettingsNavigation,
 } from '@wordpress/components';
-import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { compose } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { link, Icon } from '@wordpress/icons';
 import { withSelect } from '@wordpress/data';
@@ -30,10 +30,6 @@ const DEFAULT_ACTIVE_ICON_STYLES = {
 	backgroundColor: '#f0f0f0',
 	color: '#444',
 };
-const DEFAULT_INACTIVE_ICON_STYLES = {
-	backgroundColor: '#0000003f',
-	color: '#fff',
-};
 const ANIMATION_DELAY = 300;
 const ANIMATION_DURATION = 400;
 
@@ -66,12 +62,6 @@ const SocialLinkEdit = ( {
 		styles[ `wp-social-link-${ service }` ] ||
 		styles[ `wp-social-link` ] ||
 		DEFAULT_ACTIVE_ICON_STYLES;
-	const inactiveIcon =
-		usePreferredColorSchemeStyle(
-			styles.inactiveIcon,
-			styles.inactiveIconDark
-		) || DEFAULT_INACTIVE_ICON_STYLES;
-
 	const animatedValue = useRef( new Animated.Value( 0 ) ).current;
 
 	const IconComponent = getIconBySite( service )();
@@ -94,23 +84,13 @@ const SocialLinkEdit = ( {
 	}, [ url ] );
 
 	const interpolationColors = {
-		backgroundColor: animatedValue.interpolate( {
-			inputRange: [ 0, 1 ],
-			outputRange: [
-				inactiveIcon.backgroundColor,
-				activeIcon.backgroundColor,
-			],
-		} ),
-		color: animatedValue.interpolate( {
+		opacity: animatedValue.interpolate( {
 			inputRange: [ 0, 1 ],
-			outputRange: [ inactiveIcon.color, activeIcon.color ],
+			outputRange: [ 0.3, 1 ],
 		} ),
-		stroke: '',
 	};
 
-	const { backgroundColor, color, stroke } = hasUrl
-		? activeIcon
-		: interpolationColors;
+	const { opacity } = hasUrl ? activeIcon : interpolationColors;
 
 	function animateColors() {
 		Animated.sequence( [
@@ -200,12 +180,18 @@ const SocialLinkEdit = ( {
 				accessibilityHint={ accessibilityHint }
 			>
 				<Animated.View
-					style={ [ styles.iconContainer, { backgroundColor } ] }
+					style={ [
+						styles.iconContainer,
+						{
+							backgroundColor: activeIcon.backgroundColor,
+							opacity,
+						},
+					] }
 				>
 					<Icon
 						animated
 						icon={ IconComponent }
-						style={ { stroke, color } }
+						style={ { color: activeIcon.color } }
 					/>
 				</Animated.View>
 			</TouchableWithoutFeedback>

package/src/social-link/editor.native.scss

@@ -13,15 +13,6 @@
 	justify-content: center;
 }
 
-.inactiveIcon {
-	background-color: $light-quaternary;
-	color: $white;
-}
-
-.inactiveIconDark {
-	background-color: $dark-quaternary;
-}
-
 .container {
 	margin: $block-selected-margin;
 }

package/src/social-link/index.php

@@ -62,10 +62,10 @@ function render_block_core_social_link( $attributes, $content, $block ) {
 	$processor = new WP_HTML_Tag_Processor( $link );
 	$processor->next_tag( 'a' );
 	if ( $open_in_new_tab ) {
-		$processor->set_attribute( 'rel', esc_attr( $rel ) . ' noopener nofollow' );
+		$processor->set_attribute( 'rel', trim( $rel . ' noopener nofollow' ) );
 		$processor->set_attribute( 'target', '_blank' );
 	} elseif ( '' !== $rel ) {
-		$processor->set_attribute( 'rel', esc_attr( $rel ) );
+		$processor->set_attribute( 'rel', trim( $rel ) );
 	}
 	return $processor->get_updated_html();
 }

package/src/spacer/controls.js

@@ -4,7 +4,7 @@
 import { __ } from '@wordpress/i18n';
 import {
 	InspectorControls,
-	useSetting,
+	useSettings,
 	__experimentalSpacingSizesControl as SpacingSizesControl,
 	isValueSpacingPreset,
 } from '@wordpress/block-editor';
@@ -25,22 +25,19 @@ import { MIN_SPACER_SIZE } from './constants';
 
 function DimensionInput( { label, onChange, isResizing, value = '' } ) {
 	const inputId = useInstanceId( UnitControl, 'block-spacer-height-input' );
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+	const [ spacingSizes, spacingUnits ] = useSettings(
+		'spacing.spacingSizes',
+		'spacing.units'
+	);
 	// In most contexts the spacer size cannot meaningfully be set to a
 	// percentage, since this is relative to the parent container. This
 	// unit is disabled from the UI.
-	const availableUnitSettings = (
-		useSetting( 'spacing.units' ) || undefined
-	)?.filter( ( availableUnit ) => availableUnit !== '%' );
+	const availableUnits = spacingUnits
+		? spacingUnits.filter( ( unit ) => unit !== '%' )
+		: [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
 	const units = useCustomUnits( {
-		availableUnits: availableUnitSettings || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits,
 		defaultValues: { px: 100, em: 10, rem: 10, vw: 10, vh: 25 },
 	} );
 

package/src/spacer/controls.native.js

@@ -8,7 +8,7 @@ import {
 	__experimentalUseCustomUnits as useCustomUnits,
 } from '@wordpress/components';
 import { useCallback } from '@wordpress/element';
-import { useSetting } from '@wordpress/block-editor';
+import { useSettings } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -59,14 +59,9 @@ function Controls( {
 		[ height, width ]
 	);
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'px',
-			'em',
-			'rem',
-			'vw',
-			'vh',
-		],
+		availableUnits: availableUnits || [ 'px', 'em', 'rem', 'vw', 'vh' ],
 		defaultValues: DEFAULT_VALUES,
 	} );
 

package/src/spacer/edit.js

@@ -8,7 +8,7 @@ import classnames from 'classnames';
  */
 import {
 	useBlockProps,
-	useSetting,
+	useSettings,
 	getCustomValueFromPreset,
 	getSpacingPresetCssVar,
 	store as blockEditorStore,
@@ -107,7 +107,7 @@ const SpacerEdit = ( {
 	const { layout = {} } = blockStyle;
 	const { selfStretch, flexSize } = layout;
 
-	const spacingSizes = useSetting( 'spacing.spacingSizes' );
+	const [ spacingSizes ] = useSettings( 'spacing.spacingSizes' );
 
 	const [ isResizing, setIsResizing ] = useState( false );
 	const [ temporaryHeight, setTemporaryHeight ] = useState( null );

package/src/spacer/edit.native.js

@@ -11,7 +11,7 @@ import { withPreferredColorScheme } from '@wordpress/compose';
 import {
 	InspectorControls,
 	isValueSpacingPreset,
-	useSetting,
+	useSettings,
 	getCustomValueFromPreset,
 	getPxFromCssUnit,
 } from '@wordpress/block-editor';
@@ -39,10 +39,11 @@ const Spacer = ( {
 		fontSize: DEFAULT_FONT_SIZE,
 	};
 	const { height, width } = attributes;
-	const spacingSizes = [
-		{ name: 0, slug: '0', size: 0 },
-		...( useSetting( 'spacing.spacingSizes' ) || [] ),
-	];
+	const spacingSizes = [ { name: 0, slug: '0', size: 0 } ];
+	const [ settingsSizes ] = useSettings( 'spacing.spacingSizes' );
+	if ( settingsSizes ) {
+		spacingSizes.push( ...settingsSizes );
+	}
 	const { orientation } = context;
 	const defaultStyle = getStylesFromColorScheme(
 		styles.staticSpacer,

package/src/tag-cloud/edit.js

@@ -18,7 +18,7 @@ import { __ } from '@wordpress/i18n';
 import {
 	InspectorControls,
 	useBlockProps,
-	useSetting,
+	useSettings,
 } from '@wordpress/block-editor';
 import ServerSideRender from '@wordpress/server-side-render';
 import { store as coreStore } from '@wordpress/core-data';
@@ -49,13 +49,9 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 		largestFontSize,
 	} = attributes;
 
+	const [ availableUnits ] = useSettings( 'spacing.units' );
 	const units = useCustomUnits( {
-		availableUnits: useSetting( 'spacing.units' ) || [
-			'%',
-			'px',
-			'em',
-			'rem',
-		],
+		availableUnits: availableUnits || [ '%', 'px', 'em', 'rem' ],
 	} );
 
 	const getTaxonomyOptions = () => {

package/src/template-part/edit/inner-blocks.js

@@ -5,7 +5,7 @@ import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	InnerBlocks,
 	useInnerBlocksProps,
-	useSetting,
+	useSettings,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { useSelect } from '@wordpress/data';
@@ -21,8 +21,8 @@ export default function TemplatePartInnerBlocks( {
 		const { getSettings } = select( blockEditorStore );
 		return getSettings()?.supportsLayout;
 	}, [] );
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const usedLayout = !! layout && layout.inherit ? defaultLayout : layout;
+	const [ defaultLayout ] = useSettings( 'layout' );
+	const usedLayout = layout?.inherit ? defaultLayout || {} : layout;
 
 	const [ blocks, onInput, onChange ] = useEntityBlockEditor(
 		'postType',

package/src/term-description/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 3,
-	"__experimental": "fse",
 	"name": "core/term-description",
 	"title": "Term Description",
 	"category": "theme",