diff --git a/packages/edit-site/package.json b/packages/edit-site/package.json index 26bd51227b58d3..ff137e45207cc0 100644 --- a/packages/edit-site/package.json +++ b/packages/edit-site/package.json @@ -35,6 +35,7 @@ "@wordpress/icons": "file:../icons", "@wordpress/media-utils": "file:../media-utils", "@wordpress/notices": "file:../notices", + "@wordpress/primitives": "^1.1.0", "@wordpress/url": "file:../url", "file-saver": "^2.0.2", "jszip": "^3.2.2", diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/index.js b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js new file mode 100644 index 00000000000000..e5a14f30af66b0 --- /dev/null +++ b/packages/edit-site/src/components/header/fullscreen-mode-close/index.js @@ -0,0 +1,35 @@ +/** + * WordPress dependencies + */ +import { useSelect } from '@wordpress/data'; +import { Button } from '@wordpress/components'; +import { Path, SVG } from '@wordpress/primitives'; +import { __ } from '@wordpress/i18n'; + +const wordPressLogo = ( + +); + +function FullscreenModeClose() { + const isActive = useSelect( ( select ) => { + return select( 'core/edit-site' ).isFeatureActive( 'fullscreenMode' ); + }, [] ); + + if ( ! isActive ) { + return null; + } + + return ( + + ); +} + +export default FullscreenModeClose; diff --git a/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss new file mode 100644 index 00000000000000..a8ae5d8e446266 --- /dev/null +++ b/packages/edit-site/src/components/header/fullscreen-mode-close/style.scss @@ -0,0 +1,29 @@ +.edit-site-fullscreen-mode-close.has-icon { + // Do not show the toolbar icon on small screens, + // when Fullscreen Mode is not an option in the "More" menu. + display: none; + + @include break-medium() { + display: flex; + align-items: center; + align-self: stretch; + border: none; + background: #23282e; // WP-admin gray. + color: $white; + border-radius: 0; + height: auto; + width: $header-height; + + &:hover { + background: #32373d; // WP-admin light-gray. + } + + &:active { + color: $white; + } + + &:focus { + box-shadow: inset 0 0 0 2px color($theme-color), inset 0 0 0 3px $white; + } + } +} diff --git a/packages/edit-site/src/components/header/index.js b/packages/edit-site/src/components/header/index.js index 78c7090d732015..67138e0ff49b2d 100644 --- a/packages/edit-site/src/components/header/index.js +++ b/packages/edit-site/src/components/header/index.js @@ -8,6 +8,7 @@ import { BlockNavigationDropdown, ToolSelector } from '@wordpress/block-editor'; * Internal dependencies */ import { useEditorContext } from '../editor'; +import FullscreenModeClose from './fullscreen-mode-close'; import TemplateSwitcher from '../template-switcher'; import SaveButton from '../save-button'; @@ -43,6 +44,7 @@ export default function Header() { return (