From 3e58709392e3c203e10e6ed02f79888d670477e9 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Fri, 6 Mar 2020 10:40:27 -0500 Subject: [PATCH 1/6] Remove the separator and border, and reduce the size of the icon. This removes the separator and border from the preview toggle. It also reduces the size of the icon down to 16px. Along with this, some adjustments to the button padding were required. --- .../src/components/preview-options/index.js | 5 ++--- .../src/components/preview-options/style.scss | 19 +++++++------------ 2 files changed, 9 insertions(+), 15 deletions(-) diff --git a/packages/edit-post/src/components/preview-options/index.js b/packages/edit-post/src/components/preview-options/index.js index 4535c44979e8a..8b89867ed6e23 100644 --- a/packages/edit-post/src/components/preview-options/index.js +++ b/packages/edit-post/src/components/preview-options/index.js @@ -22,6 +22,7 @@ import { external, check } from '@wordpress/icons'; const downArrow = ( { translateDropdownButtonText() } -
- { downArrow } -
+ { downArrow } ) } renderContent={ () => ( diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss index 0d523c297a330..7527138939c06 100644 --- a/packages/edit-post/src/components/preview-options/style.scss +++ b/packages/edit-post/src/components/preview-options/style.scss @@ -1,21 +1,25 @@ .editor-post-preview__dropdown { display: none; margin-right: $grid-unit-15; - box-shadow: inset 0 0 0 $border-width $light-gray-secondary; - border-radius: $radius-block-ui; + //box-shadow: inset 0 0 0 $border-width $light-gray-secondary; + //border-radius: $radius-block-ui; padding: 0; } .editor-post-preview__button-toggle { display: flex; justify-content: space-between; - padding: 0 0 0 $grid-unit-15; + padding: 0 $grid-unit-15; &:focus:not(:disabled) { box-shadow: inset 0 0 0 1px $white, 0 0 0 2px color($theme-color); } } +.editor-post-preview__button-icon { + height: 16px; +} + .editor-post-preview__button-resize.editor-post-preview__button-resize { padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10; @@ -24,15 +28,6 @@ } } -.editor-post-preview__button-separator { - border-left: $border-width solid $light-gray-secondary; - padding: 6px; - margin-left: $grid-unit-15; - display: flex; - align-items: center; - justify-content: center; -} - .editor-post-preview__dropdown-content { .components-popover__content { overflow-y: visible; From 978496435377c8994e999a391d91409f4381a7c6 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 9 Mar 2020 10:36:03 -0400 Subject: [PATCH 2/6] Removing the className and the dynamic label. Now the button always says "Preview". --- .../src/components/preview-options/index.js | 14 +------------- .../src/components/preview-options/style.scss | 6 +++--- 2 files changed, 4 insertions(+), 16 deletions(-) diff --git a/packages/edit-post/src/components/preview-options/index.js b/packages/edit-post/src/components/preview-options/index.js index 8b89867ed6e23..aa71e5b3f3b24 100644 --- a/packages/edit-post/src/components/preview-options/index.js +++ b/packages/edit-post/src/components/preview-options/index.js @@ -22,7 +22,6 @@ import { external, check } from '@wordpress/icons'; const downArrow = ( { - switch ( deviceType ) { - case 'Tablet': - return __( 'Tablet' ); - case 'Mobile': - return __( 'Mobile' ); - default: - return __( 'Desktop' ); - } - }; - const isSaveable = useSelect( ( select ) => { return select( 'core/editor' ).isEditedPostSaveable(); }, [] ); @@ -78,7 +66,7 @@ export default function PreviewOptions( { aria-expanded={ isOpen } disabled={ ! isSaveable } > - { translateDropdownButtonText() } + { __( 'Preview' ) } { downArrow } ) } diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss index 7527138939c06..0222d66afec60 100644 --- a/packages/edit-post/src/components/preview-options/style.scss +++ b/packages/edit-post/src/components/preview-options/style.scss @@ -14,10 +14,10 @@ &:focus:not(:disabled) { box-shadow: inset 0 0 0 1px $white, 0 0 0 2px color($theme-color); } -} -.editor-post-preview__button-icon { - height: 16px; + svg { + height: 16px; + } } .editor-post-preview__button-resize.editor-post-preview__button-resize { From c9abc7e3617862dd12a6af27fb275f9a84c8ee07 Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 9 Mar 2020 13:28:18 -0400 Subject: [PATCH 3/6] Move the svg sizing to the `header` component and adjusting the external icon's spacing and size. --- packages/edit-post/src/components/header/style.scss | 5 +++++ .../src/components/preview-options/style.scss | 13 +++++++------ 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 7d1a6a757ce24..6c29e15a91d62 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -29,6 +29,11 @@ order: initial; } } + + // Adjust icon sizes for dropdowns + .components-dropdown svg { + height: 16px; + } } .edit-post-header__toolbar { diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss index 0222d66afec60..743ceabd27abd 100644 --- a/packages/edit-post/src/components/preview-options/style.scss +++ b/packages/edit-post/src/components/preview-options/style.scss @@ -14,10 +14,6 @@ &:focus:not(:disabled) { box-shadow: inset 0 0 0 1px $white, 0 0 0 2px color($theme-color); } - - svg { - height: 16px; - } } .editor-post-preview__button-resize.editor-post-preview__button-resize { @@ -48,11 +44,16 @@ } .editor-post-preview__button-external { - padding-left: $button-size-small + $grid-unit-10 + $grid-unit-10; + padding-left: 8px; margin-right: auto; width: 100%; display: flex; - justify-content: space-between; + justify-content: flex-start; + + svg { + margin-right: 8px; + height: 20px; + } } @include break-small() { From e252cfbb6cb541b3e2d1fb6ff0ca8c95cda6ee7c Mon Sep 17 00:00:00 2001 From: Shaun Andrews Date: Mon, 9 Mar 2020 13:30:57 -0400 Subject: [PATCH 4/6] Removed the "View" group label, put the external icon first, and updated the external label. --- packages/edit-post/src/components/preview-options/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/edit-post/src/components/preview-options/index.js b/packages/edit-post/src/components/preview-options/index.js index aa71e5b3f3b24..a92bbbdad2b5f 100644 --- a/packages/edit-post/src/components/preview-options/index.js +++ b/packages/edit-post/src/components/preview-options/index.js @@ -17,7 +17,7 @@ import { } from '@wordpress/components'; import { useSelect, useDispatch } from '@wordpress/data'; import { PostPreviewButton } from '@wordpress/editor'; -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { external, check } from '@wordpress/icons'; const downArrow = ( @@ -72,7 +72,7 @@ export default function PreviewOptions( { ) } renderContent={ () => ( <> - + setPreviewDeviceType( 'Desktop' ) } @@ -106,8 +106,8 @@ export default function PreviewOptions( { forcePreviewLink={ forcePreviewLink } textContent={ <> - { __( 'Preview externally' ) } + { __( 'Preview in new tab' ) } } /> From 18643a39837703fa1ab376adf5e093512d256a4d Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 13 Mar 2020 14:29:59 +0100 Subject: [PATCH 5/6] Massage the pixels, update icon. --- packages/edit-post/src/components/header/style.scss | 5 ----- .../src/components/preview-options/style.scss | 13 +++++++------ packages/icons/src/library/external.js | 4 ++-- 3 files changed, 9 insertions(+), 13 deletions(-) diff --git a/packages/edit-post/src/components/header/style.scss b/packages/edit-post/src/components/header/style.scss index 6c29e15a91d62..7d1a6a757ce24 100644 --- a/packages/edit-post/src/components/header/style.scss +++ b/packages/edit-post/src/components/header/style.scss @@ -29,11 +29,6 @@ order: initial; } } - - // Adjust icon sizes for dropdowns - .components-dropdown svg { - height: 16px; - } } .edit-post-header__toolbar { diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss index 743ceabd27abd..d56693cfa1ada 100644 --- a/packages/edit-post/src/components/preview-options/style.scss +++ b/packages/edit-post/src/components/preview-options/style.scss @@ -1,19 +1,21 @@ .editor-post-preview__dropdown { display: none; margin-right: $grid-unit-15; - //box-shadow: inset 0 0 0 $border-width $light-gray-secondary; - //border-radius: $radius-block-ui; padding: 0; } .editor-post-preview__button-toggle { display: flex; justify-content: space-between; - padding: 0 $grid-unit-15; + padding: 0 $grid-unit-10 0 $grid-unit-15; &:focus:not(:disabled) { box-shadow: inset 0 0 0 1px $white, 0 0 0 2px color($theme-color); } + + svg { + margin-left: $grid-unit-05; + } } .editor-post-preview__button-resize.editor-post-preview__button-resize { @@ -44,15 +46,14 @@ } .editor-post-preview__button-external { - padding-left: 8px; + padding-left: $grid-unit-10; margin-right: auto; width: 100%; display: flex; justify-content: flex-start; svg { - margin-right: 8px; - height: 20px; + margin-right: $grid-unit-10; } } diff --git a/packages/icons/src/library/external.js b/packages/icons/src/library/external.js index e985a74059096..15168b6cb501d 100644 --- a/packages/icons/src/library/external.js +++ b/packages/icons/src/library/external.js @@ -4,8 +4,8 @@ import { Path, SVG } from '@wordpress/primitives'; const external = ( - - + + ); From a54e4528ce088902ac500730965e09d5588b3212 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 13 Mar 2020 14:31:55 +0100 Subject: [PATCH 6/6] Update snapshots. --- .../src/embed/test/__snapshots__/index.js.snap | 4 ++-- storybook/test/__snapshots__/index.js.snap | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/embed/test/__snapshots__/index.js.snap b/packages/block-library/src/embed/test/__snapshots__/index.js.snap index a3aa6b0bb28b6..868988322a2b0 100644 --- a/packages/block-library/src/embed/test/__snapshots__/index.js.snap +++ b/packages/block-library/src/embed/test/__snapshots__/index.js.snap @@ -79,12 +79,12 @@ exports[`core/embed block edit matches snapshot 1`] = ` focusable="false" height="24" role="img" - viewBox="-2 -2 24 24" + viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" > diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap index 3b3c6df1088ca..8450f69527658 100644 --- a/storybook/test/__snapshots__/index.js.snap +++ b/storybook/test/__snapshots__/index.js.snap @@ -3036,12 +3036,12 @@ exports[`Storyshots Components/ExternalLink Default 1`] = ` focusable="false" height={24} role="img" - viewBox="-2 -2 24 24" + viewBox="0 0 24 24" width={24} xmlns="http://www.w3.org/2000/svg" > @@ -11021,12 +11021,12 @@ exports[`Storyshots Icons/Icon Library 1`] = ` focusable="false" height={24} role="img" - viewBox="-2 -2 24 24" + viewBox="0 0 24 24" width={24} xmlns="http://www.w3.org/2000/svg" >