Distraction Free Mode: Don't show the metaboxes #48947
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
t-hamano
commented
Mar 9, 2023
Comment on lines
268
to
271
| ! isDistractionFree && | ||
| showBlockBreadcrumbs && | ||
| ! isMobileViewport && | ||
| showBlockBreadcrumbs && | ||
| isRichEditingEnabled && | ||
| mode === 'visual' && ( |
There was a problem hiding this comment.
Nothing appears to have changed here, but the isDistractionFree variable no longer contains the viewport width condition.
This fixes another problem. In trunk, there is a "gap" in the viewport width generated by this conditional statement, so the breadcrumb list is displayed when the viewport width is between 782px and 960px, even in distraction-free mode, as shown below.
87835d47b037b1cc67e9e3bfdcc5f478.mp4
t-hamano
force-pushed
the
fix/distraction-free-metaboxes
branch
from
e167fde to
4ac5156
Compare
t-hamano
added
General Interface
|
Size Change: -2 B (0%) Total Size: 1.34 MB
ℹ️ View Unchanged
|
Mamaduka
reviewed
Mar 9, 2023
Comment on lines
246
to
248
| { ( ! isDistractionFree || ! isLargeViewport ) && ( | ||
| <EditorNotices /> | ||
| ) } |
There was a problem hiding this comment.
Does this fix another issue? Because it doesn't match isDistractionFreeMode && isLargeViewport.
There was a problem hiding this comment.
If the original condition is rewritten as is, it will be ! ( isDistractionFree && isLargeViewport ).
Isn't this the same as ( ! isDistractionFree || ! isLargeViewport )? 🤔 Personally, I think this writing style is easier to read.
There was a problem hiding this comment.
I think we only want to hide the notices in "distraction-free" mode. We can remove the ! isLargeViewport part.
There was a problem hiding this comment.
Your're right, I have confirmed that removing that section will produce the same expected results as before.
In addition, I have made the following changes in 77ab658 to address the following issues:
I noticed that the distraction-free mode could not be released unless the notice message bar was turned off, because it overlapped the header area. This may be a bug, but I think it should be addressed in a separate issue.
This should completely hide the notice message in distraction-free mode.
This comment was marked as duplicate.
This comment was marked as duplicate.
Sorry, something went wrong.
There was a problem hiding this comment.
I would prefer if we address those issues separately. Let's just fix the metabox issue in this PR.
Mamaduka
added
[Type] Bug
t-hamano
changed the title
Mamaduka
reviewed
Mar 9, 2023
This reverts commit 77ab658.
t-hamano
changed the title
Mamaduka
changed the title
Mamaduka
added
the
Backport to WP 6.7 Beta/RC
Mamaduka
pushed a commit
that referenced
this pull request
Mar 9, 2023
|
I just cherry-picked this PR to the wp/6.2 branch to get it included in the next release: e125710 |
Mamaduka
removed
the
Backport to WP 6.7 Beta/RC
|
Thank you @t-hamano 👍🏻 |
37 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #48909
What?
This PR fixes a problem with the metabox panel when switching to distraction-free mode.
How?
In the Layout component of the post editor, the layout is controlled by the value of the
isDistractionFreevariable. However, this variable includes the viewport width as a condition, as shown below.This variable cannot be used because the metabox should be hidden in distraction-free mode, regardless of the width of the viewport. Also, it appears that the name of the variable does not exactly match what is intended by the name of the variable and the result of its value.
Therefore, I changed the name of the variable
isDistractionFreeModetoisDistractionFree, which purely determines the mode, and this variable now controls the display state of the metabox. At the same time, I adjusted the conditional statements in the areas affected by this change.Testing Instructions
In advance, run the following code in the browser console to display the notis messages.
Then, activate the Custom Fields panel from the Options menu.
Default Mode
Viewport width greater than 960px
Viewport width smaller than 960px
Viewport width smaller than 782px
Distraction Free Mode
I noticed that the distraction-free mode could not be released unless the notice message bar was turned off, because it overlapped the header area. This may be a bug, but I think it should be addressed in a separate issue.
Viewport width greater than 960px
Viewport width smaller than 960px
Viewport width smaller than 782px