[RNMobile] Update "add block" button style in default editor view #39726
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
added 5 commits
March 24, 2022 16:06
This text will be visible alongside the button when the editor is first opened. It'll be wrapped around conditionals in future commits.
The 'isDefaultView' check will be used to specify a style for the button that will only be seen with the editor's default view.
SiobhyB
changed the title
jhnstn
reviewed
Mar 25, 2022
packages/block-editor/src/components/inserter/style.native.scss
Outdated
Show resolved
Hide resolved
With this commit, the props needed for the button's default view styling are separated out into their own 'defaultViewProps' variable. The reason behind this change is that the default props in the main 'ToolbarButton' component had a lot of conditionals, which had become fairly hard to read.
|
Size Change: 0 B Total Size: 1.22 MB ℹ️ View Unchanged
|
added 2 commits
March 29, 2022 10:47
This commit includes the following tweaks to improve the quality of the PR's CSS: - In accordance with BEM naming, selectors have been updated to separate any modifiers with a --. e.g. "inserter-menu__add-block-button-dark" is now "inserter-menu__add-block-button--dark". - The " $white" variable has been used instead of the hex code for the colour white.
To help with readability, this commit separates 'defaultViewText' into its own variable. It also adds a comment above the 'default view' variables to help with overall clarity.
SiobhyB
added
Mobile App - i.e. Android or iOS
SiobhyB
commented
Mar 29, 2022
The unit tests on mobile are currently failing due to the following error: > TypeError: Cannot read property 'color' of undefined This commit seeks to resolve that failure by removing the offending, redundant code.
This was referenced Mar 29, 2022
SiobhyB
changed the title
SiobhyB
changed the title
|
@jhnstn, @iamthomasbishop, the installable builds for Android (here) and iOS (here) are up and the code's ready for review now. :) In addition to the pending questions at wordpress-mobile/gutenberg-mobile#4692 (comment), I wanted to note that I anticipate there will probably be design changes needed to the button's padding/spacing/look. Looking forward to hearing any feedback! |
|
For posterity, noting that I've converted this PR back to a draft to reflect the fact it's a work in progress following the discovery of a blocking bug. |
|
@SiobhyB I've just pushed a fix in bc9b4ea for the visual glitch outlined in #39726 (comment). This has implied reverting your latest changes related to using the global editor settings (revert commits: 24d9294 adf4173). If you agree, we can set the PR back to ready for review and I can proceed with reviewing it, wdyt? |
|
@fluiddot, that sounds perfect, thank you 🙇♀️ |
fluiddot
approved these changes
Apr 12, 2022
| ? headerToolbarStyles.container.height | ||
| ? headerToolbarStyles[ 'header-toolbar__container' ].height |
There was a problem hiding this comment.
This value takes the default height of the header toolbar, so it doesn't take into account the case when the toolbar is displayed in the expanded mode. As far as I tested, I didn't identify any visual issue regarding this logic, so looks safe to only use that value.
In the future, it would be great to update this calculation, and instead of accessing the height from the styles, retrieve it from the onLayout event.
|
PR check |
I'm going to update the PR with |
This was referenced Apr 14, 2022
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: wordpress-mobile/gutenberg-mobile#4692
Related PRs and Installable Builds
Gutenberg Mobile:[RNMobile] Update "add block" button style in default editor view wordpress-mobile/gutenberg-mobile#4705Android installable build:[DO NOT MERGE] [RNMobile] Update block inserter button wordpress-mobile/WordPress-Android#16196iOS installable build:[DO NOT MERGE] [RNMobile] Update block inserter button wordpress-mobile/WordPress-iOS#18233What?
This PR seeks to make the block inserter more visible in the "default view" of the editor. For the purposes of this PR, "default view" has been interpreted as the view of the editor when no blocks (including the editor's title) are selected.
Why?
User research indicates that it's not always clear to users what primary actions are available when they first open the editor. By iterating on the default view of the editor, it's hoped that it will be easier for users to discover blocks and, therefore, improve the overall writing/onboarding experience.
How?
With the changes from this PR, whenever a block isn't selected the block inserter button will be styled more prominently and with an
Add Blockslabel. The following is a high-level overview of the code changes involved:Logic around "isDefaultView" check
A new
noContentSelectedcheck has been implemented to determine whether a block or title is currently selected or not. If nothing is selected within the editor, thennoContentSelectedreturns astrue.Styling
The
noContentSelectedcheck is utilised to add different styles to the toolbar and block inserter button in cases when it returns astrue:header-toolbarcomponent (the toolbar at the bottom of the editor) has been updated to increase in height whennoContentSelectedistrue. To enable this, a new$mobile-header-toolbar-expanded-heightvariable has been added to the global_variables.scssfile.insertercomponent (the+button within the toolbar) has also been updated to display a text label and apply new styles whennoContentSelectedistrue.Testing Instructions
To view and test the new button's new styles, follow these steps within the WordPress Android or iOS app:
+inserter will take up a bigger amount of the toolbar than previously, and will displayAdd Blockstext alongside it.As this is a UI change, it'd be helpful to test the following as part of the above flow:
Screenshots or screencast
General
These before/after screenshots show the inserter button (the
+icon to the left of the bottom toolbar) as it displayed before the changes in this PR and after. Note, the styling in the "after" screenshot will only be visible when no part of the editor is selected (no block or title selection):Dark mode