-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
[RNMobile] Update "add block" button style in default editor view #39726
[RNMobile] Update "add block" button style in default editor view #39726
Conversation
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.
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
|
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.
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.
@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 🙇♀️ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🎊 !
Tested on iPhone 11 (iOS 15.4.1) and Samsung Galaxy S20 FE 5G (Android 11).
? headerToolbarStyles.container.height | ||
? headerToolbarStyles[ 'header-toolbar__container' ].height |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 |
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 Blocks
label. The following is a high-level overview of the code changes involved:Logic around "isDefaultView" check
A new
noContentSelected
check has been implemented to determine whether a block or title is currently selected or not. If nothing is selected within the editor, thennoContentSelected
returns astrue
.Styling
The
noContentSelected
check is utilised to add different styles to the toolbar and block inserter button in cases when it returns astrue
:header-toolbar
component (the toolbar at the bottom of the editor) has been updated to increase in height whennoContentSelected
istrue
. To enable this, a new$mobile-header-toolbar-expanded-height
variable has been added to the global_variables.scss
file.inserter
component (the+
button within the toolbar) has also been updated to display a text label and apply new styles whennoContentSelected
istrue
.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 Blocks
text 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