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

Block: social links. #16897

Merged
merged 54 commits into from Sep 6, 2019

Conversation

@nicolad
Copy link
Member

commented Aug 3, 2019

Description

Fixes: #1873

References

slack discussion
Prototype

How has this been tested?

  • Add new Social Links block
  • Confirm you can insert multiple links
  • Icons and links show on view
  • Can create and use block as Author permission

Screenshots

(see updates in thread)

Types of changes

Adds a new block for inserting social media links. The block will try to match the proper icon to the URL typed in, or the user can select the icon by clicking and selecting from a list.

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.
@nicolad

This comment has been minimized.

Copy link
Member Author

commented Aug 3, 2019

Hello @mkaz, thank you for your comments on the previous PR.
I opened this PR to make it possible to combine our efforts. Please let me know what is the branch name you are working on, so I can improve this block based on that and then have a better starting point.

@nicolad nicolad referenced this pull request Aug 3, 2019
0 of 5 tasks complete
@mkaz

This comment has been minimized.

Copy link
Member

commented Aug 5, 2019

I made a fork off your old code base and created a PR to show the difference.
nicolad#1

If you like I can update and push that to this branch, I wanted you to review before I combined. It is still a work in progress, we need some clarification on what icon set to use.

I like your idea of filling in the icon automatically based on the URL. I think we might be able to do both, if no icon is picked and the user types twitter.com... than the twitter icon shows; but also allow the user to click and set an icon if not found or they want to change.

@nicolad

This comment has been minimized.

Copy link
Member Author

commented Aug 5, 2019

I made a fork off your old code base and created a PR to show the difference.
nicolad#1

If you like I can update and push that to this branch, I wanted you to review before I combined. It is still a work in progress, we need some clarification on what icon set to use.

I like your idea of filling in the icon automatically based on the URL. I think we might be able to do both, if no icon is picked and the user types twitter.com... than the twitter icon shows; but also allow the user to click and set an icon if not found or they want to change.

Thank you for the help @mkaz, I will check and apply those changes to the current PR.

@mkaz

This comment has been minimized.

Copy link
Member

commented Aug 5, 2019

Also, I was just pointed to our set of social icons we can use here:
https://github.com/Automattic/social-logos

@nicolad

This comment has been minimized.

Copy link
Member Author

commented Aug 5, 2019

Also, I was just pointed to our set of social icons we can use here:
https://github.com/Automattic/social-logos

I saw that in the prototype we have 2 styles, but social-logos don't have that option available(at least I didn't saw this being exposed via props).
image

@karmatosed karmatosed added this to To Do in Blocks Aug 5, 2019
@karmatosed karmatosed moved this from To Do to In Progress in Blocks Aug 5, 2019
@mkaz

This comment has been minimized.

Copy link
Member

commented Aug 5, 2019

@nicolad Yeh, I saw that. Styles is an extra piece I think we can add on, once we get the link builder and picker in place and working well. I think we can add additional enhancements, also choosing color or matching theme, circles, etc...

@mkaz

This comment has been minimized.

Copy link
Member

commented Aug 7, 2019

I just pushed up a set of changes which should be workable. There are still a lot of polish and refinements to be made to the block, but general UI should be in a testable set.

@nicolad nicolad requested review from gziolo, nerrad and ntwb as code owners Aug 12, 2019
@mkaz

This comment has been minimized.

Copy link
Member

commented Aug 12, 2019

I think this is at a pretty good point for a design review. The interaction with InnerBlocks and hiding and showing URL fiels based on selection is still not quite correct, but I'm not sure what direction to go, since there are two fields icon/url that can be set per link.

@mapk, @melchoyce, and/or @karmatosed you all commented on the previous PR and issue. So if you are still interested, or any other designer input is welcome.

@mkaz mkaz force-pushed the block/social-links branch from 42e8ad0 to 8f8ed22 Aug 12, 2019
@gziolo

This comment has been minimized.

Copy link
Member

commented Aug 13, 2019

@matias, @youknowriad and @mapk - how much individual Social Link block and Logo block (#16484) differ conceptually? I guess it's fine to proceed as two independent items, but this is another case where we should be thinking about having a block which depending on context could behave slightly different. I have no idea yet how this could be materialized but definitely something we should thing about :)

packages/block-library/src/index.js Outdated Show resolved Hide resolved
const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
const { icon, url } = attributes;

const classes = classNames( 'wp-social-icon', `wp-social-icon-${ icon }` );

This comment has been minimized.

Copy link
@gziolo

gziolo Aug 13, 2019

Member

Is this something we want to maintain on WordPress core scope from now on? At the moment corresponding styles will be loaded only together with the block.

This comment has been minimized.

Copy link
@mkaz

mkaz Aug 16, 2019

Member

I'm still not sure I understand this, this is how I would implement in a plugin, not quite sure how we should for core. Open to any suggestions

packages/block-library/src/social-links/index.js Outdated Show resolved Hide resolved
@melchoyce

This comment has been minimized.

Copy link
Contributor

commented Aug 13, 2019

@gziolo Any chance I could get you to take a screen capture of the block for reference?

@apeatling

This comment has been minimized.

Copy link
Contributor

commented Aug 29, 2019

Thinking about this more, it would cause an issue with deleting a URL, and then hitting the delete key one too many times and accidentally deleting the icon.

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2019

Created a ticket for making a generic prop for the minimal child block UI: #17267

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2019

Polished a little bit:

links

Also, @mkaz it is, as Andy suggests, a little hard to delete a block. Would it be possible so making it so that clicking a social link selects it (so when you press delete it disappears), but the URL field does pop out, it just doesn't have focus?

@mtias

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2019

but the URL field does pop out, it just doesn't have focus?

This is an accessibility affordance of the dropdown in general, I think, as opening it has to move the focus. What I think could be better would be moving the URL to the toolbar, since using child blocks now makes that a lot more ergonomic and scalable (particular for mobile). But we can explore this separately.

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2019

Cool, I'll make some tickets. Here's a quick mockup:

immediate

Also posted an alternate future version here: #17267 (comment)

@jasmussen

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2019

Okay as you can tell, I've now created a bunch of links for followup issues. These are all features/enhancements that can be explored separately, on their own cadence, and some of them likely need a little discussion first.

  • Additional flex properties for Social Links and Buttons alignments in inspector: #17275
  • Absorb child UI: #17267
  • Allow plugins to add new logos: #17277
  • Allow plugins to change social logos defaults: #17278
  • Add sizing controls to the icons: #17276

With these ideas tracked, we ensure nothing falls off the map if we go ahead and review and hopefully merge this one ;)

@mkaz

This comment has been minimized.

Copy link
Member

commented Aug 30, 2019

I additionally created the ticket #17280 for customizing the InnerBlocks block inserter

@jasmussen jasmussen requested review from nosolosw and WordPress/gutenberg-core Sep 4, 2019
Dig it.

Co-Authored-By: Andrés <nosolosw@users.noreply.github.com>
Copy link
Member

left a comment

Code-wise this is 👍

@mkaz mkaz merged commit f4406ed into master Sep 6, 2019
2 checks passed
2 checks passed
pull-request-automation
Details
Travis CI - Pull Request Build Passed
Details
@mkaz mkaz deleted the block/social-links branch Sep 6, 2019
@youknowriad youknowriad added this to the Gutenberg 6.5 milestone Sep 14, 2019
dd32 pushed a commit to dd32/gutenberg that referenced this pull request Sep 27, 2019
* Added social links.

* Applied changes suggested by Marcus Kazmierczak.

* Add social list of icons, SVGs in stylsheets

Initially add SVG as background images to get UX down.  We probably will
want to use real SVGs if possible to give more control over the color,
fill, stroke, etc...

Add listing of icons and associated matching domain/text. Automatically
check if URL entered matches and select icon.

* Add fixture files

* Alignment cleanup

* Add icon picker, to pick icon

* Move attributes to block.json

* Move singular social-link to top-level

* Pass parameter, dont use data-icon

I went done the wrong path, and took far too long to realize it.

* Move social-link CSS to own scss

* Switch inner-blocks to flex to inline

* Add social inks to block transforms e2e tests

* Show icons when block inserted, click to select

Removes switching icon based on URL typed because someone is
selecting the icon first. This makes it harder to change an icon
after the fact, will require delete and insert.

* Improve inserting slightly

- Remove text link, just use icon button (+)

- Start with template, so you dont have to click (+) after inserting
block, you immediately select the icon

* Display URLInput Popover on insert

Switches URLInput field to Popover so it can be controlled to display
on insert. This allows the user to know they have to fill in the URL for
the icon and removes an extra click on initial insert to set.

* Make progress towards minimal UI.

- This removes margins, paddings, and lots of UI from child blocks. It also adds comments that we should look at refactoring this away in a separate PR that makes it a prop on a parent container.
- This tweaks the layout a little bit, so frontend and backend match, and adds a circle around the social icons.

* Refactor Social Links to create individual blocks

Creates individual blocks for each social site. This uses the standard
InnerBlocks appender and display to show icon/site to select. Not only
does this use a standard widget, it benefits by getting search
capabilities.

Modeled after the embed include, however each of the sites are not a
"public" block shown in the inserter, but only seen when using the
Social Links block. There would be confusion using the inserter with
two entries for example adding a link to Twitter vs. embedding a Tweet

* Add is-incomplete class for empty URL

- Adds wp-social-icon__is-incomplete class to social icon
block if the URL is not set.

- Checks for URL on save and does not include icon if not set

* Show default icon, set icon attribute fixes save

* Polish appender and inactive state.

* Remove unnecessary fragment

* Convert icons over to React components, show in inserter

* Clean up

- standardize on social-link naming, fix CSS
- use icon attribute set as default in register

* Tidy things up, rename, consistent

- Update icon names to component case
- Use IconComponents in edit view
- Updates variables so site is for sites, icon is for icons ;-)
- Switch to use <ul> and <li> for markup

* Size icons correctly, front and back. Add focus style.

* Add colors.

* Add style variation for icon only.

* Hide incomplete link if parent or child not selected

* Remove a couple of icons. Comment out for now.

* Improve URLInpout, switch to URLPopover

* Update and fix tests, get to green

- Add tests for individual social link blocks
- Generate fixtures
- Add block transforms (Group)
- PHP has lint rules too

* Update facebook icon and instagram colors.

* Polish, add variation, bugfix

- This adds explicit widths heights to SVGs, fixing the "giant svg" issue.
- It adds colors to the now called "Logos Only" variation
- It improves the snapchat style
- It adds a pill variation

* Polish, and actually remove icons.

This removes some comments.

It restores some icons, but it permanently removes others:

- Apple
- Slideshare
- Stumbleupon
- Digg

* Fix URL popover.

* This improves the preview.

* Try a new "unselected state".

* Apply suggestions from code review

Thanks for taking the time and reviewing

Co-Authored-By: Daniel Richards <daniel.richards@automattic.com>

* Touch up remaining user interactions

- Add WordPress as default logo, so does not collapse to nothing
- Per @talldan review, add preventDefault on submit
- Clean up removed icons
- Fix ! url logic

* Hit area & frontend refinement.

* Remove abbreviation in variable name

* Remove apple, digg, slideshare, stumbleupon from register

* Add e2e tests for dropbox, google, meetup, yelp

* Don't open URL popover by default, requires click in

* Fix e2e-test case fixtures

* Make icons in the "logos only" style bigger.

* Remove save, using server-side render so not needed

* Comment polish, remove redundant rule, fix gray.

* Remove TODO comment, icon issue solved

* Update e2e tests with pure server-side rendering

* Polish. Remove obsolete code, add generic colors.

* Add centering.

* Update packages/block-library/src/social-link/edit.js

Dig it.

Co-Authored-By: Andrés <nosolosw@users.noreply.github.com>

* Remove duplicate icon definition
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.