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.

Sign up for GitHub

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
Merged

Block: social links. #16897

Show file tree
Hide file tree
Changes from 52 commits
Commits
Show all changes
54 commits
Select commit Hold shift + click to select a range
a49dc60
Added social links.
nicolad Aug 3, 2019
3d330ca
Applied changes suggested by Marcus Kazmierczak.
nicolad Aug 5, 2019
6e6f3f1
Add social list of icons, SVGs in stylsheets
mkaz Aug 6, 2019
f629002
Add fixture files
mkaz Aug 12, 2019
1e9ffbc
Alignment cleanup
mkaz Aug 12, 2019
a28813b
Add icon picker, to pick icon
mkaz Aug 12, 2019
9e112c2
Move attributes to block.json
mkaz Aug 13, 2019
7abaaa4
Move singular social-link to top-level
mkaz Aug 14, 2019
0ec6188
Pass parameter, dont use data-icon
mkaz Aug 14, 2019
6e7bce4
Move social-link CSS to own scss
mkaz Aug 14, 2019
5b806af
Switch inner-blocks to flex to inline
mkaz Aug 14, 2019
2993877
Add social inks to block transforms e2e tests
mkaz Aug 16, 2019
a8e2e30
Show icons when block inserted, click to select
mkaz Aug 22, 2019
ed81c23
Improve inserting slightly
mkaz Aug 22, 2019
37fa3ff
Display URLInput Popover on insert
mkaz Aug 22, 2019
f501f0a
Make progress towards minimal UI.
Aug 22, 2019
91fe987
Refactor Social Links to create individual blocks
mkaz Aug 23, 2019
3e31b4a
Add is-incomplete class for empty URL
mkaz Aug 23, 2019
165c26b
Show default icon, set icon attribute fixes save
mkaz Aug 23, 2019
516295d
Polish appender and inactive state.
Aug 23, 2019
e3a8e96
Remove unnecessary fragment
mkaz Aug 23, 2019
ab82100
Convert icons over to React components, show in inserter
mkaz Aug 23, 2019
8fa8775
Clean up
mkaz Aug 23, 2019
acac302
Tidy things up, rename, consistent
mkaz Aug 23, 2019
bbf1bc8
Size icons correctly, front and back. Add focus style.
Aug 26, 2019
2e5b26a
Add colors.
Aug 26, 2019
6fc8769
Add style variation for icon only.
jasmussen Aug 26, 2019
50202b4
Hide incomplete link if parent or child not selected
mkaz Aug 26, 2019
4cab94e
Remove a couple of icons. Comment out for now.
jasmussen Aug 27, 2019
872ea0b
Improve URLInpout, switch to URLPopover
mkaz Aug 27, 2019
27988e3
Update and fix tests, get to green
mkaz Aug 27, 2019
35fe9aa
Update facebook icon and instagram colors.
Aug 28, 2019
16cd709
Polish, add variation, bugfix
Aug 28, 2019
a11fea9
Polish, and actually remove icons.
Aug 28, 2019
42a8fdd
Fix URL popover.
Aug 28, 2019
aaaee8c
This improves the preview.
Aug 28, 2019
5891e55
Try a new "unselected state".
Aug 28, 2019
230e663
Apply suggestions from code review
mkaz Aug 28, 2019
4c5916f
Touch up remaining user interactions
mkaz Aug 28, 2019
386b323
Hit area & frontend refinement.
jasmussen Aug 28, 2019
b129a69
Remove abbreviation in variable name
mkaz Aug 28, 2019
ff35ed1
Remove apple, digg, slideshare, stumbleupon from register
mkaz Aug 28, 2019
168784a
Add e2e tests for dropbox, google, meetup, yelp
mkaz Aug 28, 2019
2793b8f
Don't open URL popover by default, requires click in
mkaz Aug 28, 2019
7cfda72
Fix e2e-test case fixtures
mkaz Aug 28, 2019
940cb42
Make icons in the "logos only" style bigger.
jasmussen Aug 29, 2019
a409c58
Remove save, using server-side render so not needed
mkaz Aug 29, 2019
f342eca
Comment polish, remove redundant rule, fix gray.
jasmussen Aug 29, 2019
72d8acf
Remove TODO comment, icon issue solved
mkaz Aug 29, 2019
06aafe3
Update e2e tests with pure server-side rendering
mkaz Aug 29, 2019
3578260
Polish. Remove obsolete code, add generic colors.
jasmussen Aug 30, 2019
fc1caf2
Add centering.
jasmussen Aug 30, 2019
4f8a0bc
Update packages/block-library/src/social-link/edit.js
jasmussen Sep 6, 2019
e777dd5
Remove duplicate icon definition
mkaz Sep 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions lib/blocks.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ function gutenberg_reregister_core_block_types() {
'rss.php' => 'core/rss',
'shortcode.php' => 'core/shortcode',
'search.php' => 'core/search',
'social-link.php' => 'core/social-link',
'tag-cloud.php' => 'core/tag-cloud',
);

Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@
@import "./rss/editor.scss";
@import "./search/editor.scss";
@import "./shortcode/editor.scss";
@import "./social-link/editor.scss";
@import "./social-links/editor.scss";
@import "./spacer/editor.scss";
@import "./subhead/editor.scss";
@import "./table/editor.scss";
Expand Down
5 changes: 4 additions & 1 deletion packages/block-library/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,9 @@ import * as textColumns from './text-columns';
import * as verse from './verse';
import * as video from './video';
import * as tagCloud from './tag-cloud';

import * as classic from './classic';
import * as socialLinks from './social-links';
import * as socialLink from './social-link';

/**
* Function to register an individual block.
Expand Down Expand Up @@ -130,6 +131,8 @@ export const registerCoreBlocks = () => {
search,
separator,
reusableBlock,
socialLinks,
...socialLink.sites,
spacer,
subhead,
table,
Expand Down
65 changes: 65 additions & 0 deletions packages/block-library/src/social-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/**
* External dependencies
*/
import classNames from 'classnames';

/**
* WordPress dependencies
*/
import { URLPopover } from '@wordpress/block-editor';
import { useState } from '@wordpress/element';
import {
Button,
IconButton,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { getIconBySite } from './social-list';

const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
const { url, site } = attributes;
const [ showURLPopover, setPopover ] = useState( false );
const classes = classNames(
'wp-social-link',
'wp-social-link-' + site,
{ 'wp-social-link__is-incomplete': ! url },
);

// Import icon.
const IconComponent = getIconBySite( site );

return (
<Button
className={ classes }
onClick={ () => setPopover( true ) }
>
<IconComponent />
{ isSelected && showURLPopover && (
<URLPopover
onClose={ () => setPopover( false ) }
>
<form
className="block-editor-url-popover__link-editor"
onSubmit={ ( event ) => {
event.preventDefault();
setPopover( false );
} } >
<div className="editor-url-input block-editor-url-input">
Copy link
Member

Choose a reason for hiding this comment

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

Class names are not meant to be reused outside the component which defines them. In this case, we should go through the abstraction of the URLInput component, not use its classes directly. Or, alternatively, copy all of its styles to a class specific to the Social Link. These guidelines are meant to ensure that styles only apply within the context of a component. Otherwise, we risk future breakage on changes expected only to affect URLInput.

https://github.com/WordPress/gutenberg/blob/master/docs/contributors/coding-guidelines.md#naming

A component's class name should never be used outside its own folder (with rare exceptions such as _z-index.scss). If you need to inherit styles of another component in your own components, you should render an instance of that other component. At worst, you should duplicate the styles within your own component's stylesheet. This is intended to improve maintainability by treating individual components as the isolated abstract interface.

<input type="text"
value={ url }
onChange={ ( event ) => setAttributes( { url: event.target.value } ) }
placeholder={ __( 'Enter Address or Profile' ) }
jasmussen marked this conversation as resolved.
Show resolved Hide resolved
/>
</div>
<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" />
</form>
</URLPopover>
) }
</Button>
);
};

export default SocialLinkEdit;
31 changes: 31 additions & 0 deletions packages/block-library/src/social-link/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
.wp-social-link {
// Frontend outputs a link, backend a button. Both should have the same padding.
// Therefore, the following exactly matches the padding on the frontend link.
padding: 6px;
}

.wp-block-social-links.is-style-pill-shape .wp-social-link {
padding-left: 16px;
padding-right: 16px;
}

// The following two rules have their classes doubled to increase specificity.
.has-child-selected .wp-social-link__is-incomplete.wp-social-link__is-incomplete,
.is-selected .wp-social-link__is-incomplete.wp-social-link__is-incomplete {
background-color: $dark-gray-150;
}

.has-child-selected .is-style-logos-only .wp-social-link__is-incomplete.wp-social-link__is-incomplete,
.is-selected .is-style-logos-only .wp-social-link__is-incomplete.wp-social-link__is-incomplete {
color: $dark-gray-150;
background-color: transparent;
}


[data-type*="core/social-link-"].is-selected .wp-social-link, // Matches the selected social logo block.
.wp-social-link:focus {
box-shadow: 0 0 0 1px $white, 0 0 0 3px $blue-medium-500;

// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 2px solid transparent;
}
14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/amazon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/

import {
Path,
SVG,
} from '@wordpress/components';

export const AmazonIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M13.582,8.182C11.934,8.367,9.78,8.49,8.238,9.166c-1.781,0.769-3.03,2.337-3.03,4.644 c0,2.953,1.86,4.429,4.253,4.429c2.02,0,3.125-0.477,4.685-2.065c0.516,0.747,0.685,1.109,1.629,1.894 c0.212,0.114,0.483,0.103,0.672-0.066l0.006,0.006c0.567-0.505,1.599-1.401,2.18-1.888c0.231-0.188,0.19-0.496,0.009-0.754 c-0.52-0.718-1.072-1.303-1.072-2.634V8.305c0-1.876,0.133-3.599-1.249-4.891C15.23,2.369,13.422,2,12.04,2 C9.336,2,6.318,3.01,5.686,6.351C5.618,6.706,5.877,6.893,6.109,6.945l2.754,0.298C9.121,7.23,9.308,6.977,9.357,6.72 c0.236-1.151,1.2-1.706,2.284-1.706c0.584,0,1.249,0.215,1.595,0.738c0.398,0.584,0.346,1.384,0.346,2.061V8.182z M13.049,14.088 c-0.451,0.8-1.169,1.291-1.967,1.291c-1.09,0-1.728-0.83-1.728-2.061c0-2.42,2.171-2.86,4.227-2.86v0.615 C13.582,12.181,13.608,13.104,13.049,14.088z M20.683,19.339C18.329,21.076,14.917,22,11.979,22c-4.118,0-7.826-1.522-10.632-4.057 c-0.22-0.199-0.024-0.471,0.241-0.317c3.027,1.762,6.771,2.823,10.639,2.823c2.608,0,5.476-0.541,8.115-1.66 C20.739,18.62,21.072,19.051,20.683,19.339z M21.336,21.043c-0.194,0.163-0.379,0.076-0.293-0.139 c0.284-0.71,0.92-2.298,0.619-2.684c-0.301-0.386-1.99-0.183-2.749-0.092c-0.23,0.027-0.266-0.173-0.059-0.319 c1.348-0.946,3.555-0.673,3.811-0.356C22.925,17.773,22.599,19.986,21.336,21.043z" />
</SVG>
);
14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/bandcamp.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/

import {
Path,
SVG,
} from '@wordpress/components';

export const BandcampIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M15.27 17.289 3 17.289 8.73 6.711 21 6.711 15.27 17.289" />
</SVG>
);
14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/behance.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/chain.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/codepen.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/deviantart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/

import {
Path,
SVG,
} from '@wordpress/components';

export const DeviantartIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M 18.19 5.636 18.19 2 18.188 2 14.553 2 14.19 2.366 12.474 5.636 11.935 6 5.81 6 5.81 10.994 9.177 10.994 9.477 11.357 5.81 18.363 5.81 22 5.811 22 9.447 22 9.81 21.634 11.526 18.364 12.065 18 18.19 18 18.19 13.006 14.823 13.006 14.523 12.641 18.19 5.636z" />
</SVG>
);
14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/dribbble.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/

import {
Path,
SVG,
} from '@wordpress/components';

export const DribbbleIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M12,22C6.486,22,2,17.514,2,12S6.486,2,12,2c5.514,0,10,4.486,10,10S17.514,22,12,22z M20.434,13.369 c-0.292-0.092-2.644-0.794-5.32-0.365c1.117,3.07,1.572,5.57,1.659,6.09C18.689,17.798,20.053,15.745,20.434,13.369z M15.336,19.876c-0.127-0.749-0.623-3.361-1.822-6.477c-0.019,0.006-0.038,0.013-0.056,0.019c-4.818,1.679-6.547,5.02-6.701,5.334 c1.448,1.129,3.268,1.803,5.243,1.803C13.183,20.555,14.311,20.313,15.336,19.876z M5.654,17.724 c0.193-0.331,2.538-4.213,6.943-5.637c0.111-0.036,0.224-0.07,0.337-0.102c-0.214-0.485-0.448-0.971-0.692-1.45 c-4.266,1.277-8.405,1.223-8.778,1.216c-0.003,0.087-0.004,0.174-0.004,0.261C3.458,14.207,4.29,16.21,5.654,17.724z M3.639,10.264 c0.382,0.005,3.901,0.02,7.897-1.041c-1.415-2.516-2.942-4.631-3.167-4.94C5.979,5.41,4.193,7.613,3.639,10.264z M9.998,3.709 c0.236,0.316,1.787,2.429,3.187,5c3.037-1.138,4.323-2.867,4.477-3.085C16.154,4.286,14.17,3.471,12,3.471 C11.311,3.471,10.641,3.554,9.998,3.709z M18.612,6.612C18.432,6.855,17,8.69,13.842,9.979c0.199,0.407,0.389,0.821,0.567,1.237 c0.063,0.148,0.124,0.295,0.184,0.441c2.842-0.357,5.666,0.215,5.948,0.275C20.522,9.916,19.801,8.065,18.612,6.612z" />
</SVG>
);
14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/dropbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/

import {
Path,
SVG,
} from '@wordpress/components';

export const DropboxIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M12,6.134L6.069,9.797L2,6.54l5.883-3.843L12,6.134z M2,13.054l5.883,3.843L12,13.459L6.069,9.797L2,13.054z M12,13.459 l4.116,3.439L22,13.054l-4.069-3.257L12,13.459z M22,6.54l-5.884-3.843L12,6.134l5.931,3.663L22,6.54z M12.011,14.2l-4.129,3.426 l-1.767-1.153v1.291l5.896,3.539l5.897-3.539v-1.291l-1.769,1.153L12.011,14.2z" />
</SVG>
);
14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/etsy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/

import {
Path,
SVG,
} from '@wordpress/components';

export const EtsyIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M9.16033,4.038c0-.27174.02717-.43478.48913-.43478h6.22283c1.087,0,1.68478.92391,2.11957,2.663l.35326,1.38587h1.05978C19.59511,3.712,19.75815,2,19.75815,2s-2.663.29891-4.23913.29891h-7.962L3.29076,2.163v1.1413L4.731,3.57609c1.00543.19022,1.25.40761,1.33152,1.33152,0,0,.08152,2.71739.08152,7.20109s-.08152,7.17391-.08152,7.17391c0,.81522-.32609,1.11413-1.33152,1.30435l-1.44022.27174V22l4.2663-.13587h7.11957c1.60326,0,5.32609.13587,5.32609.13587.08152-.97826.625-5.40761.70652-5.89674H19.7038L18.644,18.52174c-.84239,1.90217-2.06522,2.038-3.42391,2.038H11.1712c-1.3587,0-2.01087-.54348-2.01087-1.712V12.65217s3.0163,0,3.99457.08152c.76087.05435,1.22283.27174,1.46739,1.33152l.32609,1.413h1.16848l-.08152-3.55978.163-3.587H15.02989l-.38043,1.57609c-.24457,1.03261-.40761,1.22283-1.46739,1.33152-1.38587.13587-4.02174.1087-4.02174.1087Z" />
</SVG>
);
14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/facebook.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/

import {
Path,
SVG,
} from '@wordpress/components';

export const FacebookIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z" />
</SVG>
);
14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/feed.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/

import {
Path,
SVG,
} from '@wordpress/components';

export const FeedIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M2,8.667V12c5.515,0,10,4.485,10,10h3.333C15.333,14.637,9.363,8.667,2,8.667z M2,2v3.333 c9.19,0,16.667,7.477,16.667,16.667H22C22,10.955,13.045,2,2,2z M4.5,17C3.118,17,2,18.12,2,19.5S3.118,22,4.5,22S7,20.88,7,19.5 S5.882,17,4.5,17z" />
</SVG>
);
14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/fivehundredpx.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 14 additions & 0 deletions packages/block-library/src/social-link/icons/flickr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/**
* WordPress dependencies
*/

import {
Path,
SVG,
} from '@wordpress/components';

export const FlickrIcon = ( ) => (
<SVG width="24" height="24" viewBox="0 0 24 24" version="1.1">
<Path d="M6.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5S9.25,7,6.5,7z M17.5,7c-2.75,0-5,2.25-5,5s2.25,5,5,5s5-2.25,5-5 S20.25,7,17.5,7z" />
</SVG>
);
Loading