Skip to content

Commit caf52c1

Browse files
aduthaduth
authored
Revert "Fullscreen Mode: Change the "Back" button to toggle the sidebar (#21121)" (#21929)
This reverts commit ac7731d.
1 parent 147ad19 commit caf52c1

File tree

16 files changed

+154
-231
lines changed

16 files changed

+154
-231
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/e2e-tests/specs/editor/various/fullscreen-mode.test.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,11 @@ describe( 'Fullscreen Mode', () => {
2121
} );
2222

2323
expect( isFullscreenEnabled ).toBe( true );
24+
25+
const fullscreenCloseButton = await page.$(
26+
'.edit-post-fullscreen-mode-close'
27+
);
28+
29+
expect( fullscreenCloseButton ).not.toBeNull();
2430
} );
2531
} );

‎packages/edit-post/src/components/header/fullscreen-mode-close/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import { get } from 'lodash';
5+
6+
/**
7+
* WordPress dependencies
8+
*/
9+
import { useSelect } from '@wordpress/data';
10+
import { Button } from '@wordpress/components';
11+
import { __ } from '@wordpress/i18n';
12+
import { addQueryArgs } from '@wordpress/url';
13+
import { wordpress } from '@wordpress/icons';
14+
15+
function FullscreenModeClose() {
16+
const { isActive, postType } = useSelect( ( select ) => {
17+
const { getCurrentPostType } = select( 'core/editor' );
18+
const { isFeatureActive } = select( 'core/edit-post' );
19+
const { getPostType } = select( 'core' );
20+
21+
return {
22+
isActive: isFeatureActive( 'fullscreenMode' ),
23+
postType: getPostType( getCurrentPostType() ),
24+
};
25+
}, [] );
26+
27+
if ( ! isActive || ! postType ) {
28+
return null;
29+
}
30+
31+
return (
32+
<Button
33+
className="edit-post-fullscreen-mode-close"
34+
icon={ wordpress }
35+
iconSize={ 36 }
36+
href={ addQueryArgs( 'edit.php', {
37+
post_type: postType.slug,
38+
} ) }
39+
label={ get( postType, [ 'labels', 'view_items' ], __( 'Back' ) ) }
40+
/>
41+
);
42+
}
43+
44+
export default FullscreenModeClose;

‎packages/edit-post/src/components/header/fullscreen-mode-close/style.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.edit-post-fullscreen-mode-close.has-icon {
2+
// Do not show the toolbar icon on small screens,
3+
// when Fullscreen Mode is not an option in the "More" menu.
4+
display: none;
5+
6+
@include break-medium() {
7+
display: flex;
8+
align-items: center;
9+
align-self: stretch;
10+
border: none;
11+
background: #23282e; // WP-admin gray.
12+
color: $white;
13+
border-radius: 0;
14+
height: auto;
15+
width: $header-height;
16+
17+
&:hover {
18+
background: #32373d; // WP-admin light-gray.
19+
}
20+
21+
&:active {
22+
color: $white;
23+
}
24+
25+
&:focus {
26+
box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 ($border-width-focus + 1px) $white;
27+
}
28+
}
29+
}

‎packages/edit-post/src/components/header/index.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import { Button } from '@wordpress/components';
66
import { PostSavedState, PostPreviewButton } from '@wordpress/editor';
77
import { useSelect, useDispatch } from '@wordpress/data';
88
import { cog } from '@wordpress/icons';
9-
import { PinnedItems, AdminMenuToggle } from '@wordpress/interface';
9+
import { PinnedItems } from '@wordpress/interface';
1010

1111
/**
1212
* Internal dependencies
1313
*/
14+
import FullscreenModeClose from './fullscreen-mode-close';
1415
import HeaderToolbar from './header-toolbar';
1516
import MoreMenu from './more-menu';
1617
import PostPublishButtonOrToggle from './post-publish-button-or-toggle';
@@ -24,7 +25,6 @@ function Header( { onToggleInserter, isInserterOpen } ) {
2425
isPublishSidebarOpened,
2526
isSaving,
2627
getBlockSelectionStart,
27-
isFullscreenActive,
2828
} = useSelect(
2929
( select ) => ( {
3030
shortcut: select(
@@ -41,9 +41,6 @@ function Header( { onToggleInserter, isInserterOpen } ) {
4141
getBlockSelectionStart: select( 'core/block-editor' )
4242
.getBlockSelectionStart,
4343
isPostSaveable: select( 'core/editor' ).isEditedPostSaveable(),
44-
isFullscreenActive: select( 'core/edit-post' ).isFeatureActive(
45-
'fullscreenMode'
46-
),
4744
deviceType: select(
4845
'core/edit-post'
4946
).__experimentalGetPreviewDeviceType(),
@@ -65,7 +62,7 @@ function Header( { onToggleInserter, isInserterOpen } ) {
6562

6663
return (
6764
<div className="edit-post-header">
68-
{ isFullscreenActive && <AdminMenuToggle /> }
65+
<FullscreenModeClose />
6966
<div className="edit-post-header__toolbar">
7067
<HeaderToolbar
7168
onToggleInserter={ onToggleInserter }

‎packages/edit-post/src/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ $footer-height: $button-size-small;
33
@import "../../interface/src/style.scss";
44

55
@import "./components/header/style.scss";
6+
@import "./components/header/fullscreen-mode-close/style.scss";
67
@import "./components/header/header-toolbar/style.scss";
78
@import "./components/header/more-menu/style.scss";
89
@import "./components/keyboard-shortcut-help-modal/style.scss";

‎packages/edit-site/src/components/header/fullscreen-mode-close/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* WordPress dependencies
3+
*/
4+
import { useSelect } from '@wordpress/data';
5+
import { Button } from '@wordpress/components';
6+
import { Path, SVG } from '@wordpress/primitives';
7+
import { __ } from '@wordpress/i18n';
8+
9+
const wordPressLogo = (
10+
<SVG width="28" height="28" viewBox="0 0 128 128" version="1.1">
11+
<Path d="M100 61.3c0-6.6-2.4-11.2-4.4-14.7-2.7-4.4-5.2-8.1-5.2-12.5 0-4.9 3.7-9.5 9-9.5h.7c-9.5-8.7-22.1-14-36-14-18.6 0-35 9.6-44.6 24 1.3 0 2.4.1 3.4.1 5.6 0 14.2-.7 14.2-.7 2.9-.2 3.2 4.1.3 4.4 0 0-2.9.3-6.1.5l19.4 57.8 11.7-35L54.1 39c-2.9-.2-5.6-.5-5.6-.5-2.9-.2-2.5-4.6.3-4.4 0 0 8.8.7 14 .7 5.6 0 14.2-.7 14.2-.7 2.9-.2 3.2 4.1.3 4.4 0 0-2.9.3-6.1.5l19.3 57.3L96 78.9c2.6-7.6 4-13 4-17.6zM10.7 64c0 21.1 12.3 39.4 30.1 48L15.3 42.3c-3 6.6-4.6 14-4.6 21.7zm54.2 4.7l-16 46.5c4.8 1.4 9.8 2.2 15.1 2.2 6.2 0 12.2-1.1 17.7-3-.1-.2-.3-.5-.4-.7l-16.4-45zM64 0C28.7 0 0 28.7 0 64s28.7 64 64 64 64-28.7 64-64S99.3 0 64 0zm49.9 97.6c-2.2 3.2-4.6 6.2-7.3 8.9s-5.7 5.2-8.9 7.3c-3.2 2.2-6.7 4-10.2 5.5-7.4 3.1-15.3 4.7-23.4 4.7s-16-1.6-23.4-4.7c-3.6-1.5-7-3.4-10.2-5.5-3.2-2.2-6.2-4.6-8.9-7.3s-5.2-5.7-7.3-8.9c-2.2-3.2-4-6.7-5.5-10.2-3.4-7.4-5-15.3-5-23.4s1.6-16 4.7-23.4c1.5-3.6 3.4-7 5.5-10.2 2.2-3.2 4.6-6.2 7.3-8.9s5.7-5.2 8.9-7.3c3.2-2.2 6.7-4 10.2-5.5C48 5.4 55.9 3.8 64 3.8s16 1.6 23.4 4.7c3.6 1.5 7 3.4 10.2 5.5 3.2 2.2 6.2 4.6 8.9 7.3s5.2 5.7 7.3 8.9c2.2 3.2 4 6.7 5.5 10.2 3.1 7.4 4.7 15.3 4.7 23.4s-1.6 16-4.7 23.4c-1.4 3.8-3.2 7.2-5.4 10.4zm-2.7-53.7c0 5.4-1 11.5-4.1 19.1l-16.3 47.1c15.9-9.2 26.5-26.4 26.5-46.1 0-9.3-2.4-18-6.5-25.6.2 1.7.4 3.5.4 5.5z" />
12+
</SVG>
13+
);
14+
15+
function FullscreenModeClose() {
16+
const isActive = useSelect( ( select ) => {
17+
return select( 'core/edit-site' ).isFeatureActive( 'fullscreenMode' );
18+
}, [] );
19+
20+
if ( ! isActive ) {
21+
return null;
22+
}
23+
24+
return (
25+
<Button
26+
className="edit-site-fullscreen-mode-close"
27+
icon={ wordPressLogo }
28+
iconSize={ 36 }
29+
href="index.php"
30+
label={ __( 'Back' ) }
31+
/>
32+
);
33+
}
34+
35+
export default FullscreenModeClose;

‎packages/edit-site/src/components/header/fullscreen-mode-close/style.scss‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.edit-site-fullscreen-mode-close.has-icon {
2+
// Do not show the toolbar icon on small screens,
3+
// when Fullscreen Mode is not an option in the "More" menu.
4+
display: none;
5+
6+
@include break-medium() {
7+
display: flex;
8+
align-items: center;
9+
align-self: stretch;
10+
border: none;
11+
background: #23282e; // WP-admin gray.
12+
color: $white;
13+
border-radius: 0;
14+
height: auto;
15+
width: $header-height;
16+
17+
&:hover {
18+
background: #32373d; // WP-admin light-gray.
19+
}
20+
21+
&:active {
22+
color: $white;
23+
}
24+
25+
&:focus {
26+
box-shadow: inset 0 0 0 $border-width-focus $theme-color, inset 0 0 0 3px $white;
27+
}
28+
}
29+
}

‎packages/edit-site/src/components/header/index.js‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@ import {
99
__experimentalPreviewOptions as PreviewOptions,
1010
} from '@wordpress/block-editor';
1111
import { useSelect, useDispatch } from '@wordpress/data';
12-
import { PinnedItems, AdminMenuToggle } from '@wordpress/interface';
12+
import { PinnedItems } from '@wordpress/interface';
1313

1414
/**
1515
* Internal dependencies
1616
*/
1717
import { useEditorContext } from '../editor';
18+
import FullscreenModeClose from './fullscreen-mode-close';
1819
import MoreMenu from './more-menu';
1920
import TemplateSwitcher from '../template-switcher';
2021
import SaveButton from '../save-button';
@@ -51,15 +52,6 @@ export default function Header() {
5152
[]
5253
);
5354

54-
const { isFullscreenActive } = useSelect(
55-
( select ) => ( {
56-
isFullscreenActive: select( 'core/edit-site' ).isFeatureActive(
57-
'fullscreenMode'
58-
),
59-
} ),
60-
[]
61-
);
62-
6355
const deviceType = useSelect( ( select ) => {
6456
return select( 'core/edit-site' ).__experimentalGetPreviewDeviceType();
6557
}, [] );
@@ -70,7 +62,7 @@ export default function Header() {
7062

7163
return (
7264
<div className="edit-site-header">
73-
{ isFullscreenActive && <AdminMenuToggle /> }
65+
<FullscreenModeClose />
7466
<div className="edit-site-header__toolbar">
7567
<Inserter
7668
position="bottom right"

‎packages/edit-site/src/style.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22

33
@import "./components/block-editor/style.scss";
44
@import "./components/header/style.scss";
5+
@import "./components/header/fullscreen-mode-close/style.scss";
56
@import "./components/header/more-menu/style.scss";
67
@import "./components/notices/style.scss";
78
@import "./components/sidebar/style.scss";

0 commit comments

Comments
 (0)