@wordpress/edit-site 6.5.0 → 6.6.0

package/build-style/style-rtl.css

@@ -38,10 +38,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -135,10 +135,6 @@
     transition-delay: 0s;
   }
 }
-.dataviews__view-actions .components-search-control .components-base-control__field,
-.dataviews-filters__container .components-search-control .components-base-control__field {
-  max-width: 240px;
-}
 
 .dataviews-view-list__primary-field,
 .dataviews-view-grid__primary-field,
@@ -214,10 +210,6 @@
 .dataviews-filters__container {
     padding: 12px 24px;
   }
-  .dataviews__view-actions .components-search-control .components-base-control__field,
-.dataviews-filters__container .components-search-control .components-base-control__field {
-    max-width: 112px;
-  }
 
   .dataviews-view-grid,
 .dataviews-no-results,
@@ -550,7 +542,6 @@
   background-color: #fff;
   padding: 12px 48px;
   border-top: 1px solid #f0f0f0;
-  color: #757575;
   flex-shrink: 0;
   transition: padding ease-out 0.1s;
 }
@@ -561,11 +552,16 @@
   }
 }
 
-.dataviews-pagination__page-selection {
+.dataviews-pagination__page-select {
   font-size: 11px;
-  text-transform: uppercase;
   font-weight: 500;
-  color: #1e1e1e;
+  text-transform: uppercase;
+}
+@media (min-width: 600px) {
+  .dataviews-pagination__page-select .components-select-control__input {
+    font-size: 11px !important;
+    font-weight: 500;
+  }
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
@@ -767,10 +763,6 @@
   }
 }
 
-.dataviews-density-picker__range-control {
-  width: 200px;
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
   display: none;
@@ -1109,6 +1101,11 @@
   }
 }
 
+.dataviews-controls__datetime {
+  border: none;
+  padding: 0;
+}
+
 .dataforms-layouts-panel__field {
   width: 100%;
   min-height: 32px;
@@ -2537,7 +2534,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _jly87_slide-from-right {
+@keyframes _tghql_slide-from-right {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2547,7 +2544,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _jly87_slide-from-left {
+@keyframes _tghql_slide-from-left {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2603,10 +2600,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _jly87_slide-from-left;
+  animation-name: _tghql_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _jly87_slide-from-right;
+  animation-name: _tghql_slide-from-right;
 }
 
 .edit-site-sidebar-button {

package/build-style/style.css

@@ -38,10 +38,10 @@
  * Radius scale.
  */
 /**
- * Dimensions.
+ * Elevation scale.
  */
 /**
- * Shadows.
+ * Dimensions.
  */
 /**
  * Editor widths.
@@ -135,10 +135,6 @@
     transition-delay: 0s;
   }
 }
-.dataviews__view-actions .components-search-control .components-base-control__field,
-.dataviews-filters__container .components-search-control .components-base-control__field {
-  max-width: 240px;
-}
 
 .dataviews-view-list__primary-field,
 .dataviews-view-grid__primary-field,
@@ -214,10 +210,6 @@
 .dataviews-filters__container {
     padding: 12px 24px;
   }
-  .dataviews__view-actions .components-search-control .components-base-control__field,
-.dataviews-filters__container .components-search-control .components-base-control__field {
-    max-width: 112px;
-  }
 
   .dataviews-view-grid,
 .dataviews-no-results,
@@ -550,7 +542,6 @@
   background-color: #fff;
   padding: 12px 48px;
   border-top: 1px solid #f0f0f0;
-  color: #757575;
   flex-shrink: 0;
   transition: padding ease-out 0.1s;
 }
@@ -561,11 +552,16 @@
   }
 }
 
-.dataviews-pagination__page-selection {
+.dataviews-pagination__page-select {
   font-size: 11px;
-  text-transform: uppercase;
   font-weight: 500;
-  color: #1e1e1e;
+  text-transform: uppercase;
+}
+@media (min-width: 600px) {
+  .dataviews-pagination__page-select .components-select-control__input {
+    font-size: 11px !important;
+    font-weight: 500;
+  }
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
@@ -767,10 +763,6 @@
   }
 }
 
-.dataviews-density-picker__range-control {
-  width: 200px;
-}
-
 .dataviews-view-grid__field-value:empty,
 .dataviews-view-grid__field:empty {
   display: none;
@@ -1109,6 +1101,11 @@
   }
 }
 
+.dataviews-controls__datetime {
+  border: none;
+  padding: 0;
+}
+
 .dataforms-layouts-panel__field {
   width: 100%;
   min-height: 32px;
@@ -2538,7 +2535,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   contain: content;
 }
 
-@keyframes _jly87_slide-from-right {
+@keyframes _tghql_slide-from-right {
   from {
     transform: translateX(50px);
     opacity: 0;
@@ -2548,7 +2545,7 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
     opacity: 1;
   }
 }
-@keyframes _jly87_slide-from-left {
+@keyframes _tghql_slide-from-left {
   from {
     transform: translateX(-50px);
     opacity: 0;
@@ -2604,10 +2601,10 @@ html.canvas-mode-edit-transition::view-transition-group(toggle) {
   }
 }
 .edit-site-sidebar__screen-wrapper.slide-from-left {
-  animation-name: _jly87_slide-from-left;
+  animation-name: _tghql_slide-from-left;
 }
 .edit-site-sidebar__screen-wrapper.slide-from-right {
-  animation-name: _jly87_slide-from-right;
+  animation-name: _tghql_slide-from-right;
 }
 
 .edit-site-sidebar-button {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.5.0",
+	"version": "6.6.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -29,45 +29,45 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.5.0",
-		"@wordpress/api-fetch": "^7.5.0",
-		"@wordpress/blob": "^4.5.0",
-		"@wordpress/block-editor": "^14.0.0",
-		"@wordpress/block-library": "^9.5.0",
-		"@wordpress/blocks": "^13.5.0",
-		"@wordpress/commands": "^1.5.0",
-		"@wordpress/components": "^28.5.0",
-		"@wordpress/compose": "^7.5.0",
-		"@wordpress/core-commands": "^1.5.0",
-		"@wordpress/core-data": "^7.5.0",
-		"@wordpress/data": "^10.5.0",
-		"@wordpress/dataviews": "^4.1.0",
-		"@wordpress/date": "^5.5.0",
-		"@wordpress/deprecated": "^4.5.0",
-		"@wordpress/dom": "^4.5.0",
-		"@wordpress/editor": "^14.5.0",
-		"@wordpress/element": "^6.5.0",
-		"@wordpress/escape-html": "^3.5.0",
-		"@wordpress/hooks": "^4.5.0",
-		"@wordpress/html-entities": "^4.5.0",
-		"@wordpress/i18n": "^5.5.0",
-		"@wordpress/icons": "^10.5.0",
-		"@wordpress/keyboard-shortcuts": "^5.5.0",
-		"@wordpress/keycodes": "^4.5.0",
-		"@wordpress/notices": "^5.5.0",
-		"@wordpress/patterns": "^2.5.0",
-		"@wordpress/plugins": "^7.5.0",
-		"@wordpress/preferences": "^4.5.0",
-		"@wordpress/primitives": "^4.5.0",
-		"@wordpress/priority-queue": "^3.5.0",
-		"@wordpress/private-apis": "^1.5.0",
-		"@wordpress/reusable-blocks": "^5.5.0",
-		"@wordpress/router": "^1.5.0",
-		"@wordpress/style-engine": "^2.5.0",
-		"@wordpress/url": "^4.5.0",
-		"@wordpress/viewport": "^6.5.0",
-		"@wordpress/widgets": "^4.5.0",
-		"@wordpress/wordcount": "^4.5.0",
+		"@wordpress/a11y": "^4.6.0",
+		"@wordpress/api-fetch": "^7.6.0",
+		"@wordpress/blob": "^4.6.0",
+		"@wordpress/block-editor": "^14.1.0",
+		"@wordpress/block-library": "^9.6.0",
+		"@wordpress/blocks": "^13.6.0",
+		"@wordpress/commands": "^1.6.0",
+		"@wordpress/components": "^28.6.0",
+		"@wordpress/compose": "^7.6.0",
+		"@wordpress/core-commands": "^1.6.0",
+		"@wordpress/core-data": "^7.6.0",
+		"@wordpress/data": "^10.6.0",
+		"@wordpress/dataviews": "^4.2.0",
+		"@wordpress/date": "^5.6.0",
+		"@wordpress/deprecated": "^4.6.0",
+		"@wordpress/dom": "^4.6.0",
+		"@wordpress/editor": "^14.6.0",
+		"@wordpress/element": "^6.6.0",
+		"@wordpress/escape-html": "^3.6.0",
+		"@wordpress/hooks": "^4.6.0",
+		"@wordpress/html-entities": "^4.6.0",
+		"@wordpress/i18n": "^5.6.0",
+		"@wordpress/icons": "^10.6.0",
+		"@wordpress/keyboard-shortcuts": "^5.6.0",
+		"@wordpress/keycodes": "^4.6.0",
+		"@wordpress/notices": "^5.6.0",
+		"@wordpress/patterns": "^2.6.0",
+		"@wordpress/plugins": "^7.6.0",
+		"@wordpress/preferences": "^4.6.0",
+		"@wordpress/primitives": "^4.6.0",
+		"@wordpress/priority-queue": "^3.6.0",
+		"@wordpress/private-apis": "^1.6.0",
+		"@wordpress/reusable-blocks": "^5.6.0",
+		"@wordpress/router": "^1.6.0",
+		"@wordpress/style-engine": "^2.6.0",
+		"@wordpress/url": "^4.6.0",
+		"@wordpress/viewport": "^6.6.0",
+		"@wordpress/widgets": "^4.6.0",
+		"@wordpress/wordcount": "^4.6.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -82,5 +82,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
+	"gitHead": "ab9564947967bb3f00343130954b9efacba6cdd7"
 }

package/src/components/add-new-template/style.scss

@@ -81,7 +81,7 @@
 }
 
 .edit-site-custom-template-modal__no-results {
-	border: 1px solid $gray-400;
+	border: $border-width solid $gray-400;
 	border-radius: $radius-block-ui;
 	padding: $grid-unit-20;
 }

package/src/components/editor/style.scss

@@ -12,7 +12,7 @@
 	box-sizing: border-box;
 	width: $sidebar-width;
 	background-color: $white;
-	border: 1px dotted $gray-300;
+	border: $border-width dotted $gray-300;
 	padding: $grid-unit-30;
 	display: flex;
 	justify-content: center;

package/src/components/global-styles/background-panel.js

@@ -16,7 +16,6 @@ const BACKGROUND_DEFAULT_VALUES = {
 const {
 	useGlobalStyle,
 	useGlobalSetting,
-	useGlobalStyleLinks,
 	BackgroundPanel: StylesBackgroundPanel,
 } = unlock( blockEditorPrivateApis );
 
@@ -42,7 +41,6 @@ export default function BackgroundPanel() {
 	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
 		shouldDecodeEncode: false,
 	} );
-	const _links = useGlobalStyleLinks();
 	const [ settings ] = useGlobalSetting( '' );
 
 	return (
@@ -52,7 +50,6 @@ export default function BackgroundPanel() {
 			onChange={ setStyle }
 			settings={ settings }
 			defaultValues={ BACKGROUND_DEFAULT_VALUES }
-			themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 		/>
 	);
 }

package/src/components/global-styles/font-library-modal/installed-fonts.js

@@ -130,9 +130,11 @@ function InstalledFonts() {
 		} catch ( error ) {
 			setNotice( {
 				type: 'error',
-				message:
-					__( 'There was an error updating the font family. ' ) +
-					error.message,
+				message: sprintf(
+					/* translators: %s: error message */
+					__( 'There was an error updating the font family. %s' ),
+					error.message
+				),
 			} );
 		}
 	};
@@ -464,7 +466,7 @@ function ConfirmDeleteDialog( {
 			setNotice( {
 				type: 'error',
 				message:
-					__( 'There was an error uninstalling the font family. ' ) +
+					__( 'There was an error uninstalling the font family.' ) +
 					error.message,
 			} );
 		}

package/src/components/global-styles/font-library-modal/style.scss

@@ -92,7 +92,7 @@ $footer-height: 70px;
 }
 
 .font-library-modal__font-card {
-	border: 1px solid $gray-200;
+	border: $border-width solid $gray-200;
 	width: 100%;
 	height: auto;
 	padding: $grid-unit-20;

package/src/components/global-styles/screen-block.js

@@ -25,9 +25,10 @@ import {
 	VariationsPanel,
 } from './variations/variations-panel';
 
-// Initial control values where no block style is set.
+// Initial control values.
 const BACKGROUND_BLOCK_DEFAULT_VALUES = {
 	backgroundSize: 'cover',
+	backgroundPosition: '50% 50%', // used only when backgroundSize is 'contain'.
 };
 
 function applyFallbackStyle( border ) {
@@ -84,7 +85,6 @@ const {
 	FiltersPanel: StylesFiltersPanel,
 	ImageSettingsPanel,
 	AdvancedPanel: StylesAdvancedPanel,
-	useGlobalStyleLinks,
 } = unlock( blockEditorPrivateApis );
 
 function ScreenBlock( { name, variation } ) {
@@ -104,7 +104,6 @@ function ScreenBlock( { name, variation } ) {
 	const [ rawSettings, setSettings ] = useGlobalSetting( '', name );
 	const settings = useSettingsForBlockElement( rawSettings, name );
 	const blockType = getBlockType( name );
-	const _links = useGlobalStyleLinks();
 
 	// Only allow `blockGap` support if serialization has not been skipped, to be sure global spacing can be applied.
 	if (
@@ -271,7 +270,6 @@ function ScreenBlock( { name, variation } ) {
 					onChange={ setStyle }
 					settings={ settings }
 					defaultValues={ BACKGROUND_BLOCK_DEFAULT_VALUES }
-					themeFileURIs={ _links?.[ 'wp:theme-file' ] }
 				/>
 			) }
 			{ hasTypographyPanel && (

package/src/components/global-styles/screen-css.js

@@ -34,7 +34,9 @@ function ScreenCSS() {
 					<>
 						{ description }
 						<ExternalLink
-							href="https://developer.wordpress.org/advanced-administration/wordpress/css/"
+							href={ __(
+								'https://developer.wordpress.org/advanced-administration/wordpress/css/'
+							) }
 							className="edit-site-global-styles-screen-css-help-link"
 						>
 							{ __( 'Learn more about CSS' ) }

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

@@ -223,6 +223,7 @@ export default function ShadowsEditPanel() {
 						} }
 					>
 						<InputControl
+							__next40pxDefaultSize
 							autoComplete="off"
 							label={ __( 'Name' ) }
 							placeholder={ __( 'Shadow name' ) }

package/src/components/global-styles/size-control/index.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -20,9 +19,13 @@ import {
 
 const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
-function SizeControl( props ) {
+function SizeControl( {
+	// Do not allow manipulation of margin bottom
+	__nextHasNoMarginBottom,
+	...props
+} ) {
 	const { baseControlProps } = useBaseControlProps( props );
-	const { value, onChange, fallbackValue, disabled } = props;
+	const { value, onChange, fallbackValue, disabled, label } = props;
 
 	const units = useCustomUnits( {
 		availableUnits: DEFAULT_UNITS,
@@ -45,13 +48,13 @@ function SizeControl( props ) {
 	};
 
 	return (
-		<BaseControl { ...baseControlProps }>
+		<BaseControl { ...baseControlProps } __nextHasNoMarginBottom>
 			<Flex>
 				<FlexItem isBlock>
 					<UnitControl
 						__next40pxDefaultSize
 						__nextHasNoMarginBottom
-						label={ __( 'Custom' ) }
+						label={ label }
 						hideLabelFromVision
 						value={ value }
 						onChange={ handleUnitControlChange }
@@ -65,7 +68,7 @@ function SizeControl( props ) {
 						<RangeControl
 							__next40pxDefaultSize
 							__nextHasNoMarginBottom
-							label={ __( 'Custom Size' ) }
+							label={ label }
 							hideLabelFromVision
 							value={ valueQuantity }
 							initialPosition={ fallbackValue }

package/src/components/page-patterns/index.js

@@ -23,7 +23,7 @@ import {
 } from '../../utils/constants';
 import usePatternSettings from './use-pattern-settings';
 import { unlock } from '../../lock-unlock';
-import usePatterns from './use-patterns';
+import usePatterns, { useAugmentPatternsWithPermissions } from './use-patterns';
 import PatternsHeader from './header';
 import { useEditPostAction } from '../dataviews-actions';
 import {
@@ -136,6 +136,8 @@ export default function DataviewsPatterns() {
 		return filterSortAndPaginate( patterns, viewWithoutFilters, fields );
 	}, [ patterns, view, fields, type ] );
 
+	const dataWithPermissions = useAugmentPatternsWithPermissions( data );
+
 	const templatePartActions = usePostActions( {
 		postType: TEMPLATE_PART_POST_TYPE,
 		context: 'list',
@@ -175,7 +177,7 @@ export default function DataviewsPatterns() {
 					paginationInfo={ paginationInfo }
 					fields={ fields }
 					actions={ actions }
-					data={ data || EMPTY_ARRAY }
+					data={ dataWithPermissions || EMPTY_ARRAY }
 					getItemId={ ( item ) => item.name ?? item.id }
 					isLoading={ isResolving }
 					view={ view }

package/src/components/page-patterns/use-patterns.js

@@ -256,12 +256,44 @@ const selectUserPatterns = createSelector(
 	]
 );
 
+export function useAugmentPatternsWithPermissions( patterns ) {
+	const idsAndTypes = useMemo(
+		() =>
+			patterns
+				?.filter( ( record ) => record.type !== PATTERN_TYPES.theme )
+				.map( ( record ) => [ record.type, record.id ] ) ?? [],
+		[ patterns ]
+	);
+
+	const permissions = useSelect(
+		( select ) => {
+			const { getEntityRecordPermissions } = unlock(
+				select( coreStore )
+			);
+			return idsAndTypes.reduce( ( acc, [ type, id ] ) => {
+				acc[ id ] = getEntityRecordPermissions( 'postType', type, id );
+				return acc;
+			}, {} );
+		},
+		[ idsAndTypes ]
+	);
+
+	return useMemo(
+		() =>
+			patterns?.map( ( record ) => ( {
+				...record,
+				permissions: permissions?.[ record.id ] ?? {},
+			} ) ) ?? [],
+		[ patterns, permissions ]
+	);
+}
+
 export const usePatterns = (
 	postType,
 	categoryId,
 	{ search = '', syncStatus } = {}
 ) => {
-	const { patterns, ...rest } = useSelect(
+	return useSelect(
 		( select ) => {
 			if ( postType === TEMPLATE_PART_POST_TYPE ) {
 				return selectTemplateParts( select, categoryId, search );
@@ -284,35 +316,6 @@ export const usePatterns = (
 		},
 		[ categoryId, postType, search, syncStatus ]
 	);
-
-	const ids = useMemo(
-		() => patterns?.map( ( record ) => record.id ) ?? [],
-		[ patterns ]
-	);
-
-	const permissions = useSelect(
-		( select ) => {
-			const { getEntityRecordsPermissions } = unlock(
-				select( coreStore )
-			);
-			return getEntityRecordsPermissions( 'postType', postType, ids );
-		},
-		[ ids, postType ]
-	);
-
-	const patternsWithPermissions = useMemo(
-		() =>
-			patterns?.map( ( record, index ) => ( {
-				...record,
-				permissions: permissions[ index ],
-			} ) ) ?? [],
-		[ patterns, permissions ]
-	);
-
-	return {
-		...rest,
-		patterns: patternsWithPermissions,
-	};
 };
 
 export default usePatterns;