@wordpress/components 29.5.0 → 29.6.0

package/src/font-size-picker/test/utils.ts

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { isSimpleCssValue, getCommonSizeUnit } from '../utils';
+import { isSimpleCssValue } from '../utils';
 
 describe( 'isSimpleCssValue', () => {
 	test.each( [
@@ -31,39 +31,3 @@ describe( 'isSimpleCssValue', () => {
 		expect( isSimpleCssValue( cssValue ) ).toBe( result );
 	} );
 } );
-
-describe( 'getCommonSizeUnit', () => {
-	it( 'returns null when fontSizes is empty', () => {
-		expect( getCommonSizeUnit( [] ) ).toBe( null );
-	} );
-
-	it( 'returns px when all sizes are px', () => {
-		expect(
-			getCommonSizeUnit( [
-				{ slug: 'small', size: '10px' },
-				{ slug: 'medium', size: '20px' },
-				{ slug: 'large', size: '30px' },
-			] )
-		).toBe( 'px' );
-	} );
-
-	it( 'returns em when all sizes are em', () => {
-		expect(
-			getCommonSizeUnit( [
-				{ slug: 'small', size: '1em' },
-				{ slug: 'medium', size: '2em' },
-				{ slug: 'large', size: '3em' },
-			] )
-		).toBe( 'em' );
-	} );
-
-	it( 'returns null when sizes are heterogeneous', () => {
-		expect(
-			getCommonSizeUnit( [
-				{ slug: 'small', size: '10px' },
-				{ slug: 'medium', size: '2em' },
-				{ slug: 'large', size: '3rem' },
-			] )
-		).toBe( null );
-	} );
-} );

package/src/font-size-picker/utils.ts

@@ -1,8 +1,7 @@
 /**
  * Internal dependencies
  */
-import type { FontSizePickerProps, FontSize } from './types';
-import { parseQuantityAndUnitFromRawValue } from '../unit-control';
+import type { FontSizePickerProps } from './types';
 
 /**
  * Some themes use css vars for their font sizes, so until we
@@ -18,25 +17,3 @@ export function isSimpleCssValue(
 		/^[\d\.]+(px|em|rem|vw|vh|%|svw|lvw|dvw|svh|lvh|dvh|vi|svi|lvi|dvi|vb|svb|lvb|dvb|vmin|svmin|lvmin|dvmin|vmax|svmax|lvmax|dvmax)?$/i;
 	return sizeRegex.test( String( value ) );
 }
-
-/**
- * If all of the given font sizes have the same unit (e.g. 'px'), return that
- * unit. Otherwise return null.
- *
- * @param fontSizes List of font sizes.
- * @return The common unit, or null.
- */
-export function getCommonSizeUnit( fontSizes: FontSize[] ) {
-	const [ firstFontSize, ...otherFontSizes ] = fontSizes;
-	if ( ! firstFontSize ) {
-		return null;
-	}
-	const [ , firstUnit ] = parseQuantityAndUnitFromRawValue(
-		firstFontSize.size
-	);
-	const areAllSizesSameUnit = otherFontSizes.every( ( fontSize ) => {
-		const [ , unit ] = parseQuantityAndUnitFromRawValue( fontSize.size );
-		return unit === firstUnit;
-	} );
-	return areAllSizesSameUnit ? firstUnit : null;
-}

package/src/query-controls/README.md

@@ -36,7 +36,7 @@ const QUERY_DEFAULTS = {
 
 const MyQueryControls = () => {
 	const [ query, setQuery ] = useState( QUERY_DEFAULTS );
-	const { category, categories, maxItems, minItems, numberOfItems, order, orderBy  } = query;
+	const { category, categories, maxItems, minItems, numberOfItems, order, orderBy } = query;
 
 	const updateQuery = ( newQuery ) => {
 		setQuery( { ...query, ...newQuery } );
@@ -213,7 +213,14 @@ The order in which to retrieve posts.
 -   Required: No
 -   Platform: Web
 
-#### `orderBy`: `'date' | 'title'`
+#### `orderBy`: `'date' | 'title' | 'menu_order'`
+
+The meta key by which to order posts.
+
+-   Required: No
+-   Platform: Web
+
+#### `orderByOptions`: `OrderByOption[]`
 
 The meta key by which to order posts.
 
@@ -246,4 +253,4 @@ The selected category for the `categoriesList` prop.
 Start opting into the larger default height that will become the default size in a future version.
 
 - Required: No
-- Default: `false`
+- Default: `false`

package/src/query-controls/index.native.js

@@ -14,7 +14,7 @@ import CategorySelect from './category-select';
 const DEFAULT_MIN_ITEMS = 1;
 const DEFAULT_MAX_ITEMS = 100;
 
-const options = [
+const defaultOrderByOptions = [
 	{
 		label: __( 'Newest to oldest' ),
 		value: 'date/desc',
@@ -42,6 +42,7 @@ const QueryControls = memo(
 		numberOfItems,
 		order,
 		orderBy,
+		orderByOptions = defaultOrderByOptions,
 		maxItems = DEFAULT_MAX_ITEMS,
 		minItems = DEFAULT_MIN_ITEMS,
 		onCategoryChange,
@@ -68,7 +69,7 @@ const QueryControls = memo(
 					<SelectControl
 						label={ __( 'Order by' ) }
 						value={ `${ orderBy }/${ order }` }
-						options={ options }
+						options={ orderByOptions }
 						onChange={ onChange }
 						hideCancelButton
 					/>

package/src/query-controls/index.tsx

@@ -16,6 +16,7 @@ import type {
 	QueryControlsProps,
 	QueryControlsWithMultipleCategorySelectionProps,
 	QueryControlsWithSingleCategorySelectionProps,
+	OrderByOption,
 } from './types';
 
 const DEFAULT_MIN_ITEMS = 1;
@@ -34,13 +35,34 @@ function isMultipleCategorySelection(
 	return 'categorySuggestions' in props;
 }
 
+const defaultOrderByOptions: OrderByOption[] = [
+	{
+		label: __( 'Newest to oldest' ),
+		value: 'date/desc',
+	},
+	{
+		label: __( 'Oldest to newest' ),
+		value: 'date/asc',
+	},
+	{
+		/* translators: Label for ordering posts by title in ascending order. */
+		label: __( 'A → Z' ),
+		value: 'title/asc',
+	},
+	{
+		/* translators: Label for ordering posts by title in descending order. */
+		label: __( 'Z → A' ),
+		value: 'title/desc',
+	},
+];
+
 /**
  * Controls to query for posts.
  *
  * ```jsx
  * const MyQueryControls = () => (
  *   <QueryControls
- *     { ...{ maxItems, minItems, numberOfItems, order, orderBy } }
+ *     { ...{ maxItems, minItems, numberOfItems, order, orderBy, orderByOptions } }
  *     onOrderByChange={ ( newOrderBy ) => {
  *       updateQuery( { orderBy: newOrderBy } )
  *     }
@@ -65,6 +87,7 @@ export function QueryControls( {
 	numberOfItems,
 	order,
 	orderBy,
+	orderByOptions = defaultOrderByOptions,
 	maxItems = DEFAULT_MAX_ITEMS,
 	minItems = DEFAULT_MIN_ITEMS,
 	onAuthorChange,
@@ -89,26 +112,7 @@ export function QueryControls( {
 								? undefined
 								: `${ orderBy }/${ order }`
 						}
-						options={ [
-							{
-								label: __( 'Newest to oldest' ),
-								value: 'date/desc',
-							},
-							{
-								label: __( 'Oldest to newest' ),
-								value: 'date/asc',
-							},
-							{
-								/* translators: Label for ordering posts by title in ascending order. */
-								label: __( 'A → Z' ),
-								value: 'title/asc',
-							},
-							{
-								/* translators: Label for ordering posts by title in descending order. */
-								label: __( 'Z → A' ),
-								value: 'title/desc',
-							},
-						] }
+						options={ orderByOptions }
 						onChange={ ( value ) => {
 							if ( typeof value !== 'string' ) {
 								return;

package/src/query-controls/types.ts

@@ -45,7 +45,18 @@ export type AuthorSelectProps = Pick<
 };
 
 type Order = 'asc' | 'desc';
-type OrderBy = 'date' | 'title';
+type OrderBy = 'date' | 'title' | 'menu_order';
+
+export type OrderByOption = {
+	/**
+	 * The label to be shown to the user.
+	 */
+	label: string;
+	/**
+	 * Option value passed to `onChange` when the option is selected.
+	 */
+	value: `${ OrderBy }/${ Order }`;
+};
 
 type BaseQueryControlsProps = {
 	/**
@@ -99,6 +110,10 @@ type BaseQueryControlsProps = {
 	 * The meta key by which to order posts.
 	 */
 	orderBy?: OrderBy;
+	/**
+	 * List of available ordering options.
+	 */
+	orderByOptions?: OrderByOption[];
 	/**
 	 * The selected author ID.
 	 */