-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Block: social links. #16897
Changes from all commits
a49dc60
3d330ca
6e6f3f1
f629002
1e9ffbc
a28813b
9e112c2
7abaaa4
0ec6188
6e7bce4
5b806af
2993877
a8e2e30
ed81c23
37fa3ff
f501f0a
91fe987
3e31b4a
165c26b
516295d
e3a8e96
ab82100
8fa8775
acac302
bbf1bc8
2e5b26a
6fc8769
50202b4
4cab94e
872ea0b
27988e3
35fe9aa
16cd709
a11fea9
42a8fdd
aaaee8c
5891e55
230e663
4c5916f
386b323
b129a69
ff35ed1
168784a
2793b8f
7cfda72
940cb42
a409c58
f342eca
72d8acf
06aafe3
3578260
fc1caf2
4f8a0bc
e777dd5
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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"> | ||
<input type="text" | ||
value={ url } | ||
onChange={ ( event ) => setAttributes( { url: event.target.value } ) } | ||
placeholder={ __( 'Enter Address' ) } | ||
/> | ||
</div> | ||
<IconButton icon="editor-break" label={ __( 'Apply' ) } type="submit" /> | ||
</form> | ||
</URLPopover> | ||
) } | ||
</Button> | ||
); | ||
}; | ||
|
||
export default SocialLinkEdit; |
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; | ||
} |
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> | ||
); |
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> | ||
); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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> | ||
); |
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> | ||
); |
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> | ||
); |
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> | ||
); |
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> | ||
); |
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> | ||
); |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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> | ||
); |
There was a problem hiding this comment.
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 affectURLInput
.https://github.com/WordPress/gutenberg/blob/master/docs/contributors/coding-guidelines.md#naming