Skip to content

/ gutenberg

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

Jump to bottom

[Mobile] Add support for full width/wide alignment options #24598

Merged
merged 28 commits into from Sep 4, 2020
Merged

[Mobile] Add support for full width/wide alignment options #24598

merged 28 commits into from Sep 4, 2020

Conversation

@geriux
Copy link
Member

@geriux geriux commented Aug 17, 2020 •
edited

Gutenberg Mobile PR -> wordpress-mobile/gutenberg-mobile#2559
WordPress iOS PR -> wordpress-mobile/WordPress-iOS#14679
WordPress Android PR -> wordpress-mobile/WordPress-Android#12720

Description

This PR adds full width / wide alignment options to mobile. For the first iteration it will support only some blocks, Group, Cover, and Image block.

Since we needed to filter the wanted blocks that we are going to support first, there's a new native version of the align hook, that uses the current functionality but adds a new filter to only show these alignments for the desired blocks.

There's a native file as well for the defaults file which reexports the same content but enabling the alignWide setting. This way we reuse the same code but adding something extra for mobile.

Most of this new logic goes into the block-list-item component. It will recalculate the horizontal margin depending on the block's alignment option and its parent block as well.

How has this been tested?

Steps to test full-width alignment ---

Full-width alignment with an inner block

  • Open the app with metro running
  • Start a new post
  • Add a Group block
  • Set the alignment to Full width
  • Expect the block to be full width.
  • Add a Cover block
  • Set an image for the block
  • Expect the block not to be full width
  • Select the Cover block and change it's alignment to Full width
  • Expect to see the block full width within the Group block

Full-width alignment without inner blocks

  • Open the app with metro running
  • Start a new post
  • Add a Cover block
  • Set an image for the block
  • Select the Cover block and change it's alignment to Full width
  • Expect to see the block full width

Full-width alignment with some inner blocks

  • Open the app with metro running
  • Start a new post
  • Add a Group block
  • Set the alignment to Full width
  • Expect the block to be full width.
  • Add a Cover block
  • Set an image for the block
  • Expect the block not to be full width
  • Select the Cover block and change it's alignment to Full width
  • Expect to see the block full width within the Group block
  • Select the Cover block and add another Cover block within it
  • Select an image or solid background for the block
  • Change its alignment to full width
  • Expect to see the second Cover block full width but with some horizontal margins
Steps to test wide alignment ---

Wide alignment with an inner block

  • Open the app with metro running
  • Start a new post
  • Add a Group block
  • Set the alignment to Wide
  • Expect the block to be close to the edges but not fully.
  • Add a Cover block
  • Set an image for the block
  • Expect the block not to be full width
  • Select the Cover block and change it's alignment to Full width
  • Expect to see the block full width within the Group block, it shouldn't reach the edges of the editor

Wide alignment without inner blocks

  • Open the app with metro running
  • Start a new post
  • Add a Cover block
  • Set an image for the block
  • Select the Cover block and change it's alignment to Wide
  • Expect the block to be close to the edges but not fully

Full-width alignment with some inner blocks

  • Open the app with metro running
  • Start a new post
  • Add a Group block
  • Set the alignment to Full width
  • Expect the block to be full width.
  • Add a Cover block
  • Set an image for the block
  • Expect the block not to be full width
  • Select the Cover block and change it's alignment to Wide
  • Expect to see the block close to the edges within the Group block
  • Select the Cover block and add another Cover block within it
  • Select an image or solid background for the block
  • Change its alignment to full width
  • Expect to see the second Cover block full width but with some horizontal margins

Screenshots

iPhone
Full width Wide alignment
Full width Wide alignment
Android Phone
Full width Wide alignment
Full width Wide alignment
iPad 11 inch
Full width Wide alignment
Full width
Wide alignment

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.
geriux added 9 commits Aug 12, 2020
@geriux
Mobile - Full / Wide alignment support
c8c5b7f
@geriux
Mobile - Full / Width alignment support: wide setting improvements
e266a7a
@geriux
Mobile - Full / Wide alignment support - Custom align native hook to …
Loading status checks…
790f1da 
…filter unsupported blocks
@geriux
Merge branch 'master' into rnmobile/feature/full-width-wide-align-sup…
6b3d803 
…port
@geriux
Mobile - Full / Wide alignment support - margin improvements and fixes
Loading status checks…
146e5cd
@geriux
Mobile - BlockListItem - Remove unused selector
Loading status checks…
30fe6c8
@geriux
Mobile - Full / Wide alignments - props order
Loading status checks…
82529f9
@geriux
Mobile - Full / wide alignment - use declared const
Loading status checks…
6745fbf
@geriux
Mobile - Full / Wide alignment - Remove right / left support
Loading status checks…
983dbe5
@github-actions
Copy link

@github-actions github-actions bot commented Aug 17, 2020 •
edited

Size Change: 0 B

Total Size: 1.2 MB

ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.14 kB 0 B
build/annotations/index.js 3.67 kB 0 B
build/api-fetch/index.js 3.41 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 8.5 kB 0 B
build/block-directory/style-rtl.css 953 B 0 B
build/block-directory/style.css 952 B 0 B
build/block-editor/index.js 128 kB 0 B
build/block-editor/style-rtl.css 11.1 kB 0 B
build/block-editor/style.css 11.1 kB 0 B
build/block-library/editor-rtl.css 8.64 kB 0 B
build/block-library/editor.css 8.64 kB 0 B
build/block-library/index.js 138 kB 0 B
build/block-library/style-rtl.css 7.6 kB 0 B
build/block-library/style.css 7.6 kB 0 B
build/block-library/theme-rtl.css 754 B 0 B
build/block-library/theme.css 754 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 47.7 kB 0 B
build/components/index.js 200 kB 0 B
build/components/style-rtl.css 15.5 kB 0 B
build/components/style.css 15.5 kB 0 B
build/compose/index.js 9.67 kB 0 B
build/core-data/index.js 12.3 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.55 kB 0 B
build/date/index.js 31.9 kB 0 B
build/deprecated/index.js 772 B 0 B
build/dom-ready/index.js 568 B 0 B
build/dom/index.js 4.48 kB 0 B
build/edit-navigation/index.js 11.7 kB 0 B
build/edit-navigation/style-rtl.css 1.16 kB 0 B
build/edit-navigation/style.css 1.16 kB 0 B
build/edit-post/index.js 305 kB 0 B
build/edit-post/style-rtl.css 6.26 kB 0 B
build/edit-post/style.css 6.25 kB 0 B
build/edit-site/index.js 17.1 kB 0 B
build/edit-site/style-rtl.css 3.06 kB 0 B
build/edit-site/style.css 3.06 kB 0 B
build/edit-widgets/index.js 12 kB 0 B
build/edit-widgets/style-rtl.css 2.46 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 492 B 0 B
build/editor/editor-styles.css 493 B 0 B
build/editor/index.js 45.6 kB 0 B
build/editor/style-rtl.css 3.81 kB 0 B
build/editor/style.css 3.81 kB 0 B
build/element/index.js 4.64 kB 0 B
build/escape-html/index.js 733 B 0 B
build/format-library/index.js 7.71 kB 0 B
build/format-library/style-rtl.css 547 B 0 B
build/format-library/style.css 548 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.57 kB 0 B
build/is-shallow-equal/index.js 711 B 0 B
build/keyboard-shortcuts/index.js 2.52 kB 0 B
build/keycodes/index.js 1.94 kB 0 B
build/list-reusable-blocks/index.js 3.12 kB 0 B
build/list-reusable-blocks/style-rtl.css 476 B 0 B
build/list-reusable-blocks/style.css 476 B 0 B
build/media-utils/index.js 5.32 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 671 B 0 B
build/nux/style.css 668 B 0 B
build/plugins/index.js 2.56 kB 0 B
build/primitives/index.js 1.41 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/redux-routine/index.js 2.85 kB 0 B
build/rich-text/index.js 13.9 kB 0 B
build/server-side-render/index.js 2.77 kB 0 B
build/shortcode/index.js 1.7 kB 0 B
build/token-list/index.js 1.27 kB 0 B
build/url/index.js 4.06 kB 0 B
build/viewport/index.js 1.85 kB 0 B
build/warning/index.js 1.13 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action
geriux added 2 commits Aug 18, 2020
@geriux
Mobile - Full width / wide alignment - Add Imade block support and Gr…
Loading status checks…
c1b5ff4 
…oup appender fix
@geriux
Merge branch 'master' into rnmobile/feature/full-width-wide-align-sup…
Loading status checks…
2ec8bbb 
…port
This was referenced Aug 19, 2020
Merged
Closed
Closed
geriux added 13 commits Aug 19, 2020
@geriux
Mobile - Full width / wide alignment - Cover and group improvements
Loading status checks…
dadd732
@geriux
Mobile - Full width / wide alignments - Improve margins
Loading status checks…
7882a04
@geriux
Merge branch 'master' into rnmobile/feature/full-width-wide-align-sup…
Loading status checks…
cf88ae7 
…port
@geriux
Mobile - Full width / wide alignment options - Fix appender and selec…
2f913f6 
…ted border for full width blocks
@geriux
Mobile - Full width / wide alignment - Update margins
Loading status checks…
a355082
@geriux
Mobile - Wide / full width alignments - Margin fixes and improvements
d4a0723
@geriux
Mobile - Full width / wide alignment fix margins and max width
55e799b
@geriux
Merge branch 'master' into rnmobile/feature/full-width-wide-align-sup…
Loading status checks…
28a5aac 
…port
@geriux
Mobile - Remove unused style
Loading status checks…
17f6ef7
@geriux
Mobile - Full-width / wide alignment options - Restore cover paddings…
Loading status checks…
098bc23 
… for inner blocks
@geriux
Mobile - Full width / wide alignments update breakpoints
Loading status checks…
686657a
@geriux
Mobile - Full-width / Wide alignments - Improve max width and margins…
79d3d26 
… for smaller screens
@geriux
Mobile - Full-width / Wide alignments - Remove unused variable
Loading status checks…
243467b
@geriux geriux marked this pull request as ready for review Aug 28, 2020
@geriux geriux requested a review from lukewalczak Aug 28, 2020
@lukewalczak
lukewalczak reviewed Sep 1, 2020
View changes
packages/block-editor/src/hooks/align.native.js Outdated Show resolved Hide resolved
@lukewalczak
lukewalczak reviewed Sep 1, 2020
View changes
packages/block-library/src/image/edit.native.js Outdated Show resolved Hide resolved
@lukewalczak
lukewalczak reviewed Sep 1, 2020
View changes
packages/components/src/mobile/readable-content-view/index.native.js Outdated Show resolved Hide resolved
@lukewalczak
lukewalczak reviewed Sep 1, 2020
View changes
packages/components/src/mobile/readable-content-view/index.native.js Outdated Show resolved Hide resolved
@lukewalczak
lukewalczak reviewed Sep 1, 2020
View changes
packages/block-editor/src/components/block-list/block-list-item.native.js Outdated Show resolved Hide resolved
@geriux
Mobile - Full-width / Wide alignments - New utils with alignments and…
Loading status checks…
8c1c949 
… breakpoints
@geriux
Copy link
Member Author

@geriux geriux commented Sep 2, 2020

Hey @lukewalczak thanks for the review! I've updated the code and the builds for another round of review, thanks!
@geriux geriux requested a review from lukewalczak Sep 2, 2020
geriux added 3 commits Sep 4, 2020
@geriux
Mobile - Full-width fix for Android devices window width
7af6858
@geriux
Merge branch 'master' into rnmobile/feature/full-width-wide-align-sup…
fd94cf5 
…port

# Conflicts:
#	packages/block-library/src/image/edit.native.js
@geriux
React Native Editor - Update changelog
Loading status checks…
8558c0a
@lukewalczak
Copy link
Member

@lukewalczak lukewalczak commented Sep 4, 2020

Tested on both platforms and works as expected 🎉 Great work @geriux! :shipit:
@lukewalczak
lukewalczak approved these changes Sep 4, 2020
View changes
@geriux geriux merged commit 8ba0a42 into master Sep 4, 2020
15 checks passed
15 checks passed
Cancel Previous Runs
Details
Check Check
Details
build
Details
Admin - 1
Details
Compare performance with master
Details
pull-request-automation
Details
test (gutenberg-editor-gallery)
Details
test (gutenberg-editor-gallery)
Details
All
Details
JavaScript
Details
Admin - 2
Details
PHP
Details
Admin - 3
Details
Mobile
Details
Admin - 4
Details
@geriux geriux deleted the rnmobile/feature/full-width-wide-align-support branch Sep 4, 2020
@github-actions github-actions bot added this to the Gutenberg 9.0 milestone Sep 4, 2020
@ockham ockham mentioned this pull request Sep 8, 2020
Closed
5 of 6 tasks complete
@geriux geriux mentioned this pull request Sep 9, 2020
Merged
6 of 6 tasks complete
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lukewalczak lukewalczak

Assignees
No one assigned
Labels
Mobile App Android/iOS
Projects
None yet
Milestone
Gutenberg 9.0
Linked issues

Successfully merging this pull request may close these issues.

None yet

2 participants
@geriux @lukewalczak
You can’t perform that action at this time.