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

[RNMobile] Buttons block #20191

Merged
merged 60 commits into from
Apr 20, 2020
Merged

[RNMobile] Buttons block #20191

merged 60 commits into from
Apr 20, 2020

Conversation

lukewalczak
Copy link
Member

@lukewalczak lukewalczak commented Feb 12, 2020

Description

Fixes: wordpress-mobile/gutenberg-mobile#1790

Ref to gb-mobile: wordpress-mobile/gutenberg-mobile#1933

Points to achieve:

  • - display buttons side-by-side
  • - create new square appender which will be displayed inline, right next to the buttons
  • - pressing appender should automatically add new Button
  • - do not display ADD BLOCK HERE line
  • - alignment options
  • - remove the whole container along with removing the last button

How has this been tested?

Test cases can be found here

Screenshots

Types of changes

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.

@lukewalczak lukewalczak added [Status] In Progress Tracking issues with work in progress Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Block] Buttons Affects the Buttons Block labels Feb 12, 2020
@lukewalczak
Copy link
Member Author

Hopefully, I covered all features required in the Buttons block, so would like to get some more insights about components spacings within the block which imo currently looks incorrectly (I've marked on the screenshots dimensions especially interesting to me (A, B). I assumed also that A should be equal B):

unselected Buttons block selected Buttons block
Screenshot 2020-02-17 at 14 24 47 Screenshot 2020-02-17 at 14 24 32

@iamthomasbishop
Copy link

@lukewalczak The spacing does look a little large, but I think it's something that could be improved in the next iteration if necessary.

In general, I'm hesitant to recommend applying a special rule to a single block's inner blocks, however, I think we might see a similar issue on other blocks — such as the Navigation block or Social Buttons block — where there is a horizontal list of blocks that we want to be close to each other.

I wonder if we should try to remove the horizontal spacing in-between "columns" (A) and rows (B). In other words, the dashed borders would be flush against each other. So the first button (first-child in css) would stay where it is, but subsequent buttons' dashed borders would be flush.

I'm not sure what would be the best way to do that, but I think we might want to build it in a way that allows us to use the same pattern for blocks like Nav, Social Buttons, etc. Let me know idf that all makes sense.

@github-actions
Copy link

github-actions bot commented Feb 19, 2020

Size Change: -8 B (0%)

Total Size: 839 kB

Filename Size Change
build/block-editor/index.js 105 kB +16 B (0%)
build/block-library/editor-rtl.css 7.1 kB -17 B (0%)
build/block-library/editor.css 7.09 kB -20 B (0%)
build/block-library/style-rtl.css 7.14 kB +7 B (0%)
build/block-library/style.css 7.15 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.62 kB 0 B
build/api-fetch/index.js 4.01 kB 0 B
build/autop/index.js 2.82 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.24 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/style-rtl.css 10.2 kB 0 B
build/block-editor/style.css 10.2 kB 0 B
build/block-library/index.js 112 kB 0 B
build/block-library/theme-rtl.css 683 B 0 B
build/block-library/theme.css 685 B 0 B
build/block-serialization-default-parser/index.js 1.88 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/blocks/index.js 57.7 kB 0 B
build/components/index.js 198 kB 0 B
build/components/style-rtl.css 16.6 kB 0 B
build/components/style.css 16.6 kB 0 B
build/compose/index.js 6.66 kB 0 B
build/core-data/index.js 11.1 kB 0 B
build/data-controls/index.js 1.25 kB 0 B
build/data/index.js 8.43 kB 0 B
build/date/index.js 5.47 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 569 B 0 B
build/dom/index.js 3.1 kB 0 B
build/edit-navigation/index.js 3.1 kB 0 B
build/edit-navigation/style-rtl.css 279 B 0 B
build/edit-navigation/style.css 280 B 0 B
build/edit-post/index.js 27.8 kB 0 B
build/edit-post/style-rtl.css 12.3 kB 0 B
build/edit-post/style.css 12.3 kB 0 B
build/edit-site/index.js 10.4 kB 0 B
build/edit-site/style-rtl.css 5.02 kB 0 B
build/edit-site/style.css 5.02 kB 0 B
build/edit-widgets/index.js 7.53 kB 0 B
build/edit-widgets/style-rtl.css 4.65 kB 0 B
build/edit-widgets/style.css 4.64 kB 0 B
build/editor/editor-styles-rtl.css 428 B 0 B
build/editor/editor-styles.css 431 B 0 B
build/editor/index.js 43.3 kB 0 B
build/editor/style-rtl.css 3.48 kB 0 B
build/editor/style.css 3.47 kB 0 B
build/element/index.js 4.65 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.32 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 2.13 kB 0 B
build/html-entities/index.js 622 B 0 B
build/i18n/index.js 3.56 kB 0 B
build/is-shallow-equal/index.js 710 B 0 B
build/keyboard-shortcuts/index.js 2.51 kB 0 B
build/keycodes/index.js 1.91 kB 0 B
build/list-reusable-blocks/index.js 3.12 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 5.28 kB 0 B
build/notices/index.js 1.79 kB 0 B
build/nux/index.js 3.4 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.67 kB 0 B
build/primitives/index.js 1.49 kB 0 B
build/priority-queue/index.js 788 B 0 B
build/redux-routine/index.js 2.84 kB 0 B
build/rich-text/index.js 14.8 kB 0 B
build/server-side-render/index.js 2.67 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.01 kB 0 B
build/viewport/index.js 1.84 kB 0 B
build/warning/index.js 1.14 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@lukewalczak
Copy link
Member Author

@iamthomasbishop I generated for you build which you can find there. Please give me feedback!

Please notice that finally, I didn't change any spacings around buttons, because I've discovered that it's not so simple to adjust it for current styled and there is no universal styling also for other _horizontal_blocks.
Ofc it's doable and I was able to achieve it, but it took some tricky implementation. What's more, I'm not convinced that the final result was satisfying.

Screenshot 2020-02-18 at 12 48 40

If you would like I can add these styling changes and present them in another build as well, just let me know!

@iamthomasbishop
Copy link

iamthomasbishop commented Feb 20, 2020

Hey @lukewalczak, this is looking really solid! I have some picky feedback, but it already feels pretty workable and close to ready. Here are my thoughts:

  • Inline Appender should be visible when a Button is selected (example: https://cloudup.com/cnDi6sKkYoU ). If we aren’t going to show the appender at the end of the list, tapping on the space trailing the last button should add a button, similar to how we have a persistent “invisible” trailing inserted at the end of the document.
  • We might want to rotate the inline toolbar mover arrows (up/down) to be left/right (example: https://cloudup.com/cCAEzYYbq_b)
  • When I add a Button, its richText input should be focused
  • Known issue: spacing between sibling button blocks makes for jumpy transitions when changing selection (example: https://cloudup.com/cZMAjf9XFdg)
  •  When single Button is selected, tapping on inserter should skip block picker and instead skip to adding a new sibling button (example: https://cloudup.com/cDVIifP_uA2)

Separate feedback that I wanted to note:

  • In general, the “dimming” layer feels a bit strong, esp in dark mode. I think since we have now added a stronger border style to selected blocks, dimming could either be removed or relaxed a bit.
  • Relatedly, we might want to consider adding subtle bordering to the parent. (Example: https://cloudup.com/cS7sDX9TxID)

@lukewalczak
Copy link
Member Author

Thanks for valuable as always feedback! However, I would like to enquire more specifically about:

Inline Appender should be visible when a Button is selected (example: https://cloudup.com/cnDi6sKkYoU

Does it mean that in the case present on the screenshot below, appender should appear on close to the selected button right side and a first button will go up if there is no space for it?

current state visualisation
Screenshot 2020-02-20 at 20 23 43 Screenshot 2020-02-20 at 20 23 43

If we aren’t going to show the appender at the end of the list, tapping on the space trailing the last button should add a button, similar to how we have a persistent “invisible” trailing inserted at the end of the document.

We are not presenting an appender at the end of the list, because instead, we have an inline appender, right? By pressing the trailing space you meant this marked area:
Screenshot 2020-02-20 at 20 32 33

When single Button is selected, tapping on inserter should skip block picker and instead skip to adding a new sibling button (example: https://cloudup.com/cDVIifP_uA2)

I think that we've discussed that already and the final decision was to open a block picker since automatically adding button block means architectural changes. Correct me if I understood it wrongly.

@jbinda
Copy link
Contributor

jbinda commented Apr 10, 2020

According to pinned test cases I have tested on iOS and Android demo app

TEST CASES

  • Initial state - Button

  • Initial state - Inline appender

  • Add next Button - using inline appender

  • Add next Button - using inserter

  • Removing Button - exactly one Button - using the trash icon

  • Removing Button - exactly one Button - deleting all characters from Button

  • Removing Button - more than one Button - using the trash icon

  • Removing next Button - more than one Button - deleting all characters from Button

  • Wrapping Buttons

  • Alignment options

  • Inline appender behaviour

I will also proceed with sanity-test on production builds:

Android

Button-1

  • Button block - Render custom text color - steps
  • Button block - Render custom background color - steps
  • Button block - Render gradient background color - steps
  • Button block - Check if selection / caret color matches font color - steps

Button-2

  • Button block - Edit text styles - steps
  • Button block - Fallback to default colors in case theme colors are used - steps
  • Button block - New Button is created with the gray color - steps
  • Button block - Settings: Change Button border radius - steps
  • Button block - The newly created button has set background color to the theme-default color in preview - steps
  • Button block - Tapping delete key removes block when Button is empty - steps

Button-3

  • Button block - Settings: Open in new tab - steps
  • Button block - Settings: Link rel - steps
  • Button block - Settings: Link URL - steps
  • Button block - Settings: Remove link - steps
  • Button block - Settings: Synchronize with button options - steps

Button-4

  • Button block - Link from the clipboard is automatically added into the empty URL field in link settings and button options - steps
  • Button block - Toolbar link button is active when Button has link - steps

edited
Note that it was tested before merge changes from gutenberg repo master branch which cause colors usage issue

@iamthomasbishop
Copy link

@lukewalczak Giving this one more review and it feels really solid. The only big issues I have with it will be resolved by the progress being made on the floatingToolbar and color picker work. Note: I haven't had a chance to test Android yet because it's behind a flag — I will test again when I am able next week.

I have one tiny design request — can we remove the border on the inline appender just for this block? I think we can keep the border on other instances of the inline appender (Columns, Gallery, Group, etc) because it looks okay on the full-width appender in those cases, but I think a more subtle button on this type of direct-inline adding makes more sense. It might be worth saving this "borderless" style as a variation of the appender because I have a feeling we're going to need it in the future (Navigation Menu block, Social Links, etc.). It would make the appender look like this:

Note: the tap area would still be the same size, this would just remove or make the border transparent.

I apologize for not mentioning this earlier, but I didn't know if I was convinced at first, but now that I've had some time with the block and the dust has settled, I figured I should suggest it before we ship it. 😄

@lukewalczak
Copy link
Member Author

UPDATES

Rename horizontalDirection to isStackedHorizontally
Rename isFlex to isFloatingAppender
Refactor floating appender appearance:

light theme dark theme
Screenshot 2020-04-14 at 13 39 08 Screenshot 2020-04-14 at 13 39 20

@iamthomasbishop
Copy link

@lukewalczak This is looking really solid, thanks for addressing the issues I mentioned previously — the floating appender looks much better. Layout-wise everything is feeling pretty good (other than the previously-mentioned floatingToolbar issue which is being resolved elsewhere).

I noticed something with custom colors while testing side-by-side with the web app, but I'm not sure if this is because of some theme-color restrictions, or because of a regression. As far as I know, we were at one point supporting custom chosen colors for background and text, but I noticed that when I've applied custom background and text colors on the web, we're not inheriting those styles on the mobile editor. Here's an example:

@lukewalczak
Copy link
Member Author

Thanks @iamthomasbishop for reporting that. Some time ago was breakage related to colors so will investigate it!

@iamthomasbishop
Copy link

Ahh, that's right! Thank you @lukewalczak !

@jbinda
Copy link
Contributor

jbinda commented Apr 15, 2020

I have tested it on production build yesterday on Android ( APK 44756 ) and be able to transfer custom bg color and text color to Button on mobile.

Some time ago was breakage related to colors so will investigate it!

It was bring by latest sync with master ? If not it may be something else causing this issue according to above

@iamthomasbishop
Copy link

Colors seem to be fixed in the latest test build @lukewalczak . Nice work!

Copy link
Contributor

@jbinda jbinda left a comment

Choose a reason for hiding this comment

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

LGTM !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Buttons Affects the Buttons Block Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add Buttons block
6 participants