From 68027f307805ff729bc130cdb5c5dc8be0eaacfd Mon Sep 17 00:00:00 2001 From: Kallyan Singha Date: Fri, 20 Dec 2024 02:15:02 +0530 Subject: [PATCH 1/4] Fix: FSE editor sidebar item scroll accessibility issue - Restructured the dom elements and removed sticky - Moved description to title component and made it fixed --- packages/base-styles/_z-index.scss | 2 +- packages/block-library/src/image/block.json | 9 +- .../block-library/src/post-content/block.json | 2 +- .../sidebar-navigation-screen/index.js | 98 ++++++++++--------- .../sidebar-navigation-screen/style.scss | 12 ++- 5 files changed, 68 insertions(+), 55 deletions(-) diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index af679edb91064..dcba54400ab0f 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -196,7 +196,7 @@ $z-layers: ( ".edit-site-layout__sidebar": 1, ".edit-site-layout__canvas-container.is-resizing::after": 100, // Title needs to appear above other UI the section content. - ".edit-site-sidebar-navigation-screen__title-icon": 1, + ".edit-site-sidebar-navigation-screen__sticky-title-section": 1, // Ensure modal footer actions appear above modal contents ".editor-start-template-options__modal__actions": 1, diff --git a/packages/block-library/src/image/block.json b/packages/block-library/src/image/block.json index 16e3121747602..26835df9e856c 100644 --- a/packages/block-library/src/image/block.json +++ b/packages/block-library/src/image/block.json @@ -4,7 +4,14 @@ "name": "core/image", "title": "Image", "category": "media", - "usesContext": [ "allowResize", "imageCrop", "fixedHeight", "postId", "postType", "queryId" ], + "usesContext": [ + "allowResize", + "imageCrop", + "fixedHeight", + "postId", + "postType", + "queryId" + ], "description": "Insert an image to make a visual statement.", "keywords": [ "img", "photo", "picture" ], "textdomain": "default", diff --git a/packages/block-library/src/post-content/block.json b/packages/block-library/src/post-content/block.json index ed9c47154b2f8..e5d455b97a8a3 100644 --- a/packages/block-library/src/post-content/block.json +++ b/packages/block-library/src/post-content/block.json @@ -69,4 +69,4 @@ }, "style": "wp-block-post-content", "editorStyle": "wp-block-post-content-editor" -} \ No newline at end of file +} diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js index c6b3742a3fd8b..4bf48ea5ebdcb 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js @@ -75,52 +75,59 @@ export default function SidebarNavigationScreen( { spacing={ 0 } justify="flex-start" > - - { ! isRoot && ( - { - history.navigate( backPath ); - navigate( 'back' ); - } } - icon={ icon } - label={ __( 'Back' ) } - showTooltip={ false } - /> - ) } - { isRoot && ( - - ) } - - { ! isPreviewingTheme() - ? title - : sprintf( - /* translators: 1: theme name. 2: title */ - __( 'Previewing %1$s: %2$s' ), - previewingThemeName, - title - ) } - - { actions && ( -
- { actions } -
+ + { ! isRoot && ( + { + history.navigate( backPath ); + navigate( 'back' ); + } } + icon={ icon } + label={ __( 'Back' ) } + showTooltip={ false } + /> + ) } + { isRoot && ( + + ) } + + { ! isPreviewingTheme() + ? title + : sprintf( + /* translators: 1: theme name. 2: title */ + __( 'Previewing %1$s: %2$s' ), + previewingThemeName, + title + ) } + + { actions && ( +
+ { actions } +
+ ) } + + { description && ( +

+ { description } +

) } - + { meta && ( <>
@@ -130,11 +137,6 @@ export default function SidebarNavigationScreen( { ) }
- { description && ( -

- { description } -

- ) } { content }
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 71704653b4cd8..919adcea8749f 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -13,10 +13,12 @@ &.has-footer { margin-bottom: 0; } + overflow: hidden; } .edit-site-sidebar-navigation-screen__content { padding: 0 $grid-unit-20; + overflow: auto; .components-text { color: $gray-400; @@ -50,14 +52,16 @@ } } -.edit-site-sidebar-navigation-screen__title-icon { - position: sticky; - top: 0; +.edit-site-sidebar-navigation-screen__sticky-title-section { background: $gray-900; padding-top: $grid-unit-60; margin-bottom: $grid-unit-10; padding-bottom: $grid-unit-10; - z-index: z-index(".edit-site-sidebar-navigation-screen__title-icon"); + z-index: z-index(".edit-site-sidebar-navigation-screen__sticky-title-section"); +} + +.edit-site-sidebar-navigation-screen__description { + padding: $grid-unit-10 $grid-unit-20; } .edit-site-sidebar-navigation-screen__title { From 0ba2623d494db133d831203aea14b991fae03b31 Mon Sep 17 00:00:00 2001 From: Kallyan Singha Date: Fri, 20 Dec 2024 03:10:38 +0530 Subject: [PATCH 2/4] Fix: Height issue on sticky title section --- .../src/components/sidebar-navigation-screen/index.js | 6 +++++- .../src/components/sidebar-navigation-screen/style.scss | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/index.js b/packages/edit-site/src/components/sidebar-navigation-screen/index.js index 4bf48ea5ebdcb..fff66334cfd18 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/index.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen/index.js @@ -79,7 +79,11 @@ export default function SidebarNavigationScreen( { className="edit-site-sidebar-navigation-screen__sticky-title-section" alignment="flex-start" > - + { ! isRoot && ( { diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 919adcea8749f..9ed2753ce7b03 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -13,7 +13,7 @@ &.has-footer { margin-bottom: 0; } - overflow: hidden; + overflow: auto; } .edit-site-sidebar-navigation-screen__content { @@ -58,6 +58,7 @@ margin-bottom: $grid-unit-10; padding-bottom: $grid-unit-10; z-index: z-index(".edit-site-sidebar-navigation-screen__sticky-title-section"); + min-height: 183px !important; } .edit-site-sidebar-navigation-screen__description { From 0037a2b33e63e0fd4d8880c56df8e499152600ae Mon Sep 17 00:00:00 2001 From: Kallyan Singha Date: Fri, 17 Jan 2025 22:21:19 +0530 Subject: [PATCH 3/4] fix: padding issue in fse editor list --- .../src/components/sidebar-navigation-screen/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 9ed2753ce7b03..98a7c30225179 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -17,7 +17,7 @@ } .edit-site-sidebar-navigation-screen__content { - padding: 0 $grid-unit-20; + padding: 0 $grid-unit-30; overflow: auto; .components-text { From 2246cc25b1002a60a14eb91a1811f4f9caf1e559 Mon Sep 17 00:00:00 2001 From: Kallyan Singha Date: Fri, 17 Jan 2025 23:58:35 +0530 Subject: [PATCH 4/4] fix: safari siteeditor scrollbar style fix --- .../src/components/sidebar-navigation-screen/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss index 98a7c30225179..ba1ab389c2bf9 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-screen/style.scss @@ -19,6 +19,7 @@ .edit-site-sidebar-navigation-screen__content { padding: 0 $grid-unit-30; overflow: auto; + @include custom-scrollbars-on-hover(transparent, $gray-700); .components-text { color: $gray-400;