@wordpress/edit-site 6.35.2-next.dc3f6d3c1.0 → 6.36.0

package/build-style/style.css

@@ -374,7 +374,7 @@
   flex-direction: column;
   font-size: 13px;
   line-height: 1.4;
-  background-color: inherit;
+  background-color: var(--wp-dataviews-color-background, #fff);
 }
 
 .dataviews__view-actions,
@@ -1285,6 +1285,48 @@
     transition: padding ease-out 0.1s;
   }
 }
+.dataviews-view-grid {
+  padding: 0 48px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  container-type: inline-size;
+}
+
+@media not (prefers-reduced-motion) {
+  .dataviews-view-grid {
+    transition: padding ease-out 0.1s;
+  }
+}
+@container (max-width: 430px) {
+  .dataviews-view-grid {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+.dataviews-view-grid .dataviews-view-grid__row {
+  display: grid;
+  gap: 32px;
+}
+
+.dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell {
+  border-radius: 4px;
+  position: relative;
+}
+
+.dataviews-view-grid .dataviews-view-grid__row .dataviews-view-grid__row__gridcell[data-focus-visible]::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+  border-radius: 4px;
+  pointer-events: none;
+  outline: 2px solid transparent;
+}
+
 .dataviews-view-grid .dataviews-view-grid__card {
   height: 100%;
   justify-content: flex-start;
@@ -1758,20 +1800,11 @@ div.dataviews-view-list {
   background-color: inherit;
 }
 
-.dataviews-view-table tr .dataviews-view-table-header-button {
-  gap: 4px;
-}
-
 .dataviews-view-table tr td:first-child,
 .dataviews-view-table tr th:first-child {
   padding-left: 48px;
 }
 
-.dataviews-view-table tr td:first-child .dataviews-view-table-header-button,
-.dataviews-view-table tr th:first-child .dataviews-view-table-header-button {
-  margin-left: -8px;
-}
-
 .dataviews-view-table tr td:last-child,
 .dataviews-view-table tr th:last-child {
   padding-right: 48px;
@@ -1781,12 +1814,8 @@ div.dataviews-view-list {
   border-bottom: 0;
 }
 
-.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input {
-  opacity: 0;
-}
-
-.dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:checked, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:indeterminate, .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input:focus {
-  opacity: 1;
+.dataviews-view-table tr.is-hovered, .dataviews-view-table tr.is-hovered .dataviews-view-table__actions-column--sticky {
+  background-color: #f8f8f8;
 }
 
 .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
@@ -1794,7 +1823,6 @@ div.dataviews-view-list {
 }
 
 @media (hover: none) {
-  .dataviews-view-table tr .components-checkbox-control__input.components-checkbox-control__input,
   .dataviews-view-table tr .dataviews-item-actions .components-button:not(.dataviews-all-actions-button) {
     opacity: 1;
   }
@@ -1842,22 +1870,30 @@ div.dataviews-view-list {
   border: 0;
 }
 
-.dataviews-view-table thead tr .components-checkbox-control__input.components-checkbox-control__input {
-  opacity: 1;
-}
-
 .dataviews-view-table thead th {
   background-color: inherit;
   padding-top: 8px;
   padding-bottom: 8px;
-  padding-left: 12px;
   font-size: 11px;
   text-transform: uppercase;
   font-weight: 499;
 }
 
-.dataviews-view-table thead th:has(.dataviews-view-table-header-button):not(:first-child) {
+.dataviews-view-table thead th:has(.dataviews-view-table-header-button) {
   padding-left: 4px;
+  padding-right: 4px;
+}
+
+.dataviews-view-table thead th:has(.dataviews-view-table-header-button) .dataviews-view-table-header-button {
+  gap: 4px;
+}
+
+.dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child {
+  padding-left: 40px;
+}
+
+.dataviews-view-table thead th:has(.dataviews-view-table-header-button):last-child {
+  padding-right: 40px;
 }
 
 .dataviews-view-table tbody td {
@@ -1911,14 +1947,14 @@ div.dataviews-view-list {
   white-space: nowrap;
 }
 
-.dataviews-view-table:has(tr.is-selected) .components-checkbox-control__input {
-  opacity: 1;
-}
-
 .dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:first-child) {
   padding-left: 0;
 }
 
+.dataviews-view-table.has-compact-density thead th:has(.dataviews-view-table-header-button):not(:last-child) {
+  padding-right: 0;
+}
+
 .dataviews-view-table.has-compact-density td,
 .dataviews-view-table.has-compact-density th {
   padding: 4px 8px;
@@ -2189,6 +2225,205 @@ div.dataviews-view-list {
   background-color: rgba(var(--wp-admin-theme-color--rgb), 0.12);
 }
 
+.dataviews-view-activity {
+  margin: 0 0 auto;
+  padding: 8px 48px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__group-header {
+  font-size: 15px;
+  font-weight: 499;
+  color: #949494;
+  margin: 0 0 8px 0;
+  padding: 0;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-actions {
+  min-width: 24px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content {
+  flex-grow: 1;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title,
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-description,
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
+  min-height: 16px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  overflow: hidden;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable {
+  cursor: pointer;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-title--clickable:focus-visible {
+  outline: var(--wp-admin-border-width-focus) solid var(--wp-admin-theme-color);
+  outline-offset: var(--wp-admin-border-width-focus);
+  border-radius: 2px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions {
+  display: flex;
+  width: max-content;
+  flex: 0 0 auto;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__primary-actions .components-button {
+  position: relative;
+  z-index: 1;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields {
+  color: #757575;
+  display: flex;
+  gap: 12px;
+  row-gap: 4px;
+  flex-wrap: wrap;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields:empty {
+  display: none;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field:has(.dataviews-view-activity__item-field-value:empty) {
+  display: none;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-content .dataviews-view-activity__item-fields .dataviews-view-activity__item-field-value {
+  display: flex;
+  align-items: center;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-type {
+  align-self: stretch;
+  flex-shrink: 0;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-type::after {
+  content: "";
+  flex: 1 1 auto;
+  width: 1px;
+  margin: 0 auto;
+  background-color: #ddd;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-type::before {
+  content: "";
+  flex: 0 0 auto;
+  width: 1px;
+  margin: 0 auto;
+  background-color: #ddd;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type {
+  width: 8px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type::before {
+  height: 12px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-type-icon {
+  width: 11px;
+  height: 11px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-compact .dataviews-view-activity__item-content {
+  margin: 12px 0;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type {
+  width: 24px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type::before {
+  height: 12px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-type-icon {
+  width: 25px;
+  height: 25px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-content {
+  margin: 12px 0;
+  padding-top: 8px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type {
+  width: 32px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type::before {
+  height: 8px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-type-icon {
+  width: 33px;
+  height: 33px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-content {
+  margin: 8px 0 16px;
+  padding-top: 12px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item.is-comfortable .dataviews-view-activity__item-bullet, .dataviews-view-activity .dataviews-view-activity__item.is-balanced .dataviews-view-activity__item-bullet {
+  width: 9px;
+  height: 9px;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.dataviews-view-activity .dataviews-view-activity__item:first-child .dataviews-view-activity__item-type::before {
+  visibility: hidden;
+}
+
+.dataviews-view-activity .dataviews-view-activity__group:last-of-type > .dataviews-view-activity__item:last-of-type .dataviews-view-activity__item-type::after, .dataviews-view-activity > .dataviews-view-activity__item:last-child .dataviews-view-activity__item-type::after {
+  background: linear-gradient(to bottom, #ddd 0%, rgba(221, 221, 221, 0.2) 60%, rgba(221, 221, 221, 0) 100%);
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-type-icon {
+  overflow: hidden;
+  flex-shrink: 0;
+  background-color: #fff;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-type-icon img,
+.dataviews-view-activity .dataviews-view-activity__item-type-icon svg,
+.dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0 auto;
+  object-fit: cover;
+  border-radius: 50%;
+  box-sizing: border-box;
+  box-shadow: inset 0 0 0 1px #ddd;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-type-icon svg {
+  padding: 4px;
+}
+
+.dataviews-view-activity .dataviews-view-activity__item-type-icon .dataviews-view-activity__item-bullet {
+  content: "";
+  background-color: #ddd;
+}
+
+.dataviews-view-activity + .dataviews-pagination {
+  justify-content: space-between;
+}
+
 .dataviews-controls__datetime {
   border: none;
   padding: 0;
@@ -3240,6 +3475,7 @@ button.font-library-modal__upload-area {
   max-width: 100%;
   display: block;
   width: 100%;
+  clip-path: border-box;
 }
 
 .global-styles-ui-typography-preview {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "6.35.2-next.dc3f6d3c1.0",
+	"version": "6.36.0",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -40,50 +40,50 @@
 	],
 	"dependencies": {
 		"@react-spring/web": "^9.4.5",
-		"@wordpress/a11y": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/admin-ui": "^1.3.1-next.dc3f6d3c1.0",
-		"@wordpress/api-fetch": "^7.35.1-next.dc3f6d3c1.0",
-		"@wordpress/base-styles": "^6.11.1-next.dc3f6d3c1.0",
-		"@wordpress/blob": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/block-editor": "^15.8.1-next.dc3f6d3c1.0",
-		"@wordpress/block-library": "^9.35.1-next.dc3f6d3c1.0",
-		"@wordpress/blocks": "^15.8.1-next.dc3f6d3c1.0",
-		"@wordpress/commands": "^1.35.1-next.dc3f6d3c1.0",
-		"@wordpress/components": "^30.8.2-next.dc3f6d3c1.0",
-		"@wordpress/compose": "^7.35.1-next.dc3f6d3c1.0",
-		"@wordpress/core-data": "^7.35.1-next.dc3f6d3c1.0",
-		"@wordpress/data": "^10.35.1-next.dc3f6d3c1.0",
-		"@wordpress/dataviews": "^10.4.1-next.dc3f6d3c1.0",
-		"@wordpress/date": "^5.35.1-next.dc3f6d3c1.0",
-		"@wordpress/deprecated": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/dom": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/editor": "^14.35.2-next.dc3f6d3c1.0",
-		"@wordpress/element": "^6.35.1-next.dc3f6d3c1.0",
-		"@wordpress/escape-html": "^3.35.1-next.dc3f6d3c1.0",
-		"@wordpress/fields": "^0.27.1-next.dc3f6d3c1.0",
-		"@wordpress/global-styles-engine": "^1.2.1-next.dc3f6d3c1.0",
-		"@wordpress/global-styles-ui": "^1.2.1-next.dc3f6d3c1.0",
-		"@wordpress/hooks": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/html-entities": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/i18n": "^6.8.1-next.dc3f6d3c1.0",
-		"@wordpress/icons": "^11.2.1-next.dc3f6d3c1.0",
-		"@wordpress/keyboard-shortcuts": "^5.35.1-next.dc3f6d3c1.0",
-		"@wordpress/keycodes": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/media-utils": "^5.35.1-next.dc3f6d3c1.0",
-		"@wordpress/notices": "^5.35.1-next.dc3f6d3c1.0",
-		"@wordpress/patterns": "^2.35.1-next.dc3f6d3c1.0",
-		"@wordpress/plugins": "^7.35.1-next.dc3f6d3c1.0",
-		"@wordpress/preferences": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/primitives": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/private-apis": "^1.35.1-next.dc3f6d3c1.0",
-		"@wordpress/reusable-blocks": "^5.35.1-next.dc3f6d3c1.0",
-		"@wordpress/router": "^1.35.1-next.dc3f6d3c1.0",
-		"@wordpress/style-engine": "^2.35.1-next.dc3f6d3c1.0",
-		"@wordpress/url": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/viewport": "^6.35.1-next.dc3f6d3c1.0",
-		"@wordpress/views": "^1.2.1-next.dc3f6d3c1.0",
-		"@wordpress/widgets": "^4.35.1-next.dc3f6d3c1.0",
-		"@wordpress/wordcount": "^4.35.1-next.dc3f6d3c1.0",
+		"@wordpress/a11y": "^4.36.0",
+		"@wordpress/admin-ui": "^1.4.0",
+		"@wordpress/api-fetch": "^7.36.0",
+		"@wordpress/base-styles": "^6.12.0",
+		"@wordpress/blob": "^4.36.0",
+		"@wordpress/block-editor": "^15.9.0",
+		"@wordpress/block-library": "^9.36.0",
+		"@wordpress/blocks": "^15.9.0",
+		"@wordpress/commands": "^1.36.0",
+		"@wordpress/components": "^30.9.0",
+		"@wordpress/compose": "^7.36.0",
+		"@wordpress/core-data": "^7.36.0",
+		"@wordpress/data": "^10.36.0",
+		"@wordpress/dataviews": "^11.0.0",
+		"@wordpress/date": "^5.36.0",
+		"@wordpress/deprecated": "^4.36.0",
+		"@wordpress/dom": "^4.36.0",
+		"@wordpress/editor": "^14.36.0",
+		"@wordpress/element": "^6.36.0",
+		"@wordpress/escape-html": "^3.36.0",
+		"@wordpress/fields": "^0.28.0",
+		"@wordpress/global-styles-engine": "^1.3.0",
+		"@wordpress/global-styles-ui": "^1.3.0",
+		"@wordpress/hooks": "^4.36.0",
+		"@wordpress/html-entities": "^4.36.0",
+		"@wordpress/i18n": "^6.9.0",
+		"@wordpress/icons": "^11.3.0",
+		"@wordpress/keyboard-shortcuts": "^5.36.0",
+		"@wordpress/keycodes": "^4.36.0",
+		"@wordpress/media-utils": "^5.36.0",
+		"@wordpress/notices": "^5.36.0",
+		"@wordpress/patterns": "^2.36.0",
+		"@wordpress/plugins": "^7.36.0",
+		"@wordpress/preferences": "^4.36.0",
+		"@wordpress/primitives": "^4.36.0",
+		"@wordpress/private-apis": "^1.36.0",
+		"@wordpress/reusable-blocks": "^5.36.0",
+		"@wordpress/router": "^1.36.0",
+		"@wordpress/style-engine": "^2.36.0",
+		"@wordpress/url": "^4.36.0",
+		"@wordpress/viewport": "^6.36.0",
+		"@wordpress/views": "^1.3.0",
+		"@wordpress/widgets": "^4.36.0",
+		"@wordpress/wordcount": "^4.36.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.9.2",
@@ -98,5 +98,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f73b5e69b34fbaccfb8c47783f4f993059ff1a41"
+	"gitHead": "b35cf1a2dce04665e99fd6b9c2891c0b336361b9"
 }

package/src/components/add-new-template-legacy/add-custom-generic-template-modal-content.js

@@ -0,0 +1,94 @@
+/**
+ * External dependencies
+ */
+import { paramCase as kebabCase } from 'change-case';
+
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	TextControl,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+function AddCustomGenericTemplateModalContent( { createTemplate, onBack } ) {
+	const [ title, setTitle ] = useState( '' );
+	const defaultTitle = __( 'Custom Template' );
+	const [ isBusy, setIsBusy ] = useState( false );
+	const inputRef = useRef();
+
+	// Set focus to the name input when the component mounts
+	useEffect( () => {
+		if ( inputRef.current ) {
+			inputRef.current.focus();
+		}
+	}, [] );
+
+	async function onCreateTemplate( event ) {
+		event.preventDefault();
+		if ( isBusy ) {
+			return;
+		}
+		setIsBusy( true );
+		try {
+			await createTemplate(
+				{
+					slug:
+						kebabCase( title || defaultTitle ) ||
+						'wp-custom-template',
+					title: title || defaultTitle,
+				},
+				false
+			);
+		} finally {
+			setIsBusy( false );
+		}
+	}
+	return (
+		<form onSubmit={ onCreateTemplate }>
+			<VStack spacing={ 6 }>
+				<TextControl
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+					label={ __( 'Name' ) }
+					value={ title }
+					onChange={ setTitle }
+					placeholder={ defaultTitle }
+					disabled={ isBusy }
+					ref={ inputRef }
+					help={ __(
+						// eslint-disable-next-line no-restricted-syntax -- 'sidebar' is a common web design term for layouts
+						'Describe the template, e.g. "Post with sidebar". A custom template can be manually applied to any post or page.'
+					) }
+				/>
+				<HStack
+					className="edit-site-custom-generic-template__modal-actions"
+					justify="right"
+				>
+					<Button
+						__next40pxDefaultSize
+						variant="tertiary"
+						onClick={ onBack }
+					>
+						{ __( 'Back' ) }
+					</Button>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						type="submit"
+						isBusy={ isBusy }
+						aria-disabled={ isBusy }
+					>
+						{ __( 'Create' ) }
+					</Button>
+				</HStack>
+			</VStack>
+		</form>
+	);
+}
+
+export default AddCustomGenericTemplateModalContent;