From 47f59a323c3d0d4d6921b841c221233a365f9551 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Thu, 24 Aug 2023 14:37:25 +0300 Subject: [PATCH 1/6] move the editor pinned items last in post editor --- packages/edit-post/src/components/layout/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index c0018d40d6ef8..870a3e9044dfc 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -266,7 +266,7 @@ function Layout() { - + + ); } From ca26d8561a013020c9e8fe58042d604c8f653ff0 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 25 Aug 2023 17:10:37 +0300 Subject: [PATCH 2/6] try identifying pinned items by aria controls attribute --- .../src/components/complementary-area-toggle/index.js | 1 + .../interface/src/components/complementary-area/index.js | 7 +++++-- packages/interface/src/components/pinned-items/style.scss | 7 +++++-- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/interface/src/components/complementary-area-toggle/index.js b/packages/interface/src/components/complementary-area-toggle/index.js index 1abdeb2c84f26..b6690b7df5fc5 100644 --- a/packages/interface/src/components/complementary-area-toggle/index.js +++ b/packages/interface/src/components/complementary-area-toggle/index.js @@ -31,6 +31,7 @@ function ComplementaryAreaToggle( { return ( { if ( isSelected ) { disableComplementaryArea( scope ); diff --git a/packages/interface/src/components/complementary-area/index.js b/packages/interface/src/components/complementary-area/index.js index de69762b6a15c..887c447d9291e 100644 --- a/packages/interface/src/components/complementary-area/index.js +++ b/packages/interface/src/components/complementary-area/index.js @@ -27,10 +27,12 @@ function ComplementaryAreaSlot( { scope, ...props } ) { return ; } -function ComplementaryAreaFill( { scope, children, className } ) { +function ComplementaryAreaFill( { scope, children, className, id } ) { return ( -
{ children }
+
+ { children } +
); } @@ -200,6 +202,7 @@ function ComplementaryArea( { className ) } scope={ scope } + id={ identifier.replace( '/', ':' ) } > Date: Fri, 1 Sep 2023 17:14:43 +0300 Subject: [PATCH 3/6] update snapshots with the new attrs --- .../test/__snapshots__/index.js.snap | 944 ++++++++++++++++++ 1 file changed, 944 insertions(+) create mode 100644 packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap new file mode 100644 index 0000000000000..d1c3b974a54e6 --- /dev/null +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -0,0 +1,944 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EditPostPreferencesModal should match snapshot when the modal is active large viewports 1`] = ` +.emotion-0 { + font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif; + font-size: 13px; + box-sizing: border-box; +} + +.emotion-0 *, +.emotion-0 *::before, +.emotion-0 *::after { + box-sizing: inherit; +} + +.components-panel__row .emotion-2 { + margin-bottom: inherit; +} + +.emotion-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + gap: calc(4px * 3); + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + justify-content: flex-start; + width: 100%; +} + +.emotion-4>* { + min-width: 0; +} + +.emotion-6 { + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; + -webkit-flex: 1; + -ms-flex: 1; + flex: 1; +} + +.emotion-8 { + margin-top: calc(4px * 2); + margin-bottom: 0; + font-size: 12px; + font-style: normal; + color: #757575; +} + + +`; + +exports[`EditPostPreferencesModal should match snapshot when the modal is active small viewports 1`] = ` +.emotion-0 { + overflow-x: hidden; +} + +.emotion-2 { + overflow-x: auto; + max-height: 100%; +} + +.emotion-3 { + background-color: #fff; + color: #1e1e1e; + position: relative; + box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); + outline: none; + box-shadow: none; + border-radius: calc(2px - 1px); +} + +.emotion-5 { + height: 100%; +} + +.emotion-7 { + box-sizing: border-box; + height: auto; + max-height: 100%; + padding: calc(4px * 4); +} + +.emotion-7:first-of-type { + border-top-left-radius: calc(2px - 1px); + border-top-right-radius: calc(2px - 1px); +} + +.emotion-7:last-of-type { + border-bottom-left-radius: calc(2px - 1px); + border-bottom-right-radius: calc(2px - 1px); +} + +.emotion-9 { + border-radius: 2px; +} + +.emotion-9>*:first-of-type>* { + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} + +.emotion-9>*:last-of-type>* { + border-bottom-left-radius: 2px; + border-bottom-right-radius: 2px; +} + +.emotion-11 { + width: 100%; + display: block; +} + +.emotion-13 { + font-size: 13px; + font-family: inherit; + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + appearance: none; + border: 1px solid transparent; + cursor: pointer; + background: none; + text-align: start; + padding: calc((36px - calc(13px * 1.2) - 2px) / 2) 12px; + box-sizing: border-box; + width: 100%; + display: block; + margin: 0; + color: inherit; + border-radius: 2px; +} + +.emotion-13 svg, +.emotion-13 path { + fill: currentColor; +} + +.emotion-13:hover { + color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)); +} + +.emotion-13:focus { + box-shadow: none; + outline: none; +} + +.emotion-13:focus-visible { + box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( + --wp-components-color-accent, + var( --wp-admin-theme-color, var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) ) + ); + outline: 2px solid transparent; + outline-offset: 0; +} + +.emotion-15 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + gap: calc(4px * 2); + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + justify-content: space-between; + width: 100%; +} + +.emotion-15>* { + min-width: 0; +} + +.emotion-17 { + display: block; + max-height: 100%; + max-width: 100%; + min-height: 0; + min-width: 0; +} + +.emotion-19 { + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.emotion-47 { + background: transparent; + display: block; + margin: 0!important; + pointer-events: none; + position: absolute; + will-change: box-shadow; + border-radius: inherit; + bottom: 0; + box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0); + opacity: 1; + left: 0; + right: 0; + top: 0; + -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); + border-radius: 2px; +} + +@media ( prefers-reduced-motion: reduce ) { + .emotion-47 { + transition-duration: 0ms; + } +} + +