@wordpress/edit-site 6.7.1-next.1f6eadc42.0 → 6.8.0

package/src/components/global-styles/shadows-edit-panel.js

@@ -13,7 +13,6 @@ import {
 	__experimentalItemGroup as ItemGroup,
 	__experimentalInputControl as InputControl,
 	__experimentalUnitControl as UnitControl,
-	__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
 	__experimentalGrid as Grid,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	__experimentalUseNavigator as useNavigator,
@@ -21,7 +20,6 @@ import {
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 	__experimentalConfirmDialog as ConfirmDialog,
 	Dropdown,
-	RangeControl,
 	Button,
 	Flex,
 	FlexItem,
@@ -35,7 +33,6 @@ import {
 	plus,
 	shadow as shadowIcon,
 	reset,
-	settings,
 	moreVertical,
 } from '@wordpress/icons';
 import { useState, useMemo } from '@wordpress/element';
@@ -51,7 +48,6 @@ import {
 	getShadowParts,
 	shadowStringToObject,
 	shadowObjectToString,
-	CUSTOM_VALUE_SETTINGS,
 } from './shadow-utils';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
@@ -234,8 +230,7 @@ export default function ShadowsEditPanel() {
 						>
 							<FlexItem>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									variant="tertiary"
 									onClick={ () =>
 										setIsRenameModalVisible( false )
@@ -246,8 +241,7 @@ export default function ShadowsEditPanel() {
 							</FlexItem>
 							<FlexItem>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									variant="primary"
 									type="submit"
 								>
@@ -381,8 +375,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 					<HStack align="center" justify="flex-start" spacing={ 0 }>
 						<FlexItem style={ { flexGrow: 1 } }>
 							<Button
-								// TODO: Switch to `true` (40px size) if possible
-								__next40pxDefaultSize={ false }
+								__next40pxDefaultSize
 								icon={ shadowIcon }
 								{ ...toggleProps }
 							>
@@ -394,8 +387,7 @@ function ShadowItem( { shadow, onChange, canRemove, onRemove } ) {
 						{ canRemove && (
 							<FlexItem>
 								<Button
-									// TODO: Switch to `true` (40px size) if possible
-									__next40pxDefaultSize={ false }
+									__next40pxDefaultSize
 									icon={ reset }
 									{ ...removeButtonProps }
 								/>
@@ -468,13 +460,11 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<ShadowInputControl
 					label={ __( 'X Position' ) }
 					value={ shadowObj.x }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'x', value ) }
 				/>
 				<ShadowInputControl
 					label={ __( 'Y Position' ) }
 					value={ shadowObj.y }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'y', value ) }
 				/>
 				<ShadowInputControl
@@ -485,7 +475,6 @@ function ShadowPopover( { shadowObj, onChange } ) {
 				<ShadowInputControl
 					label={ __( 'Spread' ) }
 					value={ shadowObj.spread }
-					hasNegativeRange
 					onChange={ ( value ) => onShadowChange( 'spread', value ) }
 				/>
 			</Grid>
@@ -493,16 +482,7 @@ function ShadowPopover( { shadowObj, onChange } ) {
 	);
 }
 
-function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
-	const [ isCustomInput, setIsCustomInput ] = useState( false );
-	const [ parsedQuantity, parsedUnit ] =
-		parseQuantityAndUnitFromRawValue( value );
-
-	const sliderOnChange = ( next ) => {
-		onChange(
-			next !== undefined ? [ next, parsedUnit || 'px' ].join( '' ) : '0px'
-		);
-	};
+function ShadowInputControl( { label, value, onChange } ) {
 	const onValueChange = ( next ) => {
 		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : '0px';
@@ -510,50 +490,11 @@ function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
 	};
 
 	return (
-		<VStack justify="flex-start">
-			<HStack justify="space-between">
-				<Subtitle>{ label }</Subtitle>
-				<Button
-					label={ __( 'Use custom size' ) }
-					icon={ settings }
-					onClick={ () => {
-						setIsCustomInput( ! isCustomInput );
-					} }
-					isPressed={ isCustomInput }
-					size="small"
-				/>
-			</HStack>
-			{ isCustomInput ? (
-				<UnitControl
-					label={ label }
-					hideLabelFromVision
-					__next40pxDefaultSize
-					value={ value }
-					onChange={ onValueChange }
-				/>
-			) : (
-				<RangeControl
-					value={ parsedQuantity ?? 0 }
-					onChange={ sliderOnChange }
-					withInputField={ false }
-					__next40pxDefaultSize
-					__nextHasNoMarginBottom
-					min={
-						hasNegativeRange
-							? -(
-									CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]
-										?.max ?? 10
-							  )
-							: 0
-					}
-					max={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10
-					}
-					step={
-						CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
-					}
-				/>
-			) }
-		</VStack>
+		<UnitControl
+			label={ label }
+			__next40pxDefaultSize
+			value={ value }
+			onChange={ onValueChange }
+		/>
 	);
 }

package/src/components/global-styles/style.scss

@@ -221,3 +221,11 @@
 	fill: currentColor;
 }
 
+.edit-site-global-styles-screen-root__active-style-tile {
+	// Todo: revisit use of Card component and/or remove override
+	// The &#{&} is a workaround for the specificity of the Card component.
+	&#{&},
+	&#{&} .edit-site-global-styles-screen-root__active-style-tile-preview {
+		border-radius: $radius-small;
+	}
+}

package/src/components/global-styles/ui.js

@@ -38,6 +38,7 @@ import FontSize from './font-sizes/font-size';
 import FontSizes from './font-sizes/font-sizes';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
+import ScreenBackground from './screen-background';
 import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
 import ScreenLayout from './screen-layout';
 import ScreenStyleVariations from './screen-style-variations';
@@ -372,6 +373,10 @@ function GlobalStylesUI() {
 				<ScreenRevisions />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/background">
+				<ScreenBackground />
+			</GlobalStylesNavigationScreen>
+
 			{ blocks.map( ( block ) => (
 				<GlobalStylesNavigationScreen
 					key={ 'menu-block-' + block.name }

package/src/components/post-list/index.js

@@ -179,6 +179,7 @@ function getItemId( item ) {
 
 export default function PostList( { postType } ) {
 	const [ view, setView ] = useView( postType );
+	const defaultViews = useDefaultViews( { postType } );
 	const history = useHistory();
 	const location = useLocation();
 	const {
@@ -202,7 +203,26 @@ export default function PostList( { postType } ) {
 		[ history ]
 	);
 
-	const { isLoading: isLoadingFields, fields } = usePostFields( view.type );
+	const getActiveViewFilters = ( views, match ) => {
+		const found = views.find( ( { slug } ) => slug === match );
+		return found?.filters ?? [];
+	};
+
+	const { isLoading: isLoadingFields, fields: _fields } = usePostFields(
+		view.type
+	);
+	const fields = useMemo( () => {
+		const activeViewFilters = getActiveViewFilters(
+			defaultViews,
+			activeView
+		).map( ( { field } ) => field );
+		return _fields.map( ( field ) => ( {
+			...field,
+			elements: activeViewFilters.includes( field.id )
+				? []
+				: field.elements,
+		} ) );
+	}, [ _fields, defaultViews, activeView ] );
 
 	const queryArgs = useMemo( () => {
 		const filters = {};
@@ -225,6 +245,32 @@ export default function PostList( { postType } ) {
 				filters.author_exclude = filter.value;
 			}
 		} );
+
+		// The bundled views want data filtered without displaying the filter.
+		const activeViewFilters = getActiveViewFilters(
+			defaultViews,
+			activeView
+		);
+		activeViewFilters.forEach( ( filter ) => {
+			if (
+				filter.field === 'status' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.status = filter.value;
+			}
+			if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_ANY
+			) {
+				filters.author = filter.value;
+			} else if (
+				filter.field === 'author' &&
+				filter.operator === OPERATOR_IS_NONE
+			) {
+				filters.author_exclude = filter.value;
+			}
+		} );
+
 		// We want to provide a different default item for the status filter
 		// than the REST API provides.
 		if ( ! filters.status || filters.status === '' ) {
@@ -240,7 +286,7 @@ export default function PostList( { postType } ) {
 			search: view.search,
 			...filters,
 		};
-	}, [ view ] );
+	}, [ view, activeView, defaultViews ] );
 	const {
 		records,
 		isResolving: isLoadingData,

package/src/components/sidebar-dataviews/dataview-item.js

@@ -27,6 +27,7 @@ export default function DataViewItem( {
 	isActive,
 	isCustom,
 	suffix,
+	navigationItemSuffix,
 } ) {
 	const {
 		params: { postType },
@@ -55,6 +56,7 @@ export default function DataViewItem( {
 			<SidebarNavigationItem
 				icon={ iconToUse }
 				{ ...linkInfo }
+				suffix={ navigationItemSuffix }
 				aria-current={ isActive ? 'true' : undefined }
 			>
 				{ title }

package/src/components/sidebar-dataviews/default-views.js

@@ -13,7 +13,7 @@ import {
 	notAllowed,
 } from '@wordpress/icons';
 import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
 import { useMemo } from '@wordpress/element';
 
 /**
@@ -68,6 +68,50 @@ const DEFAULT_POST_BASE = {
 	layout: defaultLayouts[ LAYOUT_LIST ].layout,
 };
 
+export function useDefaultViewsWithItemCounts( { postType } ) {
+	const defaultViews = useDefaultViews( { postType } );
+	const { records, totalItems } = useEntityRecords( 'postType', postType, {
+		per_page: -1,
+		status: [ 'any', 'trash' ],
+	} );
+
+	return useMemo( () => {
+		if ( ! defaultViews ) {
+			return [];
+		}
+
+		// If there are no records, return the default views with no counts.
+		if ( ! records ) {
+			return defaultViews;
+		}
+
+		const counts = {
+			drafts: records.filter( ( record ) => record.status === 'draft' )
+				.length,
+			future: records.filter( ( record ) => record.status === 'future' )
+				.length,
+			pending: records.filter( ( record ) => record.status === 'pending' )
+				.length,
+			private: records.filter( ( record ) => record.status === 'private' )
+				.length,
+			published: records.filter(
+				( record ) => record.status === 'publish'
+			).length,
+			trash: records.filter( ( record ) => record.status === 'trash' )
+				.length,
+		};
+
+		// All items excluding trashed items as per the default "all" status query.
+		counts.all = totalItems ? totalItems - counts.trash : 0;
+
+		// Filter out views with > 0 item counts.
+		return defaultViews.map( ( _view ) => {
+			_view.count = counts[ _view.slug ];
+			return _view;
+		} );
+	}, [ defaultViews, records, totalItems ] );
+}
+
 export function useDefaultViews( { postType } ) {
 	const labels = useSelect(
 		( select ) => {
@@ -88,76 +132,66 @@ export function useDefaultViews( { postType } ) {
 				title: __( 'Published' ),
 				slug: 'published',
 				icon: published,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'publish',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'publish',
+					},
+				],
 			},
 			{
 				title: __( 'Scheduled' ),
 				slug: 'future',
 				icon: scheduled,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'future',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'future',
+					},
+				],
 			},
 			{
 				title: __( 'Drafts' ),
 				slug: 'drafts',
 				icon: drafts,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'draft',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'draft',
+					},
+				],
 			},
 			{
 				title: __( 'Pending' ),
 				slug: 'pending',
 				icon: pending,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'pending',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'pending',
+					},
+				],
 			},
 			{
 				title: __( 'Private' ),
 				slug: 'private',
 				icon: notAllowed,
-				view: {
-					...DEFAULT_POST_BASE,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'private',
-						},
-					],
-				},
+				view: DEFAULT_POST_BASE,
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'private',
+					},
+				],
 			},
 			{
 				title: __( 'Trash' ),
@@ -167,14 +201,14 @@ export function useDefaultViews( { postType } ) {
 					...DEFAULT_POST_BASE,
 					type: LAYOUT_TABLE,
 					layout: defaultLayouts[ LAYOUT_TABLE ].layout,
-					filters: [
-						{
-							field: 'status',
-							operator: OPERATOR_IS_ANY,
-							value: 'trash',
-						},
-					],
 				},
+				filters: [
+					{
+						field: 'status',
+						operator: OPERATOR_IS_ANY,
+						value: 'trash',
+					},
+				],
 			},
 		];
 	}, [ labels ] );

package/src/components/sidebar-dataviews/index.js

@@ -7,7 +7,7 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 /**
  * Internal dependencies
  */
-import { useDefaultViews } from './default-views';
+import { useDefaultViewsWithItemCounts } from './default-views';
 import { unlock } from '../../lock-unlock';
 import DataViewItem from './dataview-item';
 import CustomDataViewsList from './custom-dataviews-list';
@@ -18,7 +18,9 @@ export default function DataViewsSidebarContent() {
 	const {
 		params: { postType, activeView = 'all', isCustom = 'false' },
 	} = useLocation();
-	const defaultViews = useDefaultViews( { postType } );
+
+	const defaultViews = useDefaultViewsWithItemCounts( { postType } );
+
 	if ( ! postType ) {
 		return null;
 	}
@@ -34,6 +36,9 @@ export default function DataViewsSidebarContent() {
 							slug={ dataview.slug }
 							title={ dataview.title }
 							icon={ dataview.icon }
+							navigationItemSuffix={
+								<span>{ dataview.count }</span>
+							}
 							type={ dataview.view.type }
 							isActive={
 								! isCustomBoolean &&

package/src/components/sidebar-dataviews/style.scss

@@ -15,6 +15,10 @@
 		min-width: initial;
 	}
 
+	.edit-site-sidebar-navigation-item.with-suffix {
+		padding-right: $grid-unit-10;
+	}
+
 	&:hover,
 	&:focus,
 	&[aria-current] {

package/src/style.scss

@@ -91,20 +91,4 @@ body.js.site-editor-php {
 	}
 }
 
-/**
- * Animations
- */
-
-// These keyframes should not be part of the _animations.scss mixins file.
-// Because keyframe animations can't be defined as mixins properly, they are duplicated.
-// Since they are intended only for the editor, we add them here instead.
-@keyframes edit-post__fade-in-animation {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
-}
-
 @include wordpress-admin-schemes();