Skip to content

[RNMobile] - Blog layout template#21426

Merged
mkevins merged 3 commits intomasterfrom
rnmobile/blog-layout
Apr 8, 2020
Merged

[RNMobile] - Blog layout template#21426
mkevins merged 3 commits intomasterfrom
rnmobile/blog-layout

Conversation

@geriux
Copy link
Copy Markdown
Member

@geriux geriux commented Apr 6, 2020 •
edited
Loading

Gutenberg Mobile PR -> wordpress-mobile/gutenberg-mobile#2114

Description

This PR adds the Blog layout since the Latest Posts block is now available.

Screenshots

Blog Layout Preview
Blog preview Android Blog preview Android
Blog preview iOS Blog preview iOS
Emoji compatibility check

Android

API 21 API 23
API 27 API 29

iOS

How has this been tested?

  • Open the WordPress app with metro running
  • Go to Pages
  • Add a new page
  • Expect to see the blog option in the layout picker, tap on it
  • Expect to see the preview of the template
  • Tap on apply
  • Expect to see the layout applied in the editor
  • Preview the page
  • Expect to see the layout showing correctly

Types of changes

New layout template

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 geriux 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 Apr 6, 2020
@geriux geriux marked this pull request as ready for review April 6, 2020 13:53
@geriux geriux mentioned this pull request Apr 6, 2020
Merged
2 tasks
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 6, 2020 •
edited
Loading

Size Change: +715 B (0%)

Total Size: 889 kB

Filename Size Change
build/block-editor/index.js 103 kB +742 B (0%)
build/block-library/index.js 110 kB +23 B (0%)
build/block-library/style-rtl.css 7.42 kB -104 B (1%)
build/block-library/style.css 7.43 kB -105 B (1%)
build/blocks/index.js 57.5 kB +1 B
build/components/index.js 195 kB -11 B (0%)
build/data/index.js 8.23 kB +1 B
build/edit-navigation/index.js 2.75 kB +40 B (1%)
build/edit-navigation/style-rtl.css 279 B +40 B (14%) ⚠️
build/edit-navigation/style.css 280 B +39 B (13%) ⚠️
build/edit-site/index.js 10.1 kB -1 B
build/edit-widgets/index.js 7.17 kB -2 B (0%)
build/editor/editor-styles-rtl.css 428 B +28 B (6%) 🔍
build/editor/editor-styles.css 431 B +29 B (6%) 🔍
build/editor/index.js 42.8 kB -4 B (0%)
build/format-library/index.js 6.95 kB +1 B
build/plugins/index.js 2.54 kB -2 B (0%)
build/redux-routine/index.js 2.84 kB +1 B
build/viewport/index.js 1.6 kB -2 B (0%)
build/warning/index.js 1.14 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/a11y/index.js 1.02 kB 0 B
build/annotations/index.js 3.4 kB 0 B
build/api-fetch/index.js 3.79 kB 0 B
build/autop/index.js 2.58 kB 0 B
build/blob/index.js 620 B 0 B
build/block-directory/index.js 6.03 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/editor-rtl.css 7.22 kB 0 B
build/block-library/editor.css 7.22 kB 0 B
build/block-library/theme-rtl.css 669 B 0 B
build/block-library/theme.css 671 B 0 B
build/block-serialization-default-parser/index.js 1.65 kB 0 B
build/block-serialization-spec-parser/index.js 3.1 kB 0 B
build/components/style-rtl.css 16.6 kB 0 B
build/components/style.css 16.5 kB 0 B
build/compose/index.js 6.21 kB 0 B
build/core-data/index.js 10.7 kB 0 B
build/data-controls/index.js 1.04 kB 0 B
build/date/index.js 5.36 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.05 kB 0 B
build/edit-post/index.js 92.9 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/style-rtl.css 5.02 kB 0 B
build/edit-site/style.css 5.02 kB 0 B
build/edit-widgets/style-rtl.css 3.74 kB 0 B
build/edit-widgets/style.css 3.73 kB 0 B
build/editor/style-rtl.css 3.49 kB 0 B
build/editor/style.css 3.49 kB 0 B
build/element/index.js 4.44 kB 0 B
build/escape-html/index.js 733 B 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 1.93 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 710 B 0 B
build/keyboard-shortcuts/index.js 2.3 kB 0 B
build/keycodes/index.js 1.7 kB 0 B
build/list-reusable-blocks/index.js 2.99 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 4.84 kB 0 B
build/notices/index.js 1.57 kB 0 B
build/nux/index.js 3.01 kB 0 B
build/nux/style-rtl.css 616 B 0 B
build/nux/style.css 613 B 0 B
build/primitives/index.js 1.5 kB 0 B
build/priority-queue/index.js 789 B 0 B
build/rich-text/index.js 14.5 kB 0 B
build/server-side-render/index.js 2.54 kB 0 B
build/shortcode/index.js 1.69 kB 0 B
build/token-list/index.js 1.28 kB 0 B
build/url/index.js 4.01 kB 0 B
build/wordcount/index.js 1.17 kB 0 B

compressed-size-action

@geriux geriux requested a review from mkevins April 6, 2020 14:08
@mkevins
Copy link
Copy Markdown
Contributor

mkevins commented Apr 8, 2020

Tested on Android (Pixel 3a) and iOS (iPhone 11), and it works as described. One thing I noticed (also visible in your screenshots) is that the horizonal alignment is not always consistent. E.g. on Android "Follow our Blog" is left-aligned, while on iOS it is center-aligned.

However, on the page preview, both are centered:

Android iOS
blog-template-page-preview-android blog-template-page-preview-ios

mkevins
mkevins reviewed Apr 8, 2020
View reviewed changes
packages/block-editor/src/components/page-template-picker/templates/blog.native.js Outdated
attributes: {
// translators: sample content for "Blog" page template
text: __( 'Subscribe' ),
align: 'center',
Copy link
Copy Markdown
Contributor

@mkevins mkevins Apr 8, 2020

Choose a reason for hiding this comment

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

I see that button should also be centered, but instead it seems to render left aligned. I didn't see the align attribute in the button block.json Do you know offhand if this is / will be a supported attribute of the button block?

Copy link
Copy Markdown
Member Author

@geriux geriux Apr 8, 2020

Choose a reason for hiding this comment

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

Oh yeah, we don't support that and we are working on Buttons block which is a wrapper that has Button in it and adds alignment capabilities. I'll remove the attribute.

Copy link
Copy Markdown
Member Author

@geriux geriux Apr 8, 2020

Choose a reason for hiding this comment

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

9e4ece6

@geriux
Copy link
Copy Markdown
Member Author

geriux commented Apr 8, 2020

Hey @mkevins ! 👋 Thanks for reviewing!

Tested on Android (Pixel 3a) and iOS (iPhone 11), and it works as described. One thing I noticed (also visible in your screenshots) is that the horizonal alignment is not always consistent. E.g. on Android "Follow our Blog" is left-aligned, while on iOS it is center-aligned.

Nice catch =) so there's an issue on Android where we don't support alignments yet, there's work on it in progress though. On iOS it renders correctly.

@mkevins mkevins self-requested a review April 8, 2020 22:30
mkevins
mkevins approved these changes Apr 8, 2020
View reviewed changes
Copy link
Copy Markdown
Contributor

@mkevins mkevins left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Approved with 9e4ece6. Nice work!

@mkevins mkevins merged commit d85ea0c into master Apr 8, 2020
@mkevins mkevins deleted the rnmobile/blog-layout branch April 8, 2020 22:36
@github-actions github-actions bot added this to the Gutenberg 7.9 milestone Apr 8, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mkevins mkevins mkevins approved these changes

Assignees

No one assigned

Labels

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

Milestone

Gutenberg 7.9

Development

Successfully merging this pull request may close these issues.

2 participants

@geriux @mkevins