@wordpress/block-library 11.0.0 → 11.0.2-next.v.202609171837.0

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

@@ -1,6 +1,6 @@
 import {
 	TextControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	Notice,
 	__experimentalVStack as VStack,
 	__experimentalToolsPanel as ToolsPanel,
@@ -237,10 +237,10 @@ export default function QueryInspectorControls( props ) {
 										inherit
 											? __(
 													'Display a list of posts or custom post types based on the current template.'
-											  )
+												)
 											: __(
 													'Display a list of posts or custom post types based on specific criteria.'
-											  )
+												)
 									}
 									value={ !! inherit ? 'default' : 'custom' }
 								>
@@ -275,7 +275,7 @@ export default function QueryInspectorControls( props ) {
 							isShownByDefault
 						>
 							{ postTypesSelectOptions.length > 2 ? (
-								<SelectControl
+								<WCSelectControl
 									options={ postTypesSelectOptions }
 									value={ postType }
 									label={ postTypeControlLabel }

package/src/query/edit/inspector-controls/order-control.jsx

@@ -1,4 +1,4 @@
-import { SelectControl } from '@wordpress/components';
+import { SelectControl as WCSelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const defaultOrderByOptions = [
@@ -29,7 +29,7 @@ function OrderControl( {
 	onChange,
 } ) {
 	return (
-		<SelectControl
+		<WCSelectControl
 			label={ __( 'Order by' ) }
 			value={ `${ orderBy }/${ order }` }
 			options={ orderByOptions }

package/src/query/edit/inspector-controls/sticky-control.jsx

@@ -1,4 +1,4 @@
-import { SelectControl } from '@wordpress/components';
+import { SelectControl as WCSelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const stickyOptions = [
@@ -10,7 +10,7 @@ const stickyOptions = [
 
 export default function StickyControl( { value, onChange } ) {
 	return (
-		<SelectControl
+		<WCSelectControl
 			label={ __( 'Sticky posts' ) }
 			options={ stickyOptions }
 			value={ value }

package/src/query/view.js

@@ -34,9 +34,8 @@ store(
 				if ( isValidLink( ref ) && isValidEvent( event ) ) {
 					event.preventDefault();
 
-					const { actions } = yield import(
-						'@wordpress/interactivity-router'
-					);
+					const { actions } =
+						yield import( '@wordpress/interactivity-router' );
 					yield actions.navigate( ref.href );
 					ctx.url = ref.href;
 
@@ -48,9 +47,8 @@ store(
 			*prefetch() {
 				const { ref } = getElement();
 				if ( isValidLink( ref ) ) {
-					const { actions } = yield import(
-						'@wordpress/interactivity-router'
-					);
+					const { actions } =
+						yield import( '@wordpress/interactivity-router' );
 					yield actions.prefetch( ref.href );
 				}
 			},
@@ -60,9 +58,8 @@ store(
 				const { url } = getContext();
 				const { ref } = getElement();
 				if ( url && isValidLink( ref ) ) {
-					const { actions } = yield import(
-						'@wordpress/interactivity-router'
-					);
+					const { actions } =
+						yield import( '@wordpress/interactivity-router' );
 					yield actions.prefetch( ref.href );
 				}
 			},

package/src/query-pagination/editor.scss

@@ -6,9 +6,6 @@
 :where(.editor-styles-wrapper) {
 	.wp-block-query-pagination {
 		max-width: 100%;
-		&.block-editor-block-list__layout {
-			margin: 0;
-		}
 	}
 }
 

package/src/query-title/use-archive-label.js

@@ -21,7 +21,7 @@ export function useArchiveLabel() {
 					'postType',
 					'wp_template',
 					templateId
-			  )?.slug
+				)?.slug
 			: null;
 	}, [] );
 	const taxonomyMatches = templateSlug?.match(

package/src/quote/deprecated.jsx

@@ -20,9 +20,9 @@ export const migrateToQuoteV2 = ( attributes ) => {
 							source: 'html',
 						},
 					},
-			  } ).map( ( { content } ) =>
+				} ).map( ( { content } ) =>
 					createBlock( 'core/paragraph', { content } )
-			  )
+				)
 			: createBlock( 'core/paragraph' ),
 	];
 };

package/src/quote/transforms.js

@@ -194,7 +194,7 @@ const transforms = {
 							createBlock( 'core/paragraph', {
 								content: citation,
 							} ),
-					  ];
+						];
 			},
 		},
 		{
@@ -211,7 +211,7 @@ const transforms = {
 								createBlock( 'core/paragraph', {
 									content: citation,
 								} ),
-						  ]
+							]
 				),
 		},
 	],
@@ -223,7 +223,7 @@ const transforms = {
 					createBlock( 'core/paragraph', {
 						content: citation,
 					} ),
-			  ],
+				],
 };
 
 export default transforms;

package/src/search/edit.jsx

@@ -13,7 +13,7 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { useEffect, useRef } from '@wordpress/element';
 import {
-	SelectControl,
+	SelectControl as WCSelectControl,
 	ToggleControl,
 	ResizableBox,
 	__experimentalUseCustomUnits as useCustomUnits,
@@ -236,7 +236,7 @@ export default function SearchEdit( {
 							borderProps.style?.borderBottomLeftRadius,
 						borderBottomRightRadius:
 							borderProps.style?.borderBottomRightRadius,
-				  }
+					}
 				: borderProps.style ),
 			...typographyProps.style,
 			textDecoration: undefined,
@@ -287,7 +287,7 @@ export default function SearchEdit( {
 							borderProps.style?.borderBottomLeftRadius,
 						borderBottomRightRadius:
 							borderProps.style?.borderBottomRightRadius,
-				  }
+					}
 				: borderProps.style ),
 		};
 		return (
@@ -373,7 +373,7 @@ export default function SearchEdit( {
 						} }
 						isShownByDefault
 					>
-						<SelectControl
+						<WCSelectControl
 							value={ buttonPosition }
 							label={ __( 'Button position' ) }
 							onChange={ ( value ) => {
@@ -490,7 +490,7 @@ export default function SearchEdit( {
 				</ToolsPanel>
 			</InspectorControls>
 			<InspectorControls group="advanced">
-				<SelectControl
+				<WCSelectControl
 					label={ __( 'HTML element' ) }
 					value={ tagName ?? '' }
 					options={ [
@@ -536,7 +536,7 @@ export default function SearchEdit( {
 						borderProps.style?.borderBottomLeftRadius,
 					borderBottomRightRadius:
 						borderProps.style?.borderBottomRightRadius,
-			  };
+				};
 
 		if ( isButtonPositionInside ) {
 			// We have button inside wrapper and a border radius value to apply.

package/src/search/theme.scss

@@ -1,5 +1,5 @@
 :where(.wp-block-search .wp-block-search__label) {
-	font-weight: bold;
+	font-weight: 700;
 }
 
 .wp-block-search__button {

package/src/separator/edit.jsx

@@ -5,13 +5,16 @@ import {
 	useBlockProps,
 	__experimentalUseColorProps as useColorProps,
 } from '@wordpress/block-editor';
-import { HorizontalRule, SelectControl } from '@wordpress/components';
+import {
+	HorizontalRule,
+	SelectControl as WCSelectControl,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import useDeprecatedOpacity from './use-deprecated-opacity';
 
 const HtmlElementControl = ( { tagName, setAttributes } ) => {
 	return (
-		<SelectControl
+		<WCSelectControl
 			label={ __( 'HTML element' ) }
 			value={ tagName }
 			onChange={ ( newValue ) => setAttributes( { tagName: newValue } ) }
@@ -23,10 +26,10 @@ const HtmlElementControl = ( { tagName, setAttributes } ) => {
 				tagName === 'hr'
 					? __(
 							'Only select <hr> if the separator conveys important information and should be announced by screen readers.'
-					  )
+						)
 					: __(
 							'The <div> element should only be used if the block is a design element with no semantic meaning.'
-					  )
+						)
 			}
 		/>
 	);

package/src/social-links/edit.jsx

@@ -13,7 +13,7 @@ import {
 } from '@wordpress/block-editor';
 import {
 	ToggleControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 } from '@wordpress/components';
@@ -178,7 +178,7 @@ export function SocialLinksEdit( props ) {
 							setAttributes( { size: undefined } )
 						}
 					>
-						<SelectControl
+						<WCSelectControl
 							label={ __( 'Icon size' ) }
 							onChange={ ( newSize ) => {
 								setAttributes( {

package/src/table/state.js

@@ -294,7 +294,7 @@ export function deleteColumn( state, { columnIndex } ) {
 							row.cells.length >= columnIndex
 								? row.cells.filter(
 										( cell, index ) => index !== columnIndex
-								  )
+									)
 								: row.cells,
 					} ) )
 					.filter( ( row ) => row.cells.length ),

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

@@ -9,7 +9,7 @@ import { createBlock } from '@wordpress/blocks';
 import {
 	Placeholder,
 	ToggleControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	ToolbarButton,
 	ToolbarGroup,
 	__experimentalConfirmDialog as ConfirmDialog,
@@ -187,10 +187,10 @@ export default function TableOfContentsEdit( {
 							onlyIncludeCurrentPage
 								? __(
 										'Only including headings from the current page (if the post is paginated).'
-								  )
+									)
 								: __(
 										'Include headings from all pages (if the post is paginated).'
-								  )
+									)
 						}
 					/>
 				</ToolsPanelItem>
@@ -202,7 +202,7 @@ export default function TableOfContentsEdit( {
 					}
 					isShownByDefault
 				>
-					<SelectControl
+					<WCSelectControl
 						label={ __( 'Include headings down to level' ) }
 						value={ maxLevel || '' }
 						options={ [
@@ -223,10 +223,10 @@ export default function TableOfContentsEdit( {
 							! maxLevel
 								? __(
 										'Including all heading levels in the table of contents.'
-								  )
+									)
 								: __(
 										'Only include headings up to and including this level.'
-								  )
+									)
 						}
 					/>
 				</ToolsPanelItem>

package/src/table-of-contents/utils.ts

@@ -97,7 +97,7 @@ export function createListItemBlocks(
 					content: link
 						? `<a href="${ escapeAttribute(
 								link
-						  ) }">${ escapeEditableHTML( content ) }</a>`
+							) }">${ escapeEditableHTML( content ) }</a>`
 						: escapeEditableHTML( content ),
 				},
 				children?.length
@@ -107,7 +107,7 @@ export function createListItemBlocks(
 								{ ordered },
 								createListItemBlocks( children, ordered )
 							),
-					  ]
+						]
 					: []
 			)
 	);

package/src/tabs/use-tab-actions.js

@@ -33,7 +33,7 @@ export default function useTabActions( tabsClientId ) {
 		const tabPanels = tabsClientId
 			? getBlocks( tabsClientId ).find(
 					( block ) => block.name === 'core/tab-panels'
-			  )
+				)
 			: undefined;
 
 		return {

package/src/tag-cloud/edit.jsx

@@ -2,7 +2,7 @@ import {
 	Flex,
 	FlexItem,
 	ToggleControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	Spinner,
 	RangeControl,
 	__experimentalUnitControl as UnitControl,
@@ -131,7 +131,7 @@ function TagCloudEdit( { attributes, setAttributes, name } ) {
 					}
 					isShownByDefault
 				>
-					<SelectControl
+					<WCSelectControl
 						label={ __( 'Taxonomy' ) }
 						options={ getTaxonomyOptions() }
 						value={ taxonomy }

package/src/template-part/edit/advanced-controls.jsx

@@ -1,5 +1,8 @@
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
-import { SelectControl, TextControl } from '@wordpress/components';
+import {
+	SelectControl as WCSelectControl,
+	TextControl,
+} from '@wordpress/components';
 import { sprintf, __ } from '@wordpress/i18n';
 import { useSelect } from '@wordpress/data';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
@@ -57,7 +60,7 @@ export function TemplatePartAdvancedControls( {
 						} }
 						onFocus={ ( event ) => event.target.select() }
 					/>
-					<SelectControl
+					<WCSelectControl
 						label={ __( 'Area' ) }
 						labelPosition="top"
 						options={ areaOptions }

package/src/template-part/edit/import-controls.jsx

@@ -5,7 +5,7 @@ import {
 	Button,
 	FlexBlock,
 	FlexItem,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	__experimentalHStack as HStack,
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
@@ -134,7 +134,7 @@ export function TemplatePartImportControls( { area, setAttributes } ) {
 		<Spacer marginBottom="4">
 			<HStack as="form" onSubmit={ createFromWidgets }>
 				<FlexBlock>
-					<SelectControl
+					<WCSelectControl
 						label={ __( 'Import widget area' ) }
 						value={ selectedSidebar }
 						options={ options }

package/src/template-part/edit/index.jsx

@@ -142,7 +142,7 @@ export default function TemplatePartEdit( {
 				? hasFinishedResolution(
 						'getEditedEntityRecord',
 						getEntityArgs
-				  )
+					)
 				: false;
 
 			const _canUserEdit = hasResolvedEntity
@@ -150,7 +150,7 @@ export default function TemplatePartEdit( {
 						kind: 'postType',
 						name: 'wp_template_part',
 						id: templatePartId,
-				  } )
+					} )
 				: false;
 
 			return {

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

@@ -127,7 +127,7 @@ function EditableTemplatePartInnerBlocks( {
 							postId: id,
 							postType: 'wp_template_part',
 						} ),
-			  }
+				}
 			: {};
 
 	return <TagName { ...innerBlocksProps } { ...customProps } />;

package/src/template-part/edit/placeholder.jsx

@@ -56,12 +56,12 @@ export default function TemplatePartPlaceholder( {
 							// Translators: %s as template part area title ("Header", "Footer", etc.).
 							__( 'Choose an existing %s or create a new one.' ),
 							areaObject.label.toLowerCase()
-					  )
+						)
 					: sprintf(
 							// Translators: %s as template part area title ("Header", "Footer", etc.).
 							__( 'Choose an existing %s.' ),
 							areaObject.label.toLowerCase()
-					  )
+						)
 			}
 		>
 			{ isResolving && <Spinner /> }

package/src/term-count/use-term-count.js

@@ -45,7 +45,7 @@ function useTemplateBasedTermData() {
 					'postType',
 					'wp_template',
 					templateId
-			  )?.slug
+				)?.slug
 			: null;
 	}, [] );
 

package/src/term-description/use-term-description.js

@@ -53,7 +53,7 @@ function useTemplateBasedTermData() {
 					'postType',
 					'wp_template',
 					templateId
-			  )?.slug
+				)?.slug
 			: null;
 	}, [] );
 

package/src/term-name/use-term-name.js

@@ -56,7 +56,7 @@ function useTemplateBasedTermData() {
 					'postType',
 					'wp_template',
 					templateId
-			  )?.slug
+				)?.slug
 			: null;
 	}, [] );
 

package/src/terms-query/edit/inspector-controls/index.jsx

@@ -137,7 +137,7 @@ export default function TermsQueryInspectorControls( {
 								hasIncludeFilter
 									? __(
 											'When specific terms are selected, the order is based on their selection order.'
-									  )
+										)
 									: undefined
 							}
 						/>
@@ -199,7 +199,7 @@ export default function TermsQueryInspectorControls( {
 									hasIncludeFilter
 										? __(
 												'When specific terms are selected, only those are displayed.'
-										  )
+											)
 										: undefined
 								}
 							/>

package/src/terms-query/edit/inspector-controls/inherit-control.jsx

@@ -18,7 +18,7 @@ export default function InheritControl( { value, onChange, label } ) {
 				value
 					? __(
 							'Display terms based on the current taxonomy archive. For hierarchical taxonomies, shows children of the current term. For non-hierarchical taxonomies, shows all terms.'
-					  )
+						)
 					: __( 'Display terms based on specific criteria.' )
 			}
 			value={ value ? 'default' : 'custom' }

package/src/terms-query/edit/inspector-controls/order-control.jsx

@@ -1,9 +1,9 @@
 import { __ } from '@wordpress/i18n';
-import { SelectControl } from '@wordpress/components';
+import { SelectControl as WCSelectControl } from '@wordpress/components';
 
 export default function OrderControl( { orderBy, order, onChange, ...props } ) {
 	return (
-		<SelectControl
+		<WCSelectControl
 			options={ [
 				{
 					label: __( 'Name: A → Z' ),

package/src/terms-query/edit/inspector-controls/taxonomy-control.jsx

@@ -1,4 +1,4 @@
-import { SelectControl } from '@wordpress/components';
+import { SelectControl as WCSelectControl } from '@wordpress/components';
 import { usePublicTaxonomies } from '../../utils';
 
 export default function TaxonomyControl( { value, onChange, ...props } ) {
@@ -9,7 +9,7 @@ export default function TaxonomyControl( { value, onChange, ...props } ) {
 	} ) );
 
 	return (
-		<SelectControl
+		<WCSelectControl
 			options={ taxonomyOptions }
 			value={ value }
 			onChange={ onChange }

package/src/utils/hooks.js

@@ -108,6 +108,6 @@ export function useToolsPanelDropdownMenuProps() {
 					// For non-mobile, inner sidebar width (248px) - button width (24px) - border (1px) + padding (16px) + spacing (20px)
 					offset: 259,
 				},
-		  }
+			}
 		: {};
 }

package/src/utils/media-control.jsx

@@ -76,16 +76,18 @@ export function MediaControlPreview( {
  * MediaControl - Complete media selection control for inspector panels
  *
  * @param {Object}   props
- * @param {number}   props.mediaId      Media attachment ID
- * @param {string}   props.mediaUrl     Media URL
- * @param {string}   props.filename     Filename to display
- * @param {Array}    props.allowedTypes Allowed media types
- * @param {Function} props.onSelect     Callback when media selected
- * @param {Function} props.onSelectURL  Callback when URL entered
- * @param {Function} props.onError      Error callback
- * @param {Function} props.onReset      Reset/remove callback
- * @param {boolean}  props.isUploading  Whether upload in progress
- * @param {string}   props.emptyLabel   Label when no media (default: 'Add media')
+ * @param {number}   props.mediaId               Media attachment ID
+ * @param {string}   props.mediaUrl              Media URL
+ * @param {string}   props.filename              Filename to display
+ * @param {Array}    props.allowedTypes          Allowed media types
+ * @param {Function} props.onSelect              Callback when media selected
+ * @param {Function} props.onSelectURL           Callback when URL entered
+ * @param {Function} props.onError               Error callback
+ * @param {Function} props.onReset               Reset/remove callback
+ * @param {boolean}  props.isUploading           Whether upload in progress
+ * @param {string}   props.emptyLabel            Label when no media (default: 'Add media')
+ * @param {boolean}  props.useFeaturedImage      Whether the featured image is in use
+ * @param {Function} props.onToggleFeaturedImage Callback toggling the featured image
  * @return {Element} Media control component
  */
 export function MediaControl( {
@@ -99,6 +101,8 @@ export function MediaControl( {
 	onReset,
 	isUploading = false,
 	emptyLabel = __( 'Media' ),
+	useFeaturedImage,
+	onToggleFeaturedImage,
 } ) {
 	const { getSettings } = useSelect( blockEditorStore );
 	const onFilesDrop = ( filesList ) => {
@@ -131,6 +135,8 @@ export function MediaControl( {
 				onSelect={ onSelect }
 				onSelectURL={ onSelectURL }
 				onError={ onError }
+				useFeaturedImage={ useFeaturedImage }
+				onToggleFeaturedImage={ onToggleFeaturedImage }
 				name={
 					<MediaControlPreview
 						url={ mediaUrl }

package/src/utils/poster-image.jsx

@@ -135,10 +135,10 @@ function PosterImage( { poster, onChange } ) {
 													'The current poster image url is %s.'
 												),
 												poster
-										  )
+											)
 										: __(
 												'There is no poster image currently selected.'
-										  ) }
+											) }
 								</p>
 								{ !! poster && (
 									<Button