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] refine Block borders #20064

Merged
merged 9 commits into from
Feb 11, 2020
Merged

[RNMobile] refine Block borders #20064

merged 9 commits into from
Feb 11, 2020

Conversation

jbinda
Copy link
Contributor

@jbinda jbinda commented Feb 6, 2020

Description

PR goal is to apply InnerBlock bordering style to other blocks on the RootList level ( full solid border ) as well as show FloatingToolbar when selected.

At this moment two commits is the minimum code change to achieve expected results. I will also do the code cleanup to remove unnecessary code in future commits.

Please also refer to:
Related gutenberg-mobile PR
Discussion on design

How has this been tested?

  1. Start with below code in initial-html
/**
 * @format
 * @flow
 */

export default `
<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:heading -->
<h2>Group</h2>
<!-- /wp:heading -->

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image --></div></div>
<!-- /wp:group -->

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->

<!-- wp:image -->
<figure class="wp-block-image"><img alt=""/></figure>
<!-- /wp:image -->


`;
  1. Try to play with selection on RootList block and the Group block
  2. Add as many Blocks as you want to RootList to test how the modified border looks like

Screenshots

Types of changes

New feature ( apply same bordering style as in InnerBlock to RootList blocks )

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.

@jbinda jbinda added [Type] Enhancement A suggestion for improvement. [Feature] Blocks Overall functionality of blocks labels Feb 6, 2020
@jbinda jbinda self-assigned this Feb 6, 2020
@jbinda jbinda requested review from Tug, pinarol and koke February 10, 2020 07:30
@jbinda jbinda requested a review from etoledom February 10, 2020 07:44
@etoledom etoledom added the Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) label Feb 10, 2020
Copy link
Contributor

@koke koke left a comment

Choose a reason for hiding this comment

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

Looking good. Yay for less code 😁

@jbinda jbinda merged commit b55598f into master Feb 11, 2020
@jbinda jbinda deleted the rnmobile/refine-block-borders branch February 11, 2020 15:25
@github-actions github-actions bot added this to the Gutenberg 7.6 milestone Feb 11, 2020
@pinarol
Copy link
Contributor

pinarol commented Feb 11, 2020

so happy to see some complex logic removed! 🥳

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Blocks Overall functionality of blocks Mobile App - i.e. Android or iOS Native mobile impl of the block editor. (Note: used in scripts, ping mobile folks to change) [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants