diff --git a/packages/editor/src/components/preview-dropdown/index.js b/packages/editor/src/components/preview-dropdown/index.js index c36ef257b13aaa..6554f7c0228a77 100644 --- a/packages/editor/src/components/preview-dropdown/index.js +++ b/packages/editor/src/components/preview-dropdown/index.js @@ -16,7 +16,7 @@ import { Icon, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { mobile, tablet, external, chevronDownSmall } from '@wordpress/icons'; +import { desktop, mobile, tablet, external } from '@wordpress/icons'; import { useSelect, useDispatch } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; import { useEffect, useRef } from '@wordpress/element'; @@ -95,6 +95,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { }; const deviceIcons = { + desktop, mobile, tablet, }; @@ -107,13 +108,13 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { const choices = [ { value: 'Desktop', - label: __( 'Zoom to 100%' ), - icon: <>{ __( '100%' ) }, + label: __( 'Desktop' ), + icon: desktop, }, { value: 'ZoomOut', - label: __( 'Zoom to 50%' ), - icon: <>{ __( '50%' ) }, + label: __( 'Desktop (50%)' ), + icon: desktop, }, { value: 'Tablet', @@ -147,18 +148,6 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) { __unstableSetEditorMode( newEditorMode ); }; - const getText = () => { - if ( editorMode === 'zoom-out' ) { - return __( '50%' ); - } - - if ( deviceType === 'Desktop' ) { - return __( '100%' ); - } - - return ; - }; - return ( diff --git a/packages/editor/src/components/preview-dropdown/style.scss b/packages/editor/src/components/preview-dropdown/style.scss index f96a6a0836344b..c117a4239e9dfb 100644 --- a/packages/editor/src/components/preview-dropdown/style.scss +++ b/packages/editor/src/components/preview-dropdown/style.scss @@ -1,14 +1,6 @@ .editor-preview-dropdown .editor-preview-dropdown__toggle.has-icon.has-text { - padding-right: $grid-unit-05 * 0.5; - gap: 0; -} - -.editor-preview-dropdown--mobile, -.editor-preview-dropdown--tablet { - .editor-preview-dropdown__toggle.has-icon.has-text { - gap: 0; - padding-left: $grid-unit-05; - } + padding-right: 4px; + padding-left: 6px; } .editor-preview-dropdown__button-external {