From dc5731d22f921f210245cdaaddd12762b1dd07cc Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 24 Jan 2020 15:05:42 -0800 Subject: [PATCH] Default style proof-of-concept --- .../block-library/src/social-link/edit.js | 6 +- .../block-library/src/social-link/index.js | 2 + .../block-library/src/social-link/index.php | 1 - .../block-library/src/social-link/save.js | 23 ++++++ .../block-library/src/social-link/style.scss | 79 +++++++++++++++++++ .../block-library/src/social-links/style.scss | 38 --------- packages/block-library/src/style.scss | 1 + 7 files changed, 108 insertions(+), 42 deletions(-) create mode 100644 packages/block-library/src/social-link/save.js create mode 100644 packages/block-library/src/social-link/style.scss diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js index 41e97d4aed2275..bb1f1f1eb3ce5e 100644 --- a/packages/block-library/src/social-link/edit.js +++ b/packages/block-library/src/social-link/edit.js @@ -19,7 +19,7 @@ import { __, sprintf } from '@wordpress/i18n'; /** * Internal dependencies */ -import { getIconBySite, getNameBySite } from './social-list'; +import { getNameBySite } from './social-list'; const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => { const { url, site, label } = attributes; @@ -31,7 +31,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => { ); // Import icon. - const IconComponent = getIconBySite( site ); + const socialLinkName = getNameBySite( site ); return ( @@ -52,7 +52,7 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => { className={ classes } onClick={ () => setPopover( true ) } > - + { isSelected && showURLPopover && ( setPopover( false ) } diff --git a/packages/block-library/src/social-link/index.js b/packages/block-library/src/social-link/index.js index 5b23b9c3bfc307..32e967f06479ae 100644 --- a/packages/block-library/src/social-link/index.js +++ b/packages/block-library/src/social-link/index.js @@ -7,6 +7,7 @@ import { __ } from '@wordpress/i18n'; * Internal dependencies */ import edit from './edit'; +import save from './save'; import socialList from './social-list'; const commonAttributes = { @@ -17,6 +18,7 @@ const commonAttributes = { html: false, }, edit, + save, }; // Create individual blocks out of each site in social-list.js diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php index ae8b5e97bc952f..cb81faa0e08171 100644 --- a/packages/block-library/src/social-link/index.php +++ b/packages/block-library/src/social-link/index.php @@ -88,7 +88,6 @@ function register_block_core_social_link() { 'type' => 'string', ), ), - 'render_callback' => 'render_core_social_link', ) ); } diff --git a/packages/block-library/src/social-link/save.js b/packages/block-library/src/social-link/save.js new file mode 100644 index 00000000000000..49c231fd3276f5 --- /dev/null +++ b/packages/block-library/src/social-link/save.js @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import classNames from 'classnames'; + +const SocialLinkSave = ( { attributes } ) => { + const { url, site, label } = attributes; + const classes = classNames( + 'wp-social-link', + 'wp-social-link-' + site, + { 'wp-social-link__is-incomplete': ! url }, + ); + + return ( +
  • + + { label } + +
    • + ); +}; + +export default SocialLinkSave; diff --git a/packages/block-library/src/social-link/style.scss b/packages/block-library/src/social-link/style.scss new file mode 100644 index 00000000000000..e40c170d6bc054 --- /dev/null +++ b/packages/block-library/src/social-link/style.scss @@ -0,0 +1,79 @@ + +.wp-social-link { + display: block; + width: 36px; + height: 36px; + border-radius: 36px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized. + margin-right: 8px; + transition: transform 0.1s ease; + @include reduce-motion("transition"); + + a { + padding: 6px; + display: block; + line-height: 0; + transition: transform 0.1s ease; + } + + a, + a:hover, + a:active, + a:visited, + svg { + color: currentColor; + fill: currentColor; + + // Some themes add underlines, false underlines (via shadows), and borders to . + text-decoration: none; + border-bottom: 0; + box-shadow: none; + } + + &:hover { + transform: scale(1.1); + } + + // We use the inner element as a background for the icon. + em { + display: block; + width: 24px; + height: 24px; + text-indent: 100%; + overflow: hidden; + } +} + + +@mixin sociallink($logo, $color) { + // This is shown to IE11 and older browsers. + background-color: #fff; + box-shadow: 0 0 0 1px #000; + + em { + background: url($logo) no-repeat center center; + } + + @supports (mask-size: cover) or (-webkit-mask-size: cover) { + background-color: $color; + box-shadow: none; + + em { + background: #fff; + -webkit-mask: url($logo) no-repeat center center; + mask: url($logo) no-repeat center center; + -webkit-mask-size: cover; + mask-size: cover; + } + } +} + +.wp-social-link-mastodon { + @include sociallink( "https://cldup.com/a2oE4qAWQz.svg", #3288d4 ); +} +.wp-social-link-twitter { + @include sociallink( "https://cldup.com/JPmc-H2Egd.svg", #21a1f3 ); +} + +.wp-social-link-wordpress { + @include sociallink( "https://cldup.com/w4j97g2E1Y.svg", #3499cd ); +} diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 3bfa4992e224a8..f40ae8d9573e2a 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -5,45 +5,8 @@ padding-right: 0; // Some themes give all