WIP: Social links block. #14855

nicolad · 2019-04-06T07:15:54Z

Description

Implements: #1873

References

slack discussion
Prototype

How has this been tested?

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.

Soean · 2019-04-09T09:39:49Z

I haven't tested it in the editor yet, but we should follow #14770 and add a block.json file for new blocks.

mapk · 2019-04-10T22:48:37Z

@nicolad thanks for taking this on!

I tried testing this PR and couldn't get through it. Here's a screencast of my experience. I'm also aware this is probably a work in progress so feel free to ignore my comments right now.

A couple design notes:

The block icon should not be a social media site. Maybe try a "sharing" icon like: https://material.io/tools/icons/?icon=share&style=baseline
The + button next to the URL is a bit confusing for me. Does it submit the URL I entered? or does it add a new line? I couldn't get it to work.

…block/social-links

nicolad · 2019-04-12T08:24:30Z

I haven't tested it in the editor yet, but we should follow #14770 and add a block.json file for new blocks.

Thank you for review, had added block.json.

nicolad · 2019-04-12T08:30:45Z

@nicolad thanks for taking this on!

I tried testing this PR and couldn't get through it. Here's a screencast of my experience. I'm also aware this is probably a work in progress so feel free to ignore my comments right now.

A couple design notes:

The block icon should not be a social media site. Maybe try a "sharing" icon like: https://material.io/tools/icons/?icon=share&style=baseline

The + button next to the URL is a bit confusing for me. Does it submit the URL I entered? or does it add a new line? I couldn't get it to work.

Yes, it is in progress. Was a little busy and did not had the chance to make a lot of things here. Will have more time upcoming days and will try to do more.
Anyway, thanks for the feedback it's always great to have an additional pair of eyes.

Soean · 2019-04-12T08:38:27Z

Thank you for review, had added block.json.

Looks good, save should also live in its own file, see #14882 for example.

…block/social-links

nicolad · 2019-04-12T12:19:47Z

packages/block-library/src/social/index.js

+
+	icon,
+
+	category: 'layout',


What will be the better category fit?

nicolad · 2019-04-12T12:41:05Z

Thanks @Soean, updated.
I started doing this block by copying button block.
Could you please suggest other suitable blocks at which I can take a look at the implementation?

CalumChilds · 2019-04-18T04:13:26Z

I think the icon shouldn't be the Facebook logo, as people would think it is a Facebook-specific block. Instead, I recommend replacing it with a Share icon.

nicolad · 2019-04-30T20:52:02Z

packages/block-library/src/social-links/edit.js

+		return {
+			addLink() {
+				const created = createBlock( 'core/social-link', { verticalAlignment: 'top' } );
+				dispatch( 'core/editor' ).insertBlock( created, undefined, clientId );


Hello @gziolo, on this action I want to create a sub-child, for some reason it won't fire the needed result.
I am not sure what I am doing wrong here.

It seems that insertBlock isn't the best approach here, tried a different solution, based of columns block approach: 792401a

karmatosed · 2019-07-05T21:02:57Z

As this had needs design feedback, I thought I would give the current PR a go. I am not sure if something went wrong as the experience I don't think was what intended. For example on loading I saw this:

Then I get:

I'd be happy to test again but I do think either something is a little weird my end or the PR needs a little nurturing. If this is a 'me' issue, I would be happy to review based on screenshots of the flow.

…cial-links

nicolad · 2019-07-06T10:14:38Z

hey @karmatosed, you're right - this PR needs a little bit of nurture since it's still a work in progress. I will let you know when it's ready to be reviewed. Thanks.

…cial-links

mkaz · 2019-08-01T23:22:52Z

@nicolad here is a quick GIF demo of what I have currently in place. I put that together prior to seeing the prototype from #1873

I have it as a separate plugin which is pretty rough with the interactions. I can put it up somewhere if we want iterate, but after looking at the prototype in that issue and your work, maybe I can combine the two efforts to some degree

mkaz · 2019-08-02T17:23:17Z

@nicolad if it is alright with you, I'm going to combine our efforts, though I'm not quite sure how.
I don't think I can push to your branch, and not sure if you can push to one I create here.

nicolad · 2019-08-03T14:33:42Z

Hello @mkaz I am closing this PR in favor of new-one based on master branch: #16897

nicolad added 2 commits April 6, 2019 10:14

WIP: Added social links block.

b42fe2b

Merge branch 'master' into block/social-links

d01a9ba

nicolad requested review from ajitbohra, chrisvanpatten, gziolo, jorgefilipecosta, noisysocks, notnownikki, Soean, talldan and youknowriad as code owners April 6, 2019 07:15

gziolo added [Type] Task Issues or PRs that have been broken down into an individual action to take [Feature] Blocks Overall functionality of blocks labels Apr 9, 2019

Soean added the New Block Suggestion for a new block label Apr 9, 2019

nicolad added 3 commits April 12, 2019 10:01

Merge branch 'master' of https://github.com/WordPress/gutenberg into …

df63415

…block/social-links

Social Links block: added block.json

52d9dc8

Added icon.

369a52e

Merge branch 'master' of https://github.com/WordPress/gutenberg into …

5667502

…block/social-links

nicolad commented Apr 12, 2019

View reviewed changes

Abstracted save.

5a41600

nicolad added 2 commits April 20, 2019 14:56

Merge branch 'master' into block/social-links

4077d1c

WIP: Refactored social links according to columns block.

89d85c7

nicolad commented Apr 30, 2019

View reviewed changes

gziolo requested a review from a team May 21, 2019 14:29

nicolad added 2 commits June 30, 2019 13:44

Merge branch 'master' into block/social-links

29f6ead

Replaced insertBlock with replaceInnerBlocks.

792401a

nicolad mentioned this pull request Jun 30, 2019

Consider replaceInnerBlocks instead of insertBlock for accordion godaddy-wordpress/coblocks#628

Closed

karmatosed added the Needs Design Feedback Needs general design feedback. label Jul 5, 2019

Merge branch 'master' of github.com:WordPress/gutenberg into block/so…

49060c0

…cial-links

nicolad added 2 commits July 6, 2019 16:31

Added setUrl.

22716ad

Added placeholder icon.

a30b998

nicolad self-assigned this Jul 10, 2019

noisysocks added the [Status] In Progress Tracking issues with work in progress label Jul 10, 2019

nicolad added 3 commits July 30, 2019 15:40

Merge branch 'master' of github.com:WordPress/gutenberg into block/so…

76dfeed

…cial-links

Added styles settings.

2f33362

Check if URL is a facebook.

2bf588d

nicolad closed this Aug 3, 2019

nicolad removed their assignment Sep 29, 2019

nicolad added [Status] Not Implemented Issue/PR we will (likely) not implement. and removed [Status] In Progress Tracking issues with work in progress labels Aug 6, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WIP: Social links block. #14855

WIP: Social links block. #14855

nicolad commented Apr 6, 2019 •

edited

Loading

Soean commented Apr 9, 2019

mapk commented Apr 10, 2019

nicolad commented Apr 12, 2019

nicolad commented Apr 12, 2019 •

edited

Loading

Soean commented Apr 12, 2019

nicolad Apr 12, 2019

Soean Apr 12, 2019

nicolad commented Apr 12, 2019

CalumChilds commented Apr 18, 2019

nicolad Apr 30, 2019

nicolad Jun 30, 2019

karmatosed commented Jul 5, 2019

nicolad commented Jul 6, 2019 •

edited

Loading

mkaz commented Aug 1, 2019

mkaz commented Aug 2, 2019

nicolad commented Aug 3, 2019 •

edited

Loading

WIP: Social links block. #14855

WIP: Social links block. #14855

Conversation

nicolad commented Apr 6, 2019 • edited Loading

Description

References

How has this been tested?

Screenshots

Types of changes

Checklist:

Soean commented Apr 9, 2019

mapk commented Apr 10, 2019

nicolad commented Apr 12, 2019

nicolad commented Apr 12, 2019 • edited Loading

Soean commented Apr 12, 2019

nicolad Apr 12, 2019

Choose a reason for hiding this comment

Soean Apr 12, 2019

Choose a reason for hiding this comment

nicolad commented Apr 12, 2019

CalumChilds commented Apr 18, 2019

nicolad Apr 30, 2019

Choose a reason for hiding this comment

nicolad Jun 30, 2019

Choose a reason for hiding this comment

karmatosed commented Jul 5, 2019

nicolad commented Jul 6, 2019 • edited Loading

mkaz commented Aug 1, 2019

mkaz commented Aug 2, 2019

nicolad commented Aug 3, 2019 • edited Loading

nicolad commented Apr 6, 2019 •

edited

Loading

nicolad commented Apr 12, 2019 •

edited

Loading

nicolad commented Jul 6, 2019 •

edited

Loading

nicolad commented Aug 3, 2019 •

edited

Loading