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] Social icons #23017

Merged
merged 39 commits into from
Jul 9, 2020
Merged

[RNMobile] Social icons #23017

merged 39 commits into from
Jul 9, 2020

Conversation

lukewalczak
Copy link
Member

@lukewalczak lukewalczak commented Jun 9, 2020

Description

NOTE: That PR should be merged after #23299 since it's using the LinkSettings component coming from there.

NOTE: That PR should be merged after #23465

That PR introduces a new block called Social Icon.

Testing:

How has this been tested?

  1. Open mobile app
  2. Add Social Icons block

Expect: Social Icons is added with 4 icons, where WordPress icon is already fulfilled with the link and it's active (has product color)

  1. Press inactive icon eg. Facebook icon
  2. Press link icon in mobile toolbar above the keyboard
  3. Fill URL eg. facebook.com and Label
  4. Close sheet

Expect: Facebook social icon is active (has product color)

  1. Deselect Social Icons

Expect: Only active social icons left

  1. Open post preview
  2. Press the icon and check if forwarding to the link

Screenshots

  • light mode
active inactive
Screenshot 2020-06-05 at 16 32 44 Screenshot 2020-06-05 at 16 33 10
  • dark mode
active inactive
Screenshot 2020-06-05 at 16 32 25 Screenshot 2020-06-05 at 16 33 18
  • action sheet
android ios
Screenshot 2020-06-08 at 15 50 22 Screenshot 2020-06-08 at 15 54 12
  • URL sheet
android ios
Screenshot 2020-06-09 at 10 29 57 Screenshot 2020-06-09 at 10 27 34

Types of changes

New feature: Social Icons block

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 the [Block] Social Affects the Social Block - used to display Social Media accounts label Jun 9, 2020
@lukewalczak lukewalczak self-assigned this Jun 9, 2020
@github-actions
Copy link

github-actions bot commented Jun 9, 2020

Size Change: +19 B (0%)

Total Size: 1.14 MB

Filename Size Change
build/blocks/index.js 48.2 kB +19 B (0%)
ℹ️ 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.39 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 7.67 kB 0 B
build/block-directory/style-rtl.css 944 B 0 B
build/block-directory/style.css 945 B 0 B
build/block-editor/index.js 115 kB 0 B
build/block-editor/style-rtl.css 10.8 kB 0 B
build/block-editor/style.css 10.8 kB 0 B
build/block-library/editor-rtl.css 7.54 kB 0 B
build/block-library/editor.css 7.54 kB 0 B
build/block-library/index.js 130 kB 0 B
build/block-library/style-rtl.css 7.75 kB 0 B
build/block-library/style.css 7.76 kB 0 B
build/block-library/theme-rtl.css 728 B 0 B
build/block-library/theme.css 729 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/components/index.js 199 kB 0 B
build/components/style-rtl.css 15.9 kB 0 B
build/components/style.css 15.8 kB 0 B
build/compose/index.js 9.56 kB 0 B
build/core-data/index.js 11.4 kB 0 B
build/data-controls/index.js 1.29 kB 0 B
build/data/index.js 8.46 kB 0 B
build/date/index.js 5.38 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.23 kB 0 B
build/edit-navigation/index.js 10.8 kB 0 B
build/edit-navigation/style-rtl.css 1.08 kB 0 B
build/edit-navigation/style.css 1.08 kB 0 B
build/edit-post/index.js 304 kB 0 B
build/edit-post/style-rtl.css 5.59 kB 0 B
build/edit-post/style.css 5.58 kB 0 B
build/edit-site/index.js 16.6 kB 0 B
build/edit-site/style-rtl.css 3.03 kB 0 B
build/edit-site/style.css 3.03 kB 0 B
build/edit-widgets/index.js 9.35 kB 0 B
build/edit-widgets/style-rtl.css 2.45 kB 0 B
build/edit-widgets/style.css 2.45 kB 0 B
build/editor/editor-styles-rtl.css 537 B 0 B
build/editor/editor-styles.css 539 B 0 B
build/editor/index.js 45 kB 0 B
build/editor/style-rtl.css 3.78 kB 0 B
build/editor/style.css 3.78 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.72 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.56 kB 0 B
build/is-shallow-equal/index.js 709 B 0 B
build/keyboard-shortcuts/index.js 2.51 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.4 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.71 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

@lukewalczak lukewalczak marked this pull request as ready for review June 24, 2020 15:40
Copy link
Member

@geriux geriux left a comment

Choose a reason for hiding this comment

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

LGTM! Nice work @lukewalczak! 👏 Tested it on the demo app (iOS/Android) and also on WordPress iOS.

@lukewalczak lukewalczak modified the milestone: Future Jul 9, 2020
@lukewalczak lukewalczak merged commit d4bdb05 into master Jul 9, 2020
@lukewalczak lukewalczak deleted the rnmobile/social_links branch July 9, 2020 17:23
@github-actions github-actions bot added this to the Gutenberg 8.6 milestone Jul 9, 2020
@@ -434,7 +434,8 @@ export function createBlockWithFallback( blockNode ) {
if ( name && name.indexOf( 'core/social-link-' ) === 0 ) {
// Capture `social-link-wordpress` into `{"service":"wordpress"}`
attributes.service = name.substring( 17 );
name = 'core/social-link';
// Display social link service name for mobile platform
name = Platform.OS === 'web' ? 'core/social-link' : name;
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you help me understand why the deprecated name needs to be kept in mobile?

My worries:

  • Even though we should keep this compat shim for years to preserve older content, the idea is still to help move content forward by remapping block names, so that, when a user edits an old post, the Social Link markup is correctly updated.
  • The shim is likely to move out of the parser and be placed somewhere more sustainable (e.g. external compat file). This could be provided by JS filters or some other form of hooking. Once we do that, it would be important that the shim unconditionally reassigns name to core/social-link.

/cc @lukewalczak @hypest

Copy link
Member Author

@lukewalczak lukewalczak Jul 30, 2020

Choose a reason for hiding this comment

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

Hey @mcsf, that change was basically needed to display specific social icon name and its icon within toolbar on the mobile platform.
Without this change, it would be confusing as each social-icon would have the same label and the same icon after saving the post.

without parser change with parser change
Screenshot 2020-07-30 at 14 44 08 Screenshot 2020-07-30 at 14 45 01

The introduced change was the easiest solution to fulfil the requirement, but I understand your concerns and will double-check if we can achieve the same effect without parsers changes.

Copy link
Member Author

Choose a reason for hiding this comment

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

However, could you please elaborate more on:

The shim is likely to move out of the parser and be placed somewhere more sustainable (e.g. external compat file). This could be provided by JS filters or some other form of hooking. Once we do that, it would be important that the shim unconditionally reassigns name to core/social-link

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks for the context.

It's clear then that support for Block Variations needs to be improved so that those interactions can take into account attributes like a variation's title or icon.

For comparison, even on the Web we let the variation show in certain places and let the base type show in others, which is also a problem but less confusing than in the apps:

Captura de ecrã 2020-07-30, às 14 12 11

See open questions about variations: #16283 (comment)


However, could you please elaborate more on:

The shim is likely to move out of the parser […]

Sure. I'm referring to this comment by Grzegorz.


Context:

Copy link
Member Author

@lukewalczak lukewalczak Jul 30, 2020

Choose a reason for hiding this comment

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

Correct me if I'm wrong: I assume that the main goal is to revert that change and have equal HTML on both platforms?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yep, correct.

Copy link
Member Author

Choose a reason for hiding this comment

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

I've created a PR fixing that, please check it ✌️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Social Affects the Social Block - used to display Social Media accounts
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants