Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Site Editor: add fullscreen close button #20989

Merged
merged 4 commits into from
Mar 23, 2020
Merged

Conversation

vindl
Copy link
Member

@vindl vindl commented Mar 18, 2020

Description

Add Fullscreen mode close but to the Site Editor, similar to the one we already have in post editor.

Follow up of Follow up of #20691.

How has this been tested?

  1. Open the experimental Site Editor.
  2. Toggle the fullscreen mode with wp.data.dispatch( 'core/edit-site' ).toggleFeature( 'fullscreenMode' );.
  3. Verify that the button only appears when the fullscreen mode is active.
  4. Verify that clicking on it takes you back to wp-admin dashboard.

Screenshots

Screenshot 2020-03-20 at 22 05 26

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows the accessibility standards.
  • My code has proper inline documentation.
  • I've included developer documentation if appropriate.
  • I've updated all React Native files affected by any refactorings/renamings in this PR.

@vindl vindl added the [Status] In Progress Tracking issues with work in progress label Mar 18, 2020
@vindl vindl self-assigned this Mar 18, 2020
@github-actions
Copy link

github-actions bot commented Mar 18, 2020

Size Change: +1.15 kB (0%)

Total Size: 858 kB

Filename Size Change
build/edit-site/index.js 6.72 kB +765 B (11%) ⚠️
build/edit-site/style-rtl.css 2.88 kB +190 B (6%) 🔍
build/edit-site/style.css 2.88 kB +191 B (6%) 🔍
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 998 B 0 B
build/annotations/index.js 3.43 kB 0 B
build/api-fetch/index.js 3.39 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.02 kB 0 B
build/block-directory/style-rtl.css 760 B 0 B
build/block-directory/style.css 760 B 0 B
build/block-editor/index.js 100 kB 0 B
build/block-editor/style-rtl.css 10.9 kB 0 B
build/block-editor/style.css 10.9 kB 0 B
build/block-library/editor-rtl.css 7.24 kB 0 B
build/block-library/editor.css 7.24 kB 0 B
build/block-library/index.js 110 kB 0 B
build/block-library/style-rtl.css 7.41 kB 0 B
build/block-library/style.css 7.42 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.5 kB 0 B
build/components/index.js 191 kB 0 B
build/components/style-rtl.css 15.8 kB 0 B
build/components/style.css 15.7 kB 0 B
build/compose/index.js 6.21 kB 0 B
build/core-data/index.js 10.6 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/data/index.js 8.2 kB 0 B
build/date/index.js 5.37 kB 0 B
build/deprecated/index.js 771 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 3.06 kB 0 B
build/edit-post/index.js 91.2 kB 0 B
build/edit-post/style-rtl.css 8.47 kB 0 B
build/edit-post/style.css 8.46 kB 0 B
build/edit-widgets/index.js 4.43 kB 0 B
build/edit-widgets/style-rtl.css 2.58 kB 0 B
build/edit-widgets/style.css 2.58 kB 0 B
build/editor/editor-styles-rtl.css 381 B 0 B
build/editor/editor-styles.css 382 B 0 B
build/editor/index.js 43.8 kB 0 B
build/editor/style-rtl.css 4 kB 0 B
build/editor/style.css 3.98 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 6.95 kB 0 B
build/format-library/style-rtl.css 502 B 0 B
build/format-library/style.css 502 B 0 B
build/hooks/index.js 1.93 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.49 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.69 kB 0 B
build/list-reusable-blocks/index.js 2.99 kB 0 B
build/list-reusable-blocks/style-rtl.css 226 B 0 B
build/list-reusable-blocks/style.css 226 B 0 B
build/media-utils/index.js 4.84 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.01 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/plugins/index.js 2.54 kB 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 781 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.4 kB 0 B
build/server-side-render/index.js 2.55 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.01 kB 0 B
build/viewport/index.js 1.61 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.18 kB 0 B

compressed-size-action

@@ -18,30 +18,31 @@ const wordPressLogo = (
</SVG>
);

function FullscreenModeClose() {
const { isActive, postType } = useSelect( ( select ) => {
function FullscreenModeClose( { isActive } ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The behavior of that button look completely different between the two editors. Do you think we should just copy/paste addapt?

  • I see the core/editor store is used in block-editor which is not great.
  • isActive has been extractedd
  • the target URL is different.

Maybe it does make sense as a small component in the upcoming @wordpress/interface package but I wonder if it's a too early abstraction for now.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The behavior of that button look completely different between the two editors. Do you think we should just copy/paste addapt?

Yes, I think it might make more sense to do that for now. We can consider abstracting it in @wordpress/interface later on if needed.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactored as suggested in 488fa35.

Copy link
Contributor

@Addison-Stavlo Addison-Stavlo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This works well for me.

It seems a little odd to go back to 'index.php' in every case of closing the Site Editor from the fullscreen. But I can't really think of any better concrete landing point for that either.

Would it make sense to direct back to the last window location as the browsers back button would? Land folks closing the site editor into whatever section of wp-admin they were in when they decided to open it as opposed to always 'index.php' ? Or maybe even just to close fullscreen mode as the non-fullscreen site editor itself is the main landing point in this context where the page/post selection is for the existing editor? I guess these are more design questions, but index.php is probably the best to go with for now...

@vindl
Copy link
Member Author

vindl commented Mar 20, 2020

Would it make sense to direct back to the last window location as the browsers back button would? Land folks closing the site editor into whatever section of wp-admin they were in when they decided to open it as opposed to always 'index.php' ?

I'm not sure if this is the best way to go about it, since someone could navigate directly to it via link or bookmark, and then clicking the close button would unexpectedly take them to their previous page which might be out of their WP site completely?

Or maybe even just to close fullscreen mode as the non-fullscreen site editor itself is the main landing point in this context where the page/post selection is for the existing editor? I guess these are more design questions, but index.php is probably the best to go with for now...

The problem with this and how it currently works is that it wouldn't be possible to have the fullscreen preference permanently on, since exiting the editor would always toggle it back.

@vindl vindl force-pushed the add/site-editor-fullscreen-close branch from 132345f to 488fa35 Compare March 20, 2020 20:24
@vindl vindl added [Feature] Full Site Editing and removed [Status] In Progress Tracking issues with work in progress labels Mar 20, 2020
Copy link
Contributor

@youknowriad youknowriad left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we make fullscreen default like the post screen?

@vindl vindl force-pushed the add/site-editor-fullscreen-close branch from 43923cf to 840703e Compare March 23, 2020 10:59
@vindl
Copy link
Member Author

vindl commented Mar 23, 2020

Should we make fullscreen default like the post screen?

Yes, I think it now makes sense with latest UI additions. Updated in 840703e02fea4f02b1a51c74ce5cf4878f7e1051.

@vindl vindl force-pushed the add/site-editor-fullscreen-close branch from 840703e to db2e5e4 Compare March 23, 2020 11:50
@vindl vindl force-pushed the add/site-editor-fullscreen-close branch from db2e5e4 to 58ce859 Compare March 23, 2020 12:56
@vindl vindl added this to the Gutenberg 7.8 milestone Mar 23, 2020
@vindl vindl force-pushed the add/site-editor-fullscreen-close branch from 6dba089 to 96b6614 Compare March 23, 2020 14:27
@vindl vindl merged commit d531729 into master Mar 23, 2020
@vindl vindl deleted the add/site-editor-fullscreen-close branch March 23, 2020 14:50
@youknowriad youknowriad mentioned this pull request Apr 23, 2020
53 tasks
@mtias mtias mentioned this pull request Apr 24, 2020
17 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants