diff --git a/docs/designers-developers/developers/data/data-core-block-editor.md b/docs/designers-developers/developers/data/data-core-block-editor.md index 588b1f27e3249..919763be48cfb 100644 --- a/docs/designers-developers/developers/data/data-core-block-editor.md +++ b/docs/designers-developers/developers/data/data-core-block-editor.md @@ -500,6 +500,18 @@ _Returns_ - `?string`: Adjacent block's client ID, or null if none exists. +# **getPreviewDeviceType** + +Returns the current editing canvas device type. + +_Parameters_ + +- _state_ `Object`: Global application state. + +_Returns_ + +- `string`: Device type. + # **getPreviousBlockClientId** Returns the previous block's client ID from the given reference start ID. @@ -1214,6 +1226,18 @@ _Parameters_ - _isNavigationMode_ `string`: Enable/Disable navigation mode. +# **setPreviewDeviceType** + +Returns an action object used to toggle the width of the editing canvas + +_Parameters_ + +- _deviceType_ `string`: + +_Returns_ + +- `Object`: Action object. + # **setTemplateValidity** Returns an action object resetting the template validity. diff --git a/package-lock.json b/package-lock.json index a9142e287a6aa..0c85a8eaf97b6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10086,6 +10086,7 @@ "@wordpress/viewport": "file:packages/viewport", "@wordpress/wordcount": "file:packages/wordcount", "classnames": "^2.2.5", + "css-mediaquery": "^0.1.2", "diff": "^3.5.0", "dom-scroll-into-view": "^1.2.1", "inherits": "^2.0.3", @@ -15850,6 +15851,11 @@ } } }, + "css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha1-aiw3NEkoYYYxxUvTPO3TAdoYvqA=" + }, "css-select": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz", diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index cc1ee80f19420..edce498b3c0be 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -482,6 +482,15 @@ _Related_ Undocumented declaration. +# **useSimulatedMediaQuery** + +Function that manipulates media queries from stylesheets to simulate a given viewport width. + +_Parameters_ + +- _marker_ `string`: CSS selector string defining start and end of manipulable styles. +- _width_ `number`: Viewport width to simulate. + # **Warning** Undocumented declaration. diff --git a/packages/block-editor/package.json b/packages/block-editor/package.json index e7780f68a3e25..0283996509633 100644 --- a/packages/block-editor/package.json +++ b/packages/block-editor/package.json @@ -45,6 +45,7 @@ "@wordpress/viewport": "file:../viewport", "@wordpress/wordcount": "file:../wordcount", "classnames": "^2.2.5", + "css-mediaquery": "^0.1.2", "diff": "^3.5.0", "dom-scroll-into-view": "^1.2.1", "inherits": "^2.0.3", diff --git a/packages/block-editor/src/components/editor-skeleton/style.scss b/packages/block-editor/src/components/editor-skeleton/style.scss index 24c7d41d3370d..b269269b05199 100644 --- a/packages/block-editor/src/components/editor-skeleton/style.scss +++ b/packages/block-editor/src/components/editor-skeleton/style.scss @@ -59,6 +59,7 @@ html { .block-editor-editor-skeleton__content { flex-grow: 1; + background-color: $light-gray-700; // Treat as flex container to allow children to grow to occupy full // available height of the content area. @@ -68,9 +69,9 @@ html { // On Mobile the header is fixed to keep HTML as scrollable. // Beyond the medium breakpoint, we allow the sidebar. // The sidebar should scroll independently, so enable scroll here also. - @include break-medium() { - overflow: auto; - } + + overflow: auto; + } .block-editor-editor-skeleton__sidebar { diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 44ed21295f616..d4e1eccfc4126 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -92,3 +92,4 @@ export { default as WritingFlow } from './writing-flow'; */ export { default as BlockEditorProvider } from './provider'; +export { default as useSimulatedMediaQuery } from './simulate-media-query'; diff --git a/packages/block-editor/src/components/inserter/style.scss b/packages/block-editor/src/components/inserter/style.scss index 92ae8f762e5a7..86469e990838d 100644 --- a/packages/block-editor/src/components/inserter/style.scss +++ b/packages/block-editor/src/components/inserter/style.scss @@ -32,10 +32,11 @@ $block-inserter-search-height: 38px; height: 100%; display: flex; width: auto; + min-width: 400px; + position: relative; @include break-medium { width: 400px; - position: relative; &.has-help-panel { width: 700px; diff --git a/packages/block-editor/src/components/simulate-media-query/index.js b/packages/block-editor/src/components/simulate-media-query/index.js new file mode 100644 index 0000000000000..02fb9abb0903c --- /dev/null +++ b/packages/block-editor/src/components/simulate-media-query/index.js @@ -0,0 +1,128 @@ +/** + * External dependencies + */ +import { filter, get } from 'lodash'; +import { match } from 'css-mediaquery'; + +/** + * WordPress dependencies + */ +import { useEffect } from '@wordpress/element'; + +const ENABLED_MEDIA_QUERY = '(min-width:0px)'; +const DISABLED_MEDIA_QUERY = '(min-width:999999px)'; + +const VALID_MEDIA_QUERY_REGEX = /\((min|max)-width:[^\(]*?\)/g; + +function getStyleSheetsThatMatchHostname() { + if ( ! window ) { + return; + } + return filter( + get( window, [ 'document', 'styleSheets' ], [] ), + ( styleSheet ) => { + return ( + styleSheet.href && + styleSheet.href.includes( window.location.hostname ) + ); + } + ); +} + +function isReplaceableMediaRule( rule ) { + if ( ! rule.media ) { + return false; + } + // Need to use "media.mediaText" instead of "conditionText" for IE support. + return !! rule.media.mediaText.match( VALID_MEDIA_QUERY_REGEX ); +} + +function replaceRule( styleSheet, newRuleText, index ) { + styleSheet.deleteRule( index ); + styleSheet.insertRule( newRuleText, index ); +} + +function replaceMediaQueryWithWidthEvaluation( ruleText, widthValue ) { + return ruleText.replace( VALID_MEDIA_QUERY_REGEX, ( matchedSubstring ) => { + if ( + match( matchedSubstring, { + type: 'screen', + width: widthValue, + } ) + ) { + return ENABLED_MEDIA_QUERY; + } + return DISABLED_MEDIA_QUERY; + } ); +} + +/** + * Function that manipulates media queries from stylesheets to simulate a given viewport width. + * + * @param {string} marker CSS selector string defining start and end of manipulable styles. + * @param {number} width Viewport width to simulate. + */ +export default function useSimulatedMediaQuery( marker, width ) { + useEffect( () => { + const styleSheets = getStyleSheetsThatMatchHostname(); + const originalStyles = []; + styleSheets.forEach( ( styleSheet, styleSheetIndex ) => { + let relevantSection = false; + for ( + let ruleIndex = 0; + ruleIndex < styleSheet.cssRules.length; + ++ruleIndex + ) { + const rule = styleSheet.cssRules[ ruleIndex ]; + if ( + ! relevantSection && + !! rule.cssText.match( new RegExp( `#start-${ marker }` ) ) + ) { + relevantSection = true; + } + + if ( + relevantSection && + !! rule.cssText.match( new RegExp( `#end-${ marker }` ) ) + ) { + relevantSection = false; + } + + if ( ! relevantSection || ! isReplaceableMediaRule( rule ) ) { + continue; + } + const ruleText = rule.cssText; + if ( ! originalStyles[ styleSheetIndex ] ) { + originalStyles[ styleSheetIndex ] = []; + } + originalStyles[ styleSheetIndex ][ ruleIndex ] = ruleText; + replaceRule( + styleSheet, + replaceMediaQueryWithWidthEvaluation( ruleText, width ), + ruleIndex + ); + } + } ); + return () => { + originalStyles.forEach( ( rulesCollection, styleSheetIndex ) => { + if ( ! rulesCollection ) { + return; + } + for ( + let ruleIndex = 0; + ruleIndex < rulesCollection.length; + ++ruleIndex + ) { + const originalRuleText = rulesCollection[ ruleIndex ]; + if ( originalRuleText ) { + replaceRule( + styleSheets[ styleSheetIndex ], + originalRuleText, + ruleIndex + ); + } + } + } ); + }; + }, [ width ] ); +} diff --git a/packages/block-editor/src/store/actions.js b/packages/block-editor/src/store/actions.js index a9162f4b6d772..ad5d096c25e1d 100644 --- a/packages/block-editor/src/store/actions.js +++ b/packages/block-editor/src/store/actions.js @@ -799,6 +799,20 @@ export function updateSettings( settings ) { }; } +/** + * Returns an action object used to toggle the width of the editing canvas + * + * @param {string} deviceType + * + * @return {Object} Action object. + */ +export function setPreviewDeviceType( deviceType ) { + return { + type: 'SET_PREVIEW_DEVICE_TYPE', + deviceType, + }; +} + /** * Returns an action object used in signalling that a temporary reusable blocks have been saved * in order to switch its temporary id with the real id. diff --git a/packages/block-editor/src/store/reducer.js b/packages/block-editor/src/store/reducer.js index 45a5dc63cea04..bb336ac4bbebb 100644 --- a/packages/block-editor/src/store/reducer.js +++ b/packages/block-editor/src/store/reducer.js @@ -23,7 +23,6 @@ import { */ import { combineReducers } from '@wordpress/data'; import { isReusableBlock } from '@wordpress/blocks'; - /** * Internal dependencies */ @@ -1449,6 +1448,23 @@ export function automaticChangeStatus( state, action ) { // Reset the state by default (for any action not handled). } +/** + * Reducer returning the editing canvas device type. + * + * @param {Object} state Current state. + * @param {Object} action Dispatched action. + * + * @return {Object} Updated state. + */ +export function deviceType( state = 'Desktop', action ) { + switch ( action.type ) { + case 'SET_PREVIEW_DEVICE_TYPE': + return action.deviceType; + } + + return state; +} + export default combineReducers( { blocks, isTyping, @@ -1468,4 +1484,5 @@ export default combineReducers( { lastBlockAttributesChange, isNavigationMode, automaticChangeStatus, + deviceType, } ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 52be22ab843fe..645a402fea277 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/packages/block-editor/src/store/selectors.js @@ -1621,3 +1621,14 @@ export function isNavigationMode( state ) { export function didAutomaticChange( state ) { return !! state.automaticChangeStatus; } + +/** + * Returns the current editing canvas device type. + * + * @param {Object} state Global application state. + * + * @return {string} Device type. + */ +export function getPreviewDeviceType( state ) { + return state.deviceType; +} diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index 896add8aff8a0..6a52063b672e0 100644 --- a/packages/block-editor/src/style.scss +++ b/packages/block-editor/src/style.scss @@ -1,3 +1,10 @@ +// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. +#start-resizable-editor-section { + display: none; +} + +// Only add styles for components that are used inside the editing canvas here: + @import "./components/block-icon/style.scss"; @import "./components/block-inspector/style.scss"; @import "./components/block-list/style.scss"; @@ -19,11 +26,9 @@ @import "./components/colors-gradients/style.scss"; @import "./components/contrast-checker/style.scss"; @import "./components/default-block-appender/style.scss"; -@import "./components/editor-skeleton/style.scss"; @import "./components/link-control/style.scss"; @import "./components/image-size-control/style.scss"; @import "./components/inner-blocks/style.scss"; -@import "./components/inserter/style.scss"; @import "./components/inserter-list-item/style.scss"; @import "./components/media-replace-flow/style.scss"; @import "./components/media-placeholder/style.scss"; @@ -39,3 +44,13 @@ @import "./components/warning/style.scss"; @import "./components/writing-flow/style.scss"; @import "./hooks/anchor.scss"; + +// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. +#end-resizable-editor-section { + display: none; +} + +// Styles for components that are used outside of the editing canvas go here: + +@import "./components/editor-skeleton/style.scss"; +@import "./components/inserter/style.scss"; diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 995297a269f86..012918eef5483 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -1,3 +1,8 @@ +// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. +#start-resizable-editor-section { + display: none; +} + @import "./archives/editor.scss"; @import "./audio/editor.scss"; @import "./block/editor.scss"; @@ -57,3 +62,8 @@ margin-top: $default-block-margin; margin-bottom: $default-block-margin; } + +// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. +#end-resizable-editor-section { + display: none; +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 6a0547c9e2de9..bd8ab8a093bb5 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -1,3 +1,8 @@ +// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. +#start-resizable-editor-section { + display: none; +} + @import "./audio/style.scss"; @import "./button/style.scss"; @import "./buttons/style.scss"; @@ -247,3 +252,8 @@ /*rtl:ignore*/ text-align: right; } + +// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. +#end-resizable-editor-section { + display: none; +} diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss index 9aedbc019a62b..88adf3fe3be9b 100644 --- a/packages/block-library/src/theme.scss +++ b/packages/block-library/src/theme.scss @@ -1,3 +1,8 @@ +// This tag marks the start of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. +#start-resizable-editor-section { + display: none; +} + @import "./audio/theme.scss"; @import "./code/theme.scss"; @import "./embed/theme.scss"; @@ -11,3 +16,8 @@ @import "./separator/theme.scss"; @import "./table/theme.scss"; @import "./video/theme.scss"; + +// This tag marks the end of the styles that apply to editing canvas contents and need to be manipulated when we resize the editor. +#end-resizable-editor-section { + display: none; +} diff --git a/packages/e2e-tests/specs/editor/various/preview.test.js b/packages/e2e-tests/specs/editor/various/preview.test.js index 324be3f9f2efb..3a495a1189dfd 100644 --- a/packages/e2e-tests/specs/editor/various/preview.test.js +++ b/packages/e2e-tests/specs/editor/various/preview.test.js @@ -22,7 +22,9 @@ import { async function openPreviewPage( editorPage ) { let openTabs = await browser.pages(); const expectedTabsCount = openTabs.length + 1; - await editorPage.click( '.editor-post-preview' ); + await editorPage.click( '.editor-post-preview__button-toggle' ); + await editorPage.waitFor( '.editor-post-preview__button-external' ); + await editorPage.click( '.editor-post-preview__button-external' ); // Wait for the new tab to open. while ( openTabs.length < expectedTabsCount ) { @@ -47,7 +49,7 @@ async function openPreviewPage( editorPage ) { * @return {Promise} Promise resolving once navigation completes. */ async function waitForPreviewNavigation( previewPage ) { - await page.click( '.editor-post-preview' ); + await page.click( '.editor-post-preview__button-external' ); return previewPage.waitForNavigation(); } @@ -98,7 +100,7 @@ describe( 'Preview', () => { // Disabled until content present. const isPreviewDisabled = await editorPage.$$eval( - '.editor-post-preview:not( :disabled ):not( [aria-disabled="true"] )', + '.editor-post-preview__button-toggle:not( :disabled ):not( [aria-disabled="true"] )', ( enabledButtons ) => ! enabledButtons.length ); expect( isPreviewDisabled ).toBe( true ); diff --git a/packages/edit-post/src/components/header/index.js b/packages/edit-post/src/components/header/index.js index a18f5a207c114..bddd1014dac64 100644 --- a/packages/edit-post/src/components/header/index.js +++ b/packages/edit-post/src/components/header/index.js @@ -15,6 +15,7 @@ import HeaderToolbar from './header-toolbar'; import MoreMenu from './more-menu'; import PinnedPlugins from './pinned-plugins'; import PostPublishButtonOrToggle from './post-publish-button-or-toggle'; +import PreviewOptions from '../preview-options'; function Header() { const { @@ -69,6 +70,10 @@ function Header() { forceIsSaving={ isSaving } /> ) } + + + +); + +export default function PreviewOptions( { + forceIsAutosaveable, + forcePreviewLink, +} ) { + const { setPreviewDeviceType } = useDispatch( 'core/block-editor' ); + + const deviceType = useSelect( ( select ) => { + return select( 'core/block-editor' ).getPreviewDeviceType(); + }, [] ); + + const translateDropdownButtonText = () => { + switch ( deviceType ) { + case 'Tablet': + return __( 'Tablet' ); + case 'Mobile': + return __( 'Mobile' ); + default: + return __( 'Desktop' ); + } + }; + + const isSaveable = useSelect( ( select ) => { + return select( 'core/editor' ).isEditedPostSaveable(); + }, [] ); + + return ( + ( + + ) } + renderContent={ () => ( + <> + + setPreviewDeviceType( 'Desktop' ) } + icon={ deviceType === 'Desktop' && 'yes' } + > + { __( 'Desktop' ) } + + setPreviewDeviceType( 'Tablet' ) } + icon={ deviceType === 'Tablet' && 'yes' } + > + { __( 'Tablet' ) } + + setPreviewDeviceType( 'Mobile' ) } + icon={ deviceType === 'Mobile' && 'yes' } + > + { __( 'Mobile' ) } + + + +
+ + +
+ + + ) } + /> + ); +} diff --git a/packages/edit-post/src/components/preview-options/style.scss b/packages/edit-post/src/components/preview-options/style.scss new file mode 100644 index 0000000000000..bb18674f227c0 --- /dev/null +++ b/packages/edit-post/src/components/preview-options/style.scss @@ -0,0 +1,85 @@ +.editor-post-preview__dropdown { + display: none; + margin-right: $grid-size; + border: 1px solid $light-gray-600; +} + +.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle.editor-post-preview__button-toggle { + border-radius: 0; + display: flex; + justify-content: space-between; + height: $block-controls-height - 2; // Needs to be 2px smaller to account for the box-shadow. + + &:hover, + &:focus { + box-shadow: 0 0 0 1px $dark-gray-500, 0 0 0 2px $white; + } + +} + +.editor-post-preview__button-resize.editor-post-preview__button-resize { + padding-left: 36px; + + &.has-icon { + padding-left: $grid-size; + } +} + +.editor-post-preview__button-separator { + border-left: 1px solid $light-gray-600; + height: $icon-button-size; + padding: $grid-size 0 $grid-size $grid-size; + margin-left: $grid-size; +} + +.editor-post-preview__dropdown-content { + .components-popover__content { + overflow-y: visible; + } + .components-menu-group__label { + padding-left: 15px; + } + .components-menu-group + .components-menu-group { + border-top: 1px solid $light-gray-500; + padding: 0; + } +} + +.editor-post-preview__grouping-external { + position: relative; +} + +.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external.editor-post-preview__button-external { + padding: $grid-size-large - 1; + height: auto; + display: block; + + &:focus { + color: $dark-gray-900; + border: none; + box-shadow: none; + outline-offset: -2px; + outline: 1px dotted $dark-gray-500; + } + &:hover { + color: $dark-gray-900; + border: none; + box-shadow: none; + background: $light-gray-200; + } +} + +.editor-post-preview__icon-external { + position: absolute; + right: $grid-size-large - 1; + top: $grid-size-large - 2; +} + +@include break-small() { + .editor-post-preview { + display: none; + } + .editor-post-preview__dropdown { + display: flex; + } +} diff --git a/packages/edit-post/src/components/resize-canvas/index.js b/packages/edit-post/src/components/resize-canvas/index.js new file mode 100644 index 0000000000000..b865c0fa108f0 --- /dev/null +++ b/packages/edit-post/src/components/resize-canvas/index.js @@ -0,0 +1,70 @@ +/** + * WordPress dependencies + */ +import { useSimulatedMediaQuery } from '@wordpress/block-editor'; +import { useSelect } from '@wordpress/data'; +import { useEffect, useState } from '@wordpress/element'; + +/** + * Function to resize the editor window. + * + * @return {Object} Inline styles to be added to resizable container. + */ +export function useResizeCanvas() { + const deviceType = useSelect( ( select ) => { + return select( 'core/block-editor' ).getPreviewDeviceType(); + }, [] ); + + const [ actualWidth, updateActualWidth ] = useState( window.innerWidth ); + + useEffect( () => { + const resizeListener = () => updateActualWidth( window.innerWidth ); + window.addEventListener( 'resize', resizeListener ); + + return () => { + window.removeEventListener( 'resize', resizeListener ); + }; + } ); + + const getCanvasWidth = ( device ) => { + let deviceWidth = 0; + + switch ( device ) { + case 'Tablet': + deviceWidth = 780; + break; + case 'Mobile': + deviceWidth = 360; + break; + default: + deviceWidth = 2000; + } + + return deviceWidth < actualWidth ? deviceWidth : actualWidth; + }; + + const marginValue = () => ( window.innerHeight < 800 ? 36 : 72 ); + + const contentInlineStyles = ( device ) => { + switch ( device ) { + case 'Tablet': + case 'Mobile': + return { + width: getCanvasWidth( device ), + margin: marginValue() + 'px auto', + flexGrow: 0, + maxHeight: device === 'Mobile' ? '768px' : '1024px', + overflowY: 'auto', + }; + default: + return null; + } + }; + + useSimulatedMediaQuery( + 'resizable-editor-section', + getCanvasWidth( deviceType ) + ); + + return contentInlineStyles( deviceType ); +} diff --git a/packages/edit-post/src/components/text-editor/style.scss b/packages/edit-post/src/components/text-editor/style.scss index c07d5f63890c4..5bf479cf97762 100644 --- a/packages/edit-post/src/components/text-editor/style.scss +++ b/packages/edit-post/src/components/text-editor/style.scss @@ -1,6 +1,8 @@ .edit-post-text-editor { position: relative; width: 100%; + background-color: $white; + flex-grow: 1; // Always show outlines in code editor .editor-post-title__block { diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 94ae067d7296e..89abc5b026f17 100644 --- a/packages/edit-post/src/components/visual-editor/index.js +++ b/packages/edit-post/src/components/visual-editor/index.js @@ -23,10 +23,16 @@ import { Popover } from '@wordpress/components'; */ import BlockInspectorButton from './block-inspector-button'; import PluginBlockSettingsMenuGroup from '../block-settings-menu/plugin-block-settings-menu-group'; +import { useResizeCanvas } from '../resize-canvas'; function VisualEditor() { + const inlineStyles = useResizeCanvas(); + return ( - + diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 7dd1f86dab879..0becd2e48cec6 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -1,6 +1,8 @@ .edit-post-visual-editor { position: relative; padding-top: 50px; + // Default background color so that grey .edit-post-editor-regions__content color doesn't show through. + background-color: $white; & .components-button { font-family: $default-font; diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss index babb793d4ac51..d51842e02a78b 100644 --- a/packages/edit-post/src/style.scss +++ b/packages/edit-post/src/style.scss @@ -10,6 +10,7 @@ $footer-height: $icon-button-size-small; @import "./components/layout/style.scss"; @import "./components/manage-blocks-modal/style.scss"; @import "./components/meta-boxes/meta-boxes-area/style.scss"; +@import "./components/preview-options/style.scss"; @import "./components/sidebar/style.scss"; @import "./components/sidebar/last-revision/style.scss"; @import "./components/sidebar/post-author/style.scss"; diff --git a/packages/editor/src/components/post-preview-button/index.js b/packages/editor/src/components/post-preview-button/index.js index 620bb9aaf0180..ab04c3c5fa5bb 100644 --- a/packages/editor/src/components/post-preview-button/index.js +++ b/packages/editor/src/components/post-preview-button/index.js @@ -2,6 +2,7 @@ * External dependencies */ import { get } from 'lodash'; +import classnames from 'classnames'; /** * WordPress dependencies @@ -182,16 +183,25 @@ export class PostPreviewButton extends Component { // just link to the post's URL. const href = previewLink || currentPostLink; + const classNames = classnames( + { + 'editor-post-preview': ! this.props.className, + }, + this.props.className + ); + return (