- { previewItem && (
+ { pageId !== null ? (
- ) }
- { ! previewItem && (
+ ) : (
Date: Mon, 4 Dec 2023 19:18:54 +0100
Subject: [PATCH 11/30] Do not pass the view to the render
---
packages/dataviews/src/view-grid.js | 7 +++----
packages/dataviews/src/view-table.js | 3 +--
packages/edit-site/src/components/page-pages/index.js | 6 +++---
.../src/components/page-templates/dataviews-templates.js | 6 +++---
4 files changed, 10 insertions(+), 12 deletions(-)
diff --git a/packages/dataviews/src/view-grid.js b/packages/dataviews/src/view-grid.js
index 89dd7d393430d9..d28bfa055d946b 100644
--- a/packages/dataviews/src/view-grid.js
+++ b/packages/dataviews/src/view-grid.js
@@ -43,14 +43,14 @@ export default function ViewGrid( { data, fields, view, actions, getItemId } ) {
className="dataviews-view-grid__card"
>
- { mediaField?.render( { item, view } ) }
+ { mediaField?.render( { item } ) }
- { primaryField?.render( { item, view } ) }
+ { primaryField?.render( { item } ) }
{
const renderedValue = field.render( {
item,
- view,
} );
if ( ! renderedValue ) {
return null;
@@ -80,7 +79,7 @@ export default function ViewGrid( { data, fields, view, actions, getItemId } ) {
{ field.header }
- { field.render( { item, view } ) }
+ { field.render( { item } ) }
);
diff --git a/packages/dataviews/src/view-table.js b/packages/dataviews/src/view-table.js
index 8b6422b4be11a7..5ce9456344f695 100644
--- a/packages/dataviews/src/view-table.js
+++ b/packages/dataviews/src/view-table.js
@@ -344,8 +344,7 @@ function ViewTable( {
const columns = useMemo( () => {
const _columns = fields.map( ( field ) => {
const { render, getValue, ...column } = field;
- column.cell = ( props ) =>
- render( { item: props.row.original, view } );
+ column.cell = ( props ) => render( { item: props.row.original } );
if ( getValue ) {
column.accessorFn = ( item ) => getValue( { item } );
}
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 3033ee190e62c5..c530df3d6e6257 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -194,13 +194,13 @@ export default function PagePages() {
id: 'featured-image',
header: __( 'Featured Image' ),
getValue: ( { item } ) => item.featured_media,
- render: ( { item, view: currentView } ) =>
+ render: ( { item } ) =>
!! item.featured_media ? (
{
+ render: ( { item } ) => {
return (
- { primaryField?.render( { item } ) }
-
+ { primaryField?.render( { item } ) }
/* eslint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */
);
From e2fbf38d36a0c7ba118af0f856944539f335e66b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 10:27:14 +0100
Subject: [PATCH 14/30] Display other fields
---
packages/dataviews/src/style.scss | 5 +++++
packages/dataviews/src/view-list.js | 26 ++++++++++++++++++++++++--
2 files changed, 29 insertions(+), 2 deletions(-)
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index a31da90968d2af..43e7519503a5ab 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -138,7 +138,12 @@
background-color: $gray-100;
}
}
+
+ .dataviews-list-view__fields {
+ color: $gray-700;
+ }
}
+
.dataviews-action-modal {
z-index: z-index(".dataviews-action-modal");
}
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index 9d2e00601cfd38..dce31676fb448e 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -2,7 +2,10 @@
* WordPress dependencies
*/
import { useAsyncList } from '@wordpress/compose';
-import { __experimentalHStack as HStack } from '@wordpress/components';
+import {
+ __experimentalHStack as HStack,
+ __experimentalVStack as VStack,
+} from '@wordpress/components';
export default function ViewList( {
view,
@@ -15,6 +18,11 @@ export default function ViewList( {
const primaryField = fields.find(
( field ) => field.id === view.layout.primaryField
);
+ const visibleFields = fields.filter(
+ ( field ) =>
+ ! view.hiddenFields.includes( field.id ) &&
+ view.layout.primaryField !== field.id
+ );
return (
@@ -26,7 +34,21 @@ export default function ViewList( {
key={ getItemId?.( item ) || index }
onClick={ () => onSelectionChange( [ item ] ) }
>
- { primaryField?.render( { item } ) }
+
+ { primaryField?.render( { item } ) }
+
+ { visibleFields.map( ( field ) => {
+ return (
+
+ { field.render( { item } ) }
+
+ );
+ } ) }
+
+
/* eslint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */
);
From 6910c9f5169052719f181f1e0737ff182b85340c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 11:07:05 +0100
Subject: [PATCH 15/30] Display mediaField
---
packages/dataviews/src/style.scss | 12 ++++++
packages/dataviews/src/view-list.js | 42 ++++++++++++-------
.../src/components/page-pages/index.js | 1 +
3 files changed, 40 insertions(+), 15 deletions(-)
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 43e7519503a5ab..f44f44bcf4078c 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -139,6 +139,18 @@
}
}
+ .edit-site-page-pages__featured-image,
+ .dataviews-list-view__media-placeholder {
+ width: 45px;
+ height: 45px;
+ margin-right: 1em;
+ }
+
+ .dataviews-list-view__media-placeholder {
+ background-color: $gray-200;
+ border-radius: $radius-block-ui;
+ }
+
.dataviews-list-view__fields {
color: $gray-700;
}
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index dce31676fb448e..55fae860f2b173 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -15,13 +15,18 @@ export default function ViewList( {
onSelectionChange,
} ) {
const shownData = useAsyncList( data, { step: 3 } );
+ const mediaField = fields.find(
+ ( field ) => field.id === view.layout.mediaField
+ );
const primaryField = fields.find(
( field ) => field.id === view.layout.primaryField
);
const visibleFields = fields.filter(
( field ) =>
! view.hiddenFields.includes( field.id ) &&
- view.layout.primaryField !== field.id
+ ! [ view.layout.primaryField, view.layout.mediaField ].includes(
+ field.id
+ )
);
return (
@@ -34,21 +39,28 @@ export default function ViewList( {
key={ getItemId?.( item ) || index }
onClick={ () => onSelectionChange( [ item ] ) }
>
-
- { primaryField?.render( { item } ) }
-
- { visibleFields.map( ( field ) => {
- return (
-
- { field.render( { item } ) }
-
- );
- } ) }
+
+ { mediaField?.render( { item } ) || (
+
+ ) }
+
+
+ { primaryField?.render( { item } ) }
+
+ { visibleFields.map( ( field ) => {
+ return (
+
+ { field.render( { item } ) }
+
+ );
+ } ) }
+
+
-
+
/* eslint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */
);
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 291eb99ed46a86..2a7a66298744c6 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -51,6 +51,7 @@ const defaultConfigPerViewType = {
},
[ LAYOUT_LIST ]: {
primaryField: 'title',
+ mediaField: 'featured-image',
},
};
From b822691d2c3df5082733255c627f0f20e7995ef4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 11:19:19 +0100
Subject: [PATCH 16/30] Document use of mediaField
---
packages/dataviews/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 8ff98b79180143..c0d0a01cbc3e28 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -76,7 +76,7 @@ Example:
- `value`: the actual value selected by the user.
- `hiddenFields`: the `id` of the fields that are hidden in the UI.
- `layout`: config that is specific to a particular layout type.
- - `mediaField`: used by the `grid` layout. The `id` of the field to be used for rendering each card's media.
+ - `mediaField`: used by the `grid` and `list` layouts. The `id` of the field to be used for rendering each card's media.
- `primaryField`: used by the `grid` and `list` layouts. The `id` of the field to be highlighted in each card/list item.
### View <=> data
From 4d6994b6f960c9877da720389ba65cde4b6307d4 Mon Sep 17 00:00:00 2001
From: James Koster
Date: Tue, 5 Dec 2023 12:16:56 +0000
Subject: [PATCH 17/30] Styling
---
packages/dataviews/src/style.scss | 44 +++++++++++++++++++++++++----
packages/dataviews/src/view-list.js | 16 +++++------
2 files changed, 47 insertions(+), 13 deletions(-)
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index f44f44bcf4078c..91d70839a30fc9 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -129,30 +129,64 @@
.dataviews-list-view {
li {
- padding: $grid-unit-20 $grid-unit-40;
+ padding: $grid-unit-15 $grid-unit-40;
border-bottom: $border-width solid $gray-100;
+ margin: 0;
&:last-child {
border-bottom: 0;
}
&:hover {
background-color: $gray-100;
}
+ h3 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ .dataviews-list-view__media-wrapper {
+ min-width: $grid-unit-40;
+ height: $grid-unit-40;
+ border-radius: $grid-unit-05;
+ overflow: hidden;
+ position: relative;
+
+ &:after {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ box-shadow: inset 0 0 0 $border-width rgba(0,0,0,0.1);
+ border-radius: $grid-unit-05;
+ }
}
.edit-site-page-pages__featured-image,
.dataviews-list-view__media-placeholder {
- width: 45px;
- height: 45px;
- margin-right: 1em;
+ min-width: $grid-unit-40;
+ height: $grid-unit-40;
}
.dataviews-list-view__media-placeholder {
background-color: $gray-200;
- border-radius: $radius-block-ui;
}
.dataviews-list-view__fields {
color: $gray-700;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ .dataviews-list-view__field {
+ margin-right: $grid-unit-15;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
}
}
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index 55fae860f2b173..b8ede1d6115f69 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -39,25 +39,25 @@ export default function ViewList( {
key={ getItemId?.( item ) || index }
onClick={ () => onSelectionChange( [ item ] ) }
>
-
+
{ mediaField?.render( { item } ) || (
) }
-
+
{ primaryField?.render( { item } ) }
-
+
{ visibleFields.map( ( field ) => {
return (
-
+
{ field.render( { item } ) }
);
} ) }
-
+
From d0aaf512bef7a5fd49f86650e1d7cb94f79687bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 13:25:04 +0100
Subject: [PATCH 18/30] Use an element other than li as interactive
---
packages/dataviews/package.json | 1 +
packages/dataviews/src/style.scss | 10 +++--
packages/dataviews/src/view-list.js | 68 +++++++++++++++++------------
3 files changed, 48 insertions(+), 31 deletions(-)
diff --git a/packages/dataviews/package.json b/packages/dataviews/package.json
index 40a09050b94321..3d15ea435ab4f8 100644
--- a/packages/dataviews/package.json
+++ b/packages/dataviews/package.json
@@ -35,6 +35,7 @@
"@wordpress/element": "file:../element",
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
+ "@wordpress/keycodes": "file:../keycodes",
"@wordpress/private-apis": "file:../private-apis",
"classnames": "^2.3.1",
"remove-accents": "^0.5.0"
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 91d70839a30fc9..19992c9c2bbbaf 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -129,13 +129,17 @@
.dataviews-list-view {
li {
- padding: $grid-unit-15 $grid-unit-40;
border-bottom: $border-width solid $gray-100;
- margin: 0;
&:last-child {
border-bottom: 0;
}
- &:hover {
+ }
+
+ .dataviews-list-view__item {
+ padding: $grid-unit-15 $grid-unit-40;
+ margin: 0;
+ &:hover,
+ &:focus {
background-color: $gray-100;
}
h3 {
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index b8ede1d6115f69..84b101683f32f5 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -6,6 +6,7 @@ import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
+import { ENTER } from '@wordpress/keycodes';
export default function ViewList( {
view,
@@ -29,40 +30,51 @@ export default function ViewList( {
)
);
+ const onEnter = ( item ) => ( event ) => {
+ const { keyCode } = event;
+ if ( keyCode === ENTER ) {
+ onSelectionChange( [ item ] );
+ }
+ };
+
return (
{ shownData.map( ( item, index ) => {
return (
- // TODO: make li interactive.
- /* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */
- onSelectionChange( [ item ] ) }
- >
-
- { mediaField?.render( { item } ) || (
-
- ) }
-
-
- { primaryField?.render( { item } ) }
-
- { visibleFields.map( ( field ) => {
- return (
-
- { field.render( { item } ) }
-
- );
- } ) }
-
-
+
+ onSelectionChange( [ item ] ) }
+ >
+
+ { mediaField?.render( { item } ) || (
+
+ ) }
+
+
+ { primaryField?.render( { item } ) }
+
+ { visibleFields.map( ( field ) => {
+ return (
+
+ { field.render( {
+ item,
+ } ) }
+
+ );
+ } ) }
+
+
+
-
+
- /* eslint-enable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */
);
} ) }
From b081b155d2d0d14600732e8c405d9b1a0af5cb55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 14:27:15 +0100
Subject: [PATCH 19/30] Track selection
---
packages/dataviews/src/dataviews.js | 12 ++++++++++--
packages/dataviews/src/style.scss | 8 ++++++--
packages/dataviews/src/view-list.js | 14 +++++++++++++-
3 files changed, 29 insertions(+), 5 deletions(-)
diff --git a/packages/dataviews/src/dataviews.js b/packages/dataviews/src/dataviews.js
index b680aeb4bd67db..21d5b24aec345d 100644
--- a/packages/dataviews/src/dataviews.js
+++ b/packages/dataviews/src/dataviews.js
@@ -5,7 +5,7 @@ import {
__experimentalVStack as VStack,
__experimentalHStack as HStack,
} from '@wordpress/components';
-import { useMemo } from '@wordpress/element';
+import { useMemo, useState } from '@wordpress/element';
/**
* Internal dependencies
@@ -30,6 +30,13 @@ export default function DataViews( {
supportedLayouts,
onSelectionChange,
} ) {
+ const [ selection, setSelection ] = useState( [] );
+
+ const onSetSelection = ( items ) => {
+ setSelection( items.map( ( item ) => item.id ) );
+ onSelectionChange( items );
+ };
+
const ViewComponent = VIEW_LAYOUTS.find(
( v ) => v.type === view.type
).component;
@@ -73,7 +80,8 @@ export default function DataViews( {
data={ data }
getItemId={ getItemId }
isLoading={ isLoading }
- onSelectionChange={ onSelectionChange }
+ onSelectionChange={ onSetSelection }
+ selection={ selection }
/>
onSelectionChange( [ item ] ) }
>
From 771f5f471e95bcefcd849377a6e138b23659043f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 14:30:33 +0100
Subject: [PATCH 20/30] Do not render a link for the primary field in the list
view
---
.../src/components/page-pages/index.js | 28 ++++++++++++-------
1 file changed, 18 insertions(+), 10 deletions(-)
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index 2a7a66298744c6..d283264a096efd 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -217,17 +217,25 @@ export default function PagePages() {
return (
-
);
From 32dcc5d983977da68c2fc38038865ed7993bf170 Mon Sep 17 00:00:00 2001
From: James Koster
Date: Tue, 5 Dec 2023 13:47:53 +0000
Subject: [PATCH 21/30] Media wrapper and list item margin
---
packages/dataviews/src/style.scss | 2 +-
packages/dataviews/src/view-list.js | 8 +++++---
2 files changed, 6 insertions(+), 4 deletions(-)
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index b1a4168a549df3..c8ff62439e7dda 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -130,6 +130,7 @@
.dataviews-list-view {
li {
border-bottom: $border-width solid $gray-100;
+ margin: 0;
&:last-child {
border-bottom: 0;
}
@@ -137,7 +138,6 @@
.dataviews-list-view__item {
padding: $grid-unit-15 $grid-unit-40;
- margin: 0;
&:hover,
&:focus {
background-color: $gray-100;
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index bb2385058b0471..329a89db4a4d96 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -62,9 +62,11 @@ export default function ViewList( {
onClick={ () => onSelectionChange( [ item ] ) }
>
- { mediaField?.render( { item } ) || (
-
- ) }
+
+ { mediaField?.render( { item } ) || (
+
+ ) }
+
{ primaryField?.render( { item } ) }
From c0e1a365d85e6a62d6588238f9c01ad5c087d47c Mon Sep 17 00:00:00 2001
From: James Koster
Date: Tue, 5 Dec 2023 13:55:17 +0000
Subject: [PATCH 22/30] Item interaction styles
---
packages/dataviews/src/style.scss | 11 ++++++-----
1 file changed, 6 insertions(+), 5 deletions(-)
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index c8ff62439e7dda..439f1a02421516 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -138,9 +138,9 @@
.dataviews-list-view__item {
padding: $grid-unit-15 $grid-unit-40;
- &:hover,
- &:focus {
- background-color: $gray-100;
+ cursor: default;
+ &:hover {
+ background-color: lighten($gray-100,3%);
}
h3 {
overflow: hidden;
@@ -149,8 +149,9 @@
}
}
- .dataviews-list-view__item-selected {
- background-color: $gray-200;
+ .dataviews-list-view__item-selected,
+ .dataviews-list-view__item-selected:hover {
+ background-color: $gray-100;
}
.dataviews-list-view__media-wrapper {
From 525c93c8f861b918c5bd4f87051ed028dfae2211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 16:01:26 +0100
Subject: [PATCH 23/30] Fix CSS lint issue
---
packages/dataviews/src/style.scss | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 439f1a02421516..0a50d189bc9225 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -140,7 +140,7 @@
padding: $grid-unit-15 $grid-unit-40;
cursor: default;
&:hover {
- background-color: lighten($gray-100,3%);
+ background-color: lighten($gray-100, 3%);
}
h3 {
overflow: hidden;
From a8447bba92666367f8c231a5454e634d3e7b6abe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 16:03:02 +0100
Subject: [PATCH 24/30] Selected item focus: use same styles as hover
---
packages/dataviews/src/style.scss | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 0a50d189bc9225..1e0800885e09ba 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -139,6 +139,7 @@
.dataviews-list-view__item {
padding: $grid-unit-15 $grid-unit-40;
cursor: default;
+ &:focus,
&:hover {
background-color: lighten($gray-100, 3%);
}
@@ -150,7 +151,8 @@
}
.dataviews-list-view__item-selected,
- .dataviews-list-view__item-selected:hover {
+ .dataviews-list-view__item-selected:hover,
+ .dataviews-list-view__item-selected:focus {
background-color: $gray-100;
}
From 1f72b3605e952150dab038bc74def4cca6a3560b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 16:19:26 +0100
Subject: [PATCH 25/30] Add keycodes to package-lock
---
package-lock.json | 2 ++
1 file changed, 2 insertions(+)
diff --git a/package-lock.json b/package-lock.json
index 80a3f384e808ed..ec0fbd96b0cb19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -55075,6 +55075,7 @@
"@wordpress/element": "file:../element",
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
+ "@wordpress/keycodes": "file:../keycodes",
"@wordpress/private-apis": "file:../private-apis",
"classnames": "^2.3.1",
"remove-accents": "^0.5.0"
@@ -70411,6 +70412,7 @@
"@wordpress/element": "file:../element",
"@wordpress/i18n": "file:../i18n",
"@wordpress/icons": "file:../icons",
+ "@wordpress/keycodes": "file:../keycodes",
"@wordpress/private-apis": "file:../private-apis",
"classnames": "^2.3.1",
"remove-accents": "^0.5.0"
From 9013662f983b36b13b9d7bd8b9074dea77963705 Mon Sep 17 00:00:00 2001
From: James Koster
Date: Tue, 5 Dec 2023 15:42:45 +0000
Subject: [PATCH 26/30] Focus styles
---
packages/dataviews/src/style.scss | 10 ++++++++--
1 file changed, 8 insertions(+), 2 deletions(-)
diff --git a/packages/dataviews/src/style.scss b/packages/dataviews/src/style.scss
index 1e0800885e09ba..b4f4ac0c28f956 100644
--- a/packages/dataviews/src/style.scss
+++ b/packages/dataviews/src/style.scss
@@ -143,6 +143,9 @@
&:hover {
background-color: lighten($gray-100, 3%);
}
+ &:focus {
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+ }
h3 {
overflow: hidden;
text-overflow: ellipsis;
@@ -151,9 +154,12 @@
}
.dataviews-list-view__item-selected,
- .dataviews-list-view__item-selected:hover,
- .dataviews-list-view__item-selected:focus {
+ .dataviews-list-view__item-selected:hover {
background-color: $gray-100;
+
+ &:focus {
+ box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+ }
}
.dataviews-list-view__media-wrapper {
From ed554c5130e7d7097a912a024dc4fae489d74824 Mon Sep 17 00:00:00 2001
From: James Koster
Date: Tue, 5 Dec 2023 16:04:50 +0000
Subject: [PATCH 27/30] Heading weight
---
packages/edit-site/src/components/page-pages/index.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js
index d283264a096efd..fe6f50a4a9c070 100644
--- a/packages/edit-site/src/components/page-pages/index.js
+++ b/packages/edit-site/src/components/page-pages/index.js
@@ -216,7 +216,7 @@ export default function PagePages() {
render: ( { item } ) => {
return (
-
+
{ [ LAYOUT_TABLE, LAYOUT_GRID ].includes(
view.type
) ? (
From 4d3a7f280976912f53bc65e0842df3fdc6b336a9 Mon Sep 17 00:00:00 2001
From: James Koster
Date: Tue, 5 Dec 2023 16:27:45 +0000
Subject: [PATCH 28/30] Use formatListBullets for list view
---
packages/dataviews/src/constants.js | 11 ++++++++---
1 file changed, 8 insertions(+), 3 deletions(-)
diff --git a/packages/dataviews/src/constants.js b/packages/dataviews/src/constants.js
index 4512ddd880e1e4..387050a1dca5b6 100644
--- a/packages/dataviews/src/constants.js
+++ b/packages/dataviews/src/constants.js
@@ -1,8 +1,13 @@
/**
* WordPress dependencies
*/
-import { __ } from '@wordpress/i18n';
-import { blockTable, category, drawerLeft } from '@wordpress/icons';
+import { __, isRTL } from '@wordpress/i18n';
+import {
+ blockTable,
+ category,
+ formatListBullets,
+ formatListBulletsRTL,
+} from '@wordpress/icons';
/**
* Internal dependencies
@@ -40,6 +45,6 @@ export const VIEW_LAYOUTS = [
type: LAYOUT_LIST,
label: __( 'List' ),
component: ViewList,
- icon: drawerLeft,
+ icon: isRTL() ? formatListBulletsRTL : formatListBullets,
},
];
From 5621413d68a91707405c59e69c1769eb640f1389 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 17:34:01 +0100
Subject: [PATCH 29/30] Button role: support SPACE
---
packages/dataviews/src/view-list.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index 329a89db4a4d96..10c74aff2ecf14 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -11,7 +11,7 @@ import {
__experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';
-import { ENTER } from '@wordpress/keycodes';
+import { ENTER, SPACE } from '@wordpress/keycodes';
export default function ViewList( {
view,
@@ -38,7 +38,7 @@ export default function ViewList( {
const onEnter = ( item ) => ( event ) => {
const { keyCode } = event;
- if ( keyCode === ENTER ) {
+ if ( [ ENTER, SPACE ].includes( keyCode ) ) {
onSelectionChange( [ item ] );
}
};
From 4d0011d221fdc0b146bec5baa480e28a84d7a77e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
<583546+oandregal@users.noreply.github.com>
Date: Tue, 5 Dec 2023 17:35:19 +0100
Subject: [PATCH 30/30] Button role: add aria-pressed
---
packages/dataviews/src/view-list.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/dataviews/src/view-list.js b/packages/dataviews/src/view-list.js
index 10c74aff2ecf14..cd9b651cabca55 100644
--- a/packages/dataviews/src/view-list.js
+++ b/packages/dataviews/src/view-list.js
@@ -51,6 +51,7 @@ export default function ViewList( {