From b42fe2ba9399b40cb3c991702a9717f3f0850fb9 Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Tue, 2 Apr 2019 11:02:10 +0300 Subject: [PATCH 01/10] WIP: Added social links block. --- packages/block-library/src/index.js | 2 + packages/block-library/src/social/edit.js | 108 ++++++++++++++++++ packages/block-library/src/social/index.js | 109 +++++++++++++++++++ packages/block-library/src/social/style.scss | 56 ++++++++++ 4 files changed, 275 insertions(+) create mode 100644 packages/block-library/src/social/edit.js create mode 100644 packages/block-library/src/social/index.js create mode 100644 packages/block-library/src/social/style.scss diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 23b8bb52d33f45..59a72f2d635eb9 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -47,6 +47,7 @@ import * as search from './search'; import * as section from './section'; import * as separator from './separator'; import * as shortcode from './shortcode'; +import * as social from './social'; import * as spacer from './spacer'; import * as subhead from './subhead'; import * as table from './table'; @@ -110,6 +111,7 @@ export const registerCoreBlocks = () => { section, separator, reusableBlock, + social, spacer, subhead, table, diff --git a/packages/block-library/src/social/edit.js b/packages/block-library/src/social/edit.js new file mode 100644 index 00000000000000..8d0b0349d957e4 --- /dev/null +++ b/packages/block-library/src/social/edit.js @@ -0,0 +1,108 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { + Component, + Fragment, +} from '@wordpress/element'; +import { compose } from '@wordpress/compose'; +import { + Dashicon, + IconButton, +} from '@wordpress/components'; +import { + URLInput, + ContrastChecker, + InspectorControls, + withColors, + PanelColorSettings, +} from '@wordpress/block-editor'; + +class SocialLinksEdit extends Component { + constructor() { + super( ...arguments ); + this.nodeRef = null; + this.bindRef = this.bindRef.bind( this ); + } + + bindRef( node ) { + if ( ! node ) { + return; + } + this.nodeRef = node; + } + + render() { + const { + attributes, + backgroundColor, + textColor, + setBackgroundColor, + setTextColor, + fallbackBackgroundColor, + fallbackTextColor, + setAttributes, + isSelected, + className, + } = this.props; + + const { + url, + title, + } = attributes; + + return ( + +
+ Social media account address: + + + + + +
+ { isSelected && ( +
event.preventDefault() }> + + setAttributes( { url: value } ) } + /> + + + ) } +
+ ); + } +} + +export default compose( [ + withColors( 'backgroundColor', { textColor: 'color' } ), +] )( SocialLinksEdit ); diff --git a/packages/block-library/src/social/index.js b/packages/block-library/src/social/index.js new file mode 100644 index 00000000000000..d15dd1c04f9a1f --- /dev/null +++ b/packages/block-library/src/social/index.js @@ -0,0 +1,109 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { + RichText, + getColorClassName, +} from '@wordpress/block-editor'; + +/** + * Internal dependencies + */ +import edit from './edit'; + +const blockAttributes = { + url: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'href', + }, + title: { + type: 'string', + source: 'attribute', + selector: 'a', + attribute: 'title', + }, + text: { + type: 'string', + source: 'html', + selector: 'a', + }, + backgroundColor: { + type: 'string', + }, + textColor: { + type: 'string', + }, + customBackgroundColor: { + type: 'string', + }, + customTextColor: { + type: 'string', + }, +}; + +export const name = 'core/social'; + +export const settings = { + title: __( 'Social Links' ), + + description: __( 'Display a row of icons of your social media accounts.' ), + + icon: , + + category: 'layout', + + keywords: [ __( 'link' ) ], + + attributes: blockAttributes, + + edit, + + save( { attributes } ) { + const { + url, + text, + title, + backgroundColor, + textColor, + customBackgroundColor, + customTextColor, + } = attributes; + + const textClass = getColorClassName( 'color', textColor ); + const backgroundClass = getColorClassName( 'background-color', backgroundColor ); + + const buttonClasses = classnames( 'wp-block-button__link', { + 'has-text-color': textColor || customTextColor, + [ textClass ]: textClass, + 'has-background': backgroundColor || customBackgroundColor, + [ backgroundClass ]: backgroundClass, + } ); + + const buttonStyle = { + backgroundColor: backgroundClass ? undefined : customBackgroundColor, + color: textClass ? undefined : customTextColor, + }; + + return ( +
+ +
+ ); + }, +}; diff --git a/packages/block-library/src/social/style.scss b/packages/block-library/src/social/style.scss new file mode 100644 index 00000000000000..863565beedb51c --- /dev/null +++ b/packages/block-library/src/social/style.scss @@ -0,0 +1,56 @@ +$blocks-button__height: 56px; + +.wp-block-button { + color: $white; + margin-bottom: 1.5em; + + &.aligncenter { + text-align: center; + } + + &.alignright { + /*rtl:ignore*/ + text-align: right; + } +} + +.wp-block-button__link { + background-color: $dark-gray-700; + border: none; + border-radius: $blocks-button__height / 2; + box-shadow: none; + color: inherit; + cursor: pointer; + display: inline-block; + font-size: $big-font-size; + margin: 0; + padding: 12px 24px; + text-align: center; + text-decoration: none; + white-space: normal; + overflow-wrap: break-word; + + &:hover, + &:focus, + &:active, + &:visited { + color: inherit; + } +} + +.is-style-squared .wp-block-button__link { + border-radius: 0; +} + +.is-style-outline { + color: $dark-gray-700; + + .wp-block-button__link { + background-color: transparent; + border: 2px solid currentcolor; + } +} + +.submit { + font-size: 30px; +} From 52d9dc8d9bae6492b4f7f39661ebce590b76edb3 Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Fri, 12 Apr 2019 10:08:54 +0300 Subject: [PATCH 02/10] Social Links block: added block.json --- packages/block-library/src/social/block.json | 35 ++++++++++++++++++ packages/block-library/src/social/index.js | 38 +++----------------- 2 files changed, 39 insertions(+), 34 deletions(-) create mode 100644 packages/block-library/src/social/block.json diff --git a/packages/block-library/src/social/block.json b/packages/block-library/src/social/block.json new file mode 100644 index 00000000000000..684add32597cac --- /dev/null +++ b/packages/block-library/src/social/block.json @@ -0,0 +1,35 @@ +{ + "name": "core/social", + "category": "layout", + "attributes": { + "url": { + "type": "string", + "source": "attribute", + "selector": "a", + "attribute": "href" + }, + "title": { + "type": "string", + "source": "attribute", + "selector": "a", + "attribute": "title" + }, + "text": { + "type": "string", + "source": "html", + "selector": "a" + }, + "backgroundColor": { + "type": "string" + }, + "textColor": { + "type": "string" + }, + "customBackgroundColor": { + "type": "string" + }, + "customTextColor": { + "type": "string" + } + } +} diff --git a/packages/block-library/src/social/index.js b/packages/block-library/src/social/index.js index d15dd1c04f9a1f..7ad1f7c2d28029 100644 --- a/packages/block-library/src/social/index.js +++ b/packages/block-library/src/social/index.js @@ -18,39 +18,11 @@ import { */ import edit from './edit'; -const blockAttributes = { - url: { - type: 'string', - source: 'attribute', - selector: 'a', - attribute: 'href', - }, - title: { - type: 'string', - source: 'attribute', - selector: 'a', - attribute: 'title', - }, - text: { - type: 'string', - source: 'html', - selector: 'a', - }, - backgroundColor: { - type: 'string', - }, - textColor: { - type: 'string', - }, - customBackgroundColor: { - type: 'string', - }, - customTextColor: { - type: 'string', - }, -}; +import metadata from './block.json'; -export const name = 'core/social'; +const { name } = metadata; + +export { metadata, name }; export const settings = { title: __( 'Social Links' ), @@ -63,8 +35,6 @@ export const settings = { keywords: [ __( 'link' ) ], - attributes: blockAttributes, - edit, save( { attributes } ) { From 369a52e4357008b15be58faad70679fcad5b26ba Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Fri, 12 Apr 2019 11:05:09 +0300 Subject: [PATCH 03/10] Added icon. --- packages/block-library/src/social/icon.js | 8 ++++++++ packages/block-library/src/social/index.js | 5 ++--- 2 files changed, 10 insertions(+), 3 deletions(-) create mode 100644 packages/block-library/src/social/icon.js diff --git a/packages/block-library/src/social/icon.js b/packages/block-library/src/social/icon.js new file mode 100644 index 00000000000000..c668664baf66e2 --- /dev/null +++ b/packages/block-library/src/social/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/social/index.js b/packages/block-library/src/social/index.js index 7ad1f7c2d28029..4a59252d32bf46 100644 --- a/packages/block-library/src/social/index.js +++ b/packages/block-library/src/social/index.js @@ -6,7 +6,6 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Path, SVG } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { RichText, @@ -17,7 +16,7 @@ import { * Internal dependencies */ import edit from './edit'; - +import icon from './icon'; import metadata from './block.json'; const { name } = metadata; @@ -29,7 +28,7 @@ export const settings = { description: __( 'Display a row of icons of your social media accounts.' ), - icon: , + icon, category: 'layout', From 5a41600f3cbb302452cc3f1483e58fc8d180f700 Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Fri, 12 Apr 2019 15:37:00 +0300 Subject: [PATCH 04/10] Abstracted save. --- packages/block-library/src/social/edit.js | 4 +- packages/block-library/src/social/index.js | 56 +--------------------- packages/block-library/src/social/save.js | 52 ++++++++++++++++++++ 3 files changed, 57 insertions(+), 55 deletions(-) create mode 100644 packages/block-library/src/social/save.js diff --git a/packages/block-library/src/social/edit.js b/packages/block-library/src/social/edit.js index 8d0b0349d957e4..a3d350adc40987 100644 --- a/packages/block-library/src/social/edit.js +++ b/packages/block-library/src/social/edit.js @@ -95,7 +95,9 @@ class SocialLinksEdit extends Component { value={ url } onChange={ ( value ) => setAttributes( { url: value } ) } /> - +
+ Add an icon +
) } diff --git a/packages/block-library/src/social/index.js b/packages/block-library/src/social/index.js index 4a59252d32bf46..c5c0ab8e6d3c9d 100644 --- a/packages/block-library/src/social/index.js +++ b/packages/block-library/src/social/index.js @@ -1,16 +1,7 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { - RichText, - getColorClassName, -} from '@wordpress/block-editor'; /** * Internal dependencies @@ -18,6 +9,7 @@ import { import edit from './edit'; import icon from './icon'; import metadata from './block.json'; +import save from './save'; const { name } = metadata; @@ -25,54 +17,10 @@ export { metadata, name }; export const settings = { title: __( 'Social Links' ), - description: __( 'Display a row of icons of your social media accounts.' ), - icon, - category: 'layout', - keywords: [ __( 'link' ) ], - edit, - - save( { attributes } ) { - const { - url, - text, - title, - backgroundColor, - textColor, - customBackgroundColor, - customTextColor, - } = attributes; - - const textClass = getColorClassName( 'color', textColor ); - const backgroundClass = getColorClassName( 'background-color', backgroundColor ); - - const buttonClasses = classnames( 'wp-block-button__link', { - 'has-text-color': textColor || customTextColor, - [ textClass ]: textClass, - 'has-background': backgroundColor || customBackgroundColor, - [ backgroundClass ]: backgroundClass, - } ); - - const buttonStyle = { - backgroundColor: backgroundClass ? undefined : customBackgroundColor, - color: textClass ? undefined : customTextColor, - }; - - return ( -
- -
- ); - }, + save, }; diff --git a/packages/block-library/src/social/save.js b/packages/block-library/src/social/save.js new file mode 100644 index 00000000000000..67ce1225d26562 --- /dev/null +++ b/packages/block-library/src/social/save.js @@ -0,0 +1,52 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { + RichText, + getColorClassName, +} from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { + url, + text, + title, + backgroundColor, + textColor, + customBackgroundColor, + customTextColor, + } = attributes; + + const textClass = getColorClassName( 'color', textColor ); + const backgroundClass = getColorClassName( 'background-color', backgroundColor ); + + const buttonClasses = classnames( 'wp-block-button__link', { + 'has-text-color': textColor || customTextColor, + [ textClass ]: textClass, + 'has-background': backgroundColor || customBackgroundColor, + [ backgroundClass ]: backgroundClass, + } ); + + const buttonStyle = { + backgroundColor: backgroundClass ? undefined : customBackgroundColor, + color: textClass ? undefined : customTextColor, + }; + + return ( +
+ +
+ ); +} From 89d85c7bf218a82acadd593490f71a5ac8163b07 Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Tue, 30 Apr 2019 23:49:01 +0300 Subject: [PATCH 05/10] WIP: Refactored social links according to columns block. --- packages/block-library/src/index.js | 6 +- .../block-library/src/social-links/block.json | 13 ++ .../block-library/src/social-links/edit.js | 116 +++++++++++ .../src/social-links/editor.scss | 191 ++++++++++++++++++ .../block-library/src/social-links/icon.js | 8 + .../block-library/src/social-links/index.js | 29 +++ .../block-library/src/social-links/save.js | 23 +++ .../src/social-links/social-link/block.json | 9 + .../src/social-links/social-link/edit.js | 35 ++++ .../src/social-links/social-link/icon.js | 8 + .../src/social-links/social-link/index.js | 31 +++ .../src/social-links/social-link/save.js | 22 ++ .../block-library/src/social-links/style.scss | 81 ++++++++ .../block-library/src/social-links/utils.js | 16 ++ 14 files changed, 586 insertions(+), 2 deletions(-) create mode 100644 packages/block-library/src/social-links/block.json create mode 100644 packages/block-library/src/social-links/edit.js create mode 100644 packages/block-library/src/social-links/editor.scss create mode 100644 packages/block-library/src/social-links/icon.js create mode 100644 packages/block-library/src/social-links/index.js create mode 100644 packages/block-library/src/social-links/save.js create mode 100644 packages/block-library/src/social-links/social-link/block.json create mode 100644 packages/block-library/src/social-links/social-link/edit.js create mode 100644 packages/block-library/src/social-links/social-link/icon.js create mode 100644 packages/block-library/src/social-links/social-link/index.js create mode 100644 packages/block-library/src/social-links/social-link/save.js create mode 100644 packages/block-library/src/social-links/style.scss create mode 100644 packages/block-library/src/social-links/utils.js diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 1f749f57969e94..00fb26fd09a07d 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -15,6 +15,8 @@ import { /** * Internal dependencies */ +import * as socialLinks from './social-links'; +import * as socialLink from './social-links/social-link'; import * as paragraph from './paragraph'; import * as image from './image'; import * as heading from './heading'; @@ -48,7 +50,6 @@ import * as search from './search'; import * as group from './group'; import * as separator from './separator'; import * as shortcode from './shortcode'; -import * as social from './social'; import * as spacer from './spacer'; import * as subhead from './subhead'; import * as table from './table'; @@ -112,7 +113,8 @@ export const registerCoreBlocks = () => { search, separator, reusableBlock, - social, + socialLinks, + socialLink, spacer, subhead, table, diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json new file mode 100644 index 00000000000000..63a013ffc8af4a --- /dev/null +++ b/packages/block-library/src/social-links/block.json @@ -0,0 +1,13 @@ +{ + "name": "core/social-links", + "category": "widgets", + "attributes": { + "columns": { + "type": "number", + "default": 2 + }, + "verticalAlignment": { + "type": "string" + } + } +} diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js new file mode 100644 index 00000000000000..bf6161eb4ad292 --- /dev/null +++ b/packages/block-library/src/social-links/edit.js @@ -0,0 +1,116 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { compose } from '@wordpress/compose'; +import { + PanelBody, + RangeControl, + IconButton, +} from '@wordpress/components'; +import { createBlock } from '@wordpress/blocks'; +import { Fragment } from '@wordpress/element'; +import { + InspectorControls, + InnerBlocks, + BlockControls, + BlockVerticalAlignmentToolbar, +} from '@wordpress/block-editor'; +import { withSelect, withDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { getColumnsTemplate } from './utils'; + +/** + * Allowed blocks constant is passed to InnerBlocks precisely as specified here. + * The contents of the array should never change. + * The array should contain the name of each block that is allowed. + * In columns block, the only block we allow is 'core/column'. + * + * @constant + * @type {string[]} +*/ +const ALLOWED_BLOCKS = [ 'core/social-link' ]; + +export const SocialLinksEdit = function( { attributes, setAttributes, className, updateAlignment, addLink } ) { + const { columns, verticalAlignment } = attributes; + + const classes = classnames( className, `has-${ columns }-columns`, { + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + const onChange = ( alignment ) => { + // Update all the (immediate) child Column Blocks + updateAlignment( alignment ); + }; + + return ( + + + + { + setAttributes( { + columns: nextColumns, + } ); + } } + min={ 1 } + max={ 6 } + /> + + + + + +
+ + +
+ addLink() } > + { __( 'Add link' ) } + +
+
+ + ); +}; + +const DEFAULT_EMPTY_ARRAY = []; + +export default compose( + withSelect( ( select, { clientId } ) => { + const { getBlocksByClientId } = select( 'core/editor' ); + const [ block ] = getBlocksByClientId( clientId ); + + return { + childLinks: block ? block.innerBlocks : DEFAULT_EMPTY_ARRAY, + }; + } ), + withDispatch( ( dispatch, { clientId, childLinks } ) => { + return { + addLink() { + const created = createBlock( 'core/social-link', { verticalAlignment: 'top' } ); + dispatch( 'core/editor' ).insertBlock( created, undefined, clientId ); + }, + }; + } ), +)( SocialLinksEdit ); diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss new file mode 100644 index 00000000000000..7830f7780880a9 --- /dev/null +++ b/packages/block-library/src/social-links/editor.scss @@ -0,0 +1,191 @@ +@mixin flex-full-height() { + display: flex; + flex-direction: column; + flex: 1; +} + + +// These margins make sure that nested blocks stack/overlay with the parent block chrome +// This is sort of an experiment at making sure the editor looks as much like the end result as possible +// Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere +// When using CSS grid, margins do not collapse on the container. +.wp-block-columns .editor-block-list__layout { + margin-left: 0; + margin-right: 0; + + // This max-width is used to constrain the main editor column, it should not cascade into columns + .editor-block-list__block { + max-width: none; + } +} + +// Fullwide: show margin left/right to ensure there's room for the side UI. +// This is not a 1:1 preview with the front-end where these margins would presumably be zero. +.editor-block-list__block[data-align="full"] [data-type="core/columns"][data-align="full"] .wp-block-columns > .editor-inner-blocks { + padding-left: $block-padding; + padding-right: $block-padding; + + @include break-small() { + padding-left: $block-container-side-padding; + padding-right: $block-container-side-padding; + } +} + +.wp-block-columns { + display: block; + + > .editor-inner-blocks > .editor-block-list__layout { + display: flex; + + // Responsiveness: Allow wrapping on mobile. + flex-wrap: wrap; + + @include break-medium() { + flex-wrap: nowrap; + } + // Set full heights on Columns to enable vertical alignment preview + > [data-type="core/column"], + > [data-type="core/column"] > .editor-block-list__block-edit, + > [data-type="core/column"] > .editor-block-list__block-edit > div[data-block], + > [data-type="core/column"] > .editor-block-list__block-edit .block-core-columns { + @include flex-full-height(); + } + // Adjust the individual column block. + > [data-type="core/column"] { + + // On mobile, only a single column is shown, so match adjacent block paddings. + padding-left: 0; + padding-right: 0; + margin-left: -$block-padding; + margin-right: -$block-padding; + + // Prevent the columns from growing wider than their distributed sizes. + min-width: 0; + + // Prevent long unbroken words from overflowing. + word-break: break-word; // For back-compat. + overflow-wrap: break-word; // New standard. + + // Responsiveness: Show at most one columns on mobile. + flex-basis: 100%; + + // Beyond mobile, allow 2 columns. + @include break-small() { + flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2})); + flex-grow: 0; + margin-left: $block-padding; + margin-right: $block-padding; + } + + // Add space between columns. Themes can customize this if they wish to work differently. + // This has to match the same padding applied in style.scss. + // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. + @include break-small() { + &:nth-child(even) { + margin-left: calc(#{$grid-size-large * 2} + #{$block-padding}); + } + } + + // When columns are in a single row, add space before all except the first. + @include break-medium() { + &:not(:first-child) { + margin-left: calc(#{$grid-size-large * 2} + #{$block-padding}); + } + } + + > .editor-block-list__block-edit { + margin-top: 0; + margin-bottom: 0; + + // Remove Block "padding" so individual Column is flush with parent Columns + &::before { + left: 0; + right: 0; + } + + > .editor-block-contextual-toolbar { + margin-left: -$border-width; + } + + // Zero out margins. + > [data-block] { + margin-top: 0; + margin-bottom: 0; + } + + // The Columns block is a flex-container, therefore it nullifies margin collapsing. + // Therefore, blocks inside this will appear to create a double margin. + // We compensate for this using negative margins. + > div > .block-core-columns > .editor-inner-blocks { + margin-top: -$default-block-margin; + margin-bottom: -$default-block-margin; + } + } + } + } +} + +/** + * Columns act as as a "passthrough container" + * and therefore has its vertical margins/padding removed via negative margins + * therefore we need to compensate for this here by doubling the spacing on the + * vertical to ensure there is equal visual spacing around the inserter. Note there + * is no formal API for a "passthrough" Block so this is an edge case overide + */ +[data-type="core/columns"] .block-list-appender { + margin-top: $block-padding*2; + margin-bottom: $block-padding*2; +} + +/** + * Vertical Alignment Preview + * note: specificity is important here to ensure individual + * * columns alignment is prioritised over parent column alignment + * + */ +.are-vertically-aligned-top .block-core-columns, +div.block-core-columns.is-vertically-aligned-top { + justify-content: flex-start; +} + +.are-vertically-aligned-center .block-core-columns, +div.block-core-columns.is-vertically-aligned-center { + justify-content: center; +} + +.are-vertically-aligned-bottom .block-core-columns, +div.block-core-columns.is-vertically-aligned-bottom { + justify-content: flex-end; +} + + +/** + * Fixes single Column breadcrumb to RHS of Block boundary + */ +[data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb { + right: 0; +} + +// The empty state of a columns block has the default appenders. +// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders. +// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style. +.wp-block-columns [data-type="core/column"].is-hovered { + > .block-editor-block-list__block-edit::before { + content: none; + } + + .block-editor-block-list__breadcrumb { + display: none; + } +} + +// In absence of making the individual columns resizable, we prevent them from being clickable. +// This makes them less fiddly. @todo: This should be revisited as the interface is refined. +.wp-block-columns [data-type="core/column"] { + pointer-events: none; + + // This selector re-enables clicking on any child of a column block. + .block-core-columns .block-editor-block-list__layout { + pointer-events: all; + } +} diff --git a/packages/block-library/src/social-links/icon.js b/packages/block-library/src/social-links/icon.js new file mode 100644 index 00000000000000..f45aba71242c40 --- /dev/null +++ b/packages/block-library/src/social-links/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { G, Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/social-links/index.js b/packages/block-library/src/social-links/index.js new file mode 100644 index 00000000000000..17baa36fecdd7d --- /dev/null +++ b/packages/block-library/src/social-links/index.js @@ -0,0 +1,29 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import icon from './icon'; +import metadata from './block.json'; +import save from './save'; + +const { name } = metadata; + +export { metadata, name }; + +export const settings = { + title: __( 'Social links' ), + icon, + description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ), + supports: { + align: [ 'wide', 'full' ], + html: false, + }, + edit, + save, +}; + diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js new file mode 100644 index 00000000000000..851a4270f7a4d6 --- /dev/null +++ b/packages/block-library/src/social-links/save.js @@ -0,0 +1,23 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { columns, verticalAlignment } = attributes; + + const wrapperClasses = classnames( `has-${ columns }-columns`, { + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + return ( +
+ +
+ ); +} diff --git a/packages/block-library/src/social-links/social-link/block.json b/packages/block-library/src/social-links/social-link/block.json new file mode 100644 index 00000000000000..4711abbaaec5c2 --- /dev/null +++ b/packages/block-library/src/social-links/social-link/block.json @@ -0,0 +1,9 @@ +{ + "name": "core/social-link", + "category": "widgets", + "attributes": { + "verticalAlignment": { + "type": "string" + } + } +} diff --git a/packages/block-library/src/social-links/social-link/edit.js b/packages/block-library/src/social-links/social-link/edit.js new file mode 100644 index 00000000000000..bf11ae06170c71 --- /dev/null +++ b/packages/block-library/src/social-links/social-link/edit.js @@ -0,0 +1,35 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; +import { InnerBlocks } from '@wordpress/block-editor'; +import { withDispatch, withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; + +/** + * Constants + */ +const ALLOWED_BLOCKS = [ 'core/code' ]; + +const TEMPLATE = [ [ 'core/code', { placeholder: 'Add URL...' } ] ]; + +const SocialLinkEdit = ( { attributes } ) => { + return ( + + + + ); +}; + +export default SocialLinkEdit; + diff --git a/packages/block-library/src/social-links/social-link/icon.js b/packages/block-library/src/social-links/social-link/icon.js new file mode 100644 index 00000000000000..080d796121d01a --- /dev/null +++ b/packages/block-library/src/social-links/social-link/icon.js @@ -0,0 +1,8 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ( + +); diff --git a/packages/block-library/src/social-links/social-link/index.js b/packages/block-library/src/social-links/social-link/index.js new file mode 100644 index 00000000000000..6f6f1913a4fbf6 --- /dev/null +++ b/packages/block-library/src/social-links/social-link/index.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import edit from './edit'; +import icon from './icon'; +import metadata from './block.json'; +import save from './save'; + +const { name } = metadata; + +export { metadata, name }; + +export const settings = { + title: __( 'Social link' ), + parent: [ 'core/social-links' ], + icon, + description: __( 'A single column within a columns block.' ), + supports: { + inserter: false, + reusable: false, + html: false, + }, + edit, + save, +}; + diff --git a/packages/block-library/src/social-links/social-link/save.js b/packages/block-library/src/social-links/social-link/save.js new file mode 100644 index 00000000000000..9e8ea1ac4a3b32 --- /dev/null +++ b/packages/block-library/src/social-links/social-link/save.js @@ -0,0 +1,22 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { InnerBlocks } from '@wordpress/block-editor'; + +export default function save( { attributes } ) { + const { verticalAlignment } = attributes; + const wrapperClasses = classnames( { + [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + return ( +
+ +
+ ); +} diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss new file mode 100644 index 00000000000000..ab2ec375ca1e8e --- /dev/null +++ b/packages/block-library/src/social-links/style.scss @@ -0,0 +1,81 @@ +.wp-block-columns { + display: flex; + margin-bottom: $default-block-margin; + + // Responsiveness: Allow wrapping on mobile. + flex-wrap: wrap; + + @include break-medium() { + flex-wrap: nowrap; + } +} + +.wp-block-column { + margin-bottom: 1em; + flex-grow: 1; + + // Responsiveness: Show at most one columns on mobile. + flex-basis: 100%; + + // Prevent the columns from growing wider than their distributed sizes. + min-width: 0; + + // Prevent long unbroken words from overflowing. + word-break: break-word; // For back-compat. + overflow-wrap: break-word; // New standard. + + @include break-small() { + + // Beyond mobile, allow 2 columns. + flex-basis: calc(50% - #{$grid-size-large}); + flex-grow: 0; + + // Add space between the 2 columns. Themes can customize this if they wish to work differently. + // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. + &:nth-child(even) { + margin-left: $grid-size-large * 2; + } + } + + @include break-medium() { + + // When columns are in a single row, add space before all except the first. + &:not(:first-child) { + margin-left: $grid-size-large * 2; + } + } +} + +/** + * All Columns Alignment + */ +.wp-block-columns { + &.are-vertically-aligned-top { + align-items: flex-start; + } + + &.are-vertically-aligned-center { + align-items: center; + } + + &.are-vertically-aligned-bottom { + align-items: flex-end; + } +} + +/** + * Individual Column Alignment + */ +.wp-block-column { + &.is-vertically-aligned-top { + align-self: flex-start; + } + + &.is-vertically-aligned-center { + align-self: center; + } + + &.is-vertically-aligned-bottom { + align-self: flex-end; + } +} diff --git a/packages/block-library/src/social-links/utils.js b/packages/block-library/src/social-links/utils.js new file mode 100644 index 00000000000000..df8c54dd9b6e03 --- /dev/null +++ b/packages/block-library/src/social-links/utils.js @@ -0,0 +1,16 @@ +/** + * External dependencies + */ +import memoize from 'memize'; +import { times } from 'lodash'; + +/** + * Returns the layouts configuration for a given number of columns. + * + * @param {number} columns Number of columns. + * + * @return {Object[]} Columns layout configuration. + */ +export const getColumnsTemplate = memoize( ( links ) => { + return times( links, () => [ 'core/social-link' ] ); +} ); From 792401a25c043c634de116ec7f1acf9701e9d95e Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Sun, 30 Jun 2019 22:47:23 +0300 Subject: [PATCH 06/10] Replaced insertBlock with replaceInnerBlocks. --- .../block-library/src/social-links/edit.js | 28 ++++++++++++------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index bf6161eb4ad292..72e4cc432a8638 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -85,7 +85,7 @@ export const SocialLinksEdit = function( { attributes, setAttributes, className, isLarge label={ __( 'Add link' ) } icon="insert" - onClick={ () => addLink() } > + onClick={ addLink } > { __( 'Add link' ) } @@ -98,19 +98,27 @@ const DEFAULT_EMPTY_ARRAY = []; export default compose( withSelect( ( select, { clientId } ) => { - const { getBlocksByClientId } = select( 'core/editor' ); + const { getBlocksByClientId } = select( 'core/block-editor' ); const [ block ] = getBlocksByClientId( clientId ); return { childLinks: block ? block.innerBlocks : DEFAULT_EMPTY_ARRAY, }; } ), - withDispatch( ( dispatch, { clientId, childLinks } ) => { - return { - addLink() { - const created = createBlock( 'core/social-link', { verticalAlignment: 'top' } ); - dispatch( 'core/editor' ).insertBlock( created, undefined, clientId ); - }, - }; - } ), + withDispatch( ( dispatch, ownProps, registry ) => ( { + addLink() { + const { clientId } = ownProps; + const { replaceInnerBlocks } = dispatch( 'core/block-editor' ); + const { getBlocks } = registry.select( 'core/block-editor' ); + + let innerBlocks = getBlocks( clientId ); + innerBlocks = [ + ...innerBlocks, + createBlock( 'core/social-link', { verticalAlignment: 'top' } ), + ]; + + replaceInnerBlocks( clientId, innerBlocks, false ); + }, + } ) + ), )( SocialLinksEdit ); From 22716ad49c19c2f2660f37d0c229c121c798a8a1 Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Sat, 6 Jul 2019 16:31:04 +0300 Subject: [PATCH 07/10] Added setUrl. --- .../block-library/src/social-links/block.json | 3 -- .../src/social-links/social-link/block.json | 2 +- .../src/social-links/social-link/edit.js | 37 +++++++++++-------- 3 files changed, 22 insertions(+), 20 deletions(-) diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index 63a013ffc8af4a..a9b1b7e3add7e9 100644 --- a/packages/block-library/src/social-links/block.json +++ b/packages/block-library/src/social-links/block.json @@ -5,9 +5,6 @@ "columns": { "type": "number", "default": 2 - }, - "verticalAlignment": { - "type": "string" } } } diff --git a/packages/block-library/src/social-links/social-link/block.json b/packages/block-library/src/social-links/social-link/block.json index 4711abbaaec5c2..0b686c7657064d 100644 --- a/packages/block-library/src/social-links/social-link/block.json +++ b/packages/block-library/src/social-links/social-link/block.json @@ -2,7 +2,7 @@ "name": "core/social-link", "category": "widgets", "attributes": { - "verticalAlignment": { + "url": { "type": "string" } } diff --git a/packages/block-library/src/social-links/social-link/edit.js b/packages/block-library/src/social-links/social-link/edit.js index bf11ae06170c71..62d1e89743dd3c 100644 --- a/packages/block-library/src/social-links/social-link/edit.js +++ b/packages/block-library/src/social-links/social-link/edit.js @@ -8,28 +8,33 @@ import classnames from 'classnames'; */ import { __ } from '@wordpress/i18n'; import { Fragment } from '@wordpress/element'; -import { InnerBlocks } from '@wordpress/block-editor'; -import { withDispatch, withSelect } from '@wordpress/data'; +import { withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -/** - * Constants - */ -const ALLOWED_BLOCKS = [ 'core/code' ]; - -const TEMPLATE = [ [ 'core/code', { placeholder: 'Add URL...' } ] ]; - -const SocialLinkEdit = ( { attributes } ) => { +const SocialLinkEdit = ( { attributes, setUrl } ) => { return ( - +
+ setUrl( event.target.value ) } + placeholder={ __( 'example.com/username' ) } + /> +
); }; -export default SocialLinkEdit; +export default compose( + withDispatch( ( ownProps ) => { + return { + setUrl( url ) { + const { setAttributes } = ownProps; + + setAttributes( { url } ); + }, + }; + } ) +)( SocialLinkEdit ); From a30b998a2dab13ef6047f18e88ebfe2a1926773f Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Sat, 6 Jul 2019 17:34:18 +0300 Subject: [PATCH 08/10] Added placeholder icon. --- .../src/social-links/social-link/PlaceholderIcon.js | 6 ++++++ .../src/social-links/social-link/edit.js | 11 ++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 packages/block-library/src/social-links/social-link/PlaceholderIcon.js diff --git a/packages/block-library/src/social-links/social-link/PlaceholderIcon.js b/packages/block-library/src/social-links/social-link/PlaceholderIcon.js new file mode 100644 index 00000000000000..abd932271d6eb4 --- /dev/null +++ b/packages/block-library/src/social-links/social-link/PlaceholderIcon.js @@ -0,0 +1,6 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export default ; diff --git a/packages/block-library/src/social-links/social-link/edit.js b/packages/block-library/src/social-links/social-link/edit.js index 62d1e89743dd3c..eafa23eb6ba2f7 100644 --- a/packages/block-library/src/social-links/social-link/edit.js +++ b/packages/block-library/src/social-links/social-link/edit.js @@ -2,6 +2,7 @@ * External dependencies */ import classnames from 'classnames'; +import { debounce } from 'lodash'; /** * WordPress dependencies @@ -10,10 +11,18 @@ import { __ } from '@wordpress/i18n'; import { Fragment } from '@wordpress/element'; import { withDispatch } from '@wordpress/data'; import { compose } from '@wordpress/compose'; +import { Icon } from '@wordpress/components'; + +/** + * Internal dependencies + */ + +import PlaceholderIcon from './PlaceholderIcon'; const SocialLinkEdit = ( { attributes, setUrl } ) => { return ( +
{ }; export default compose( - withDispatch( ( ownProps ) => { + withDispatch( ( _, ownProps ) => { return { setUrl( url ) { const { setAttributes } = ownProps; From 2f333626fbc180019cca1f32e6c6e11bdf297a25 Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Tue, 30 Jul 2019 21:34:04 +0300 Subject: [PATCH 09/10] Added styles settings. --- .../src/social-links/editor.scss | 191 ------------------ .../block-library/src/social-links/index.js | 6 +- .../src/social-links/social-link/edit.js | 26 ++- .../src/social-links/social-link/index.js | 4 +- .../src/social-links/social-link/save.js | 2 +- .../block-library/src/social-links/style.scss | 81 -------- 6 files changed, 25 insertions(+), 285 deletions(-) delete mode 100644 packages/block-library/src/social-links/editor.scss delete mode 100644 packages/block-library/src/social-links/style.scss diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss deleted file mode 100644 index 7830f7780880a9..00000000000000 --- a/packages/block-library/src/social-links/editor.scss +++ /dev/null @@ -1,191 +0,0 @@ -@mixin flex-full-height() { - display: flex; - flex-direction: column; - flex: 1; -} - - -// These margins make sure that nested blocks stack/overlay with the parent block chrome -// This is sort of an experiment at making sure the editor looks as much like the end result as possible -// Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere -// When using CSS grid, margins do not collapse on the container. -.wp-block-columns .editor-block-list__layout { - margin-left: 0; - margin-right: 0; - - // This max-width is used to constrain the main editor column, it should not cascade into columns - .editor-block-list__block { - max-width: none; - } -} - -// Fullwide: show margin left/right to ensure there's room for the side UI. -// This is not a 1:1 preview with the front-end where these margins would presumably be zero. -.editor-block-list__block[data-align="full"] [data-type="core/columns"][data-align="full"] .wp-block-columns > .editor-inner-blocks { - padding-left: $block-padding; - padding-right: $block-padding; - - @include break-small() { - padding-left: $block-container-side-padding; - padding-right: $block-container-side-padding; - } -} - -.wp-block-columns { - display: block; - - > .editor-inner-blocks > .editor-block-list__layout { - display: flex; - - // Responsiveness: Allow wrapping on mobile. - flex-wrap: wrap; - - @include break-medium() { - flex-wrap: nowrap; - } - // Set full heights on Columns to enable vertical alignment preview - > [data-type="core/column"], - > [data-type="core/column"] > .editor-block-list__block-edit, - > [data-type="core/column"] > .editor-block-list__block-edit > div[data-block], - > [data-type="core/column"] > .editor-block-list__block-edit .block-core-columns { - @include flex-full-height(); - } - // Adjust the individual column block. - > [data-type="core/column"] { - - // On mobile, only a single column is shown, so match adjacent block paddings. - padding-left: 0; - padding-right: 0; - margin-left: -$block-padding; - margin-right: -$block-padding; - - // Prevent the columns from growing wider than their distributed sizes. - min-width: 0; - - // Prevent long unbroken words from overflowing. - word-break: break-word; // For back-compat. - overflow-wrap: break-word; // New standard. - - // Responsiveness: Show at most one columns on mobile. - flex-basis: 100%; - - // Beyond mobile, allow 2 columns. - @include break-small() { - flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2})); - flex-grow: 0; - margin-left: $block-padding; - margin-right: $block-padding; - } - - // Add space between columns. Themes can customize this if they wish to work differently. - // This has to match the same padding applied in style.scss. - // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. - @include break-small() { - &:nth-child(even) { - margin-left: calc(#{$grid-size-large * 2} + #{$block-padding}); - } - } - - // When columns are in a single row, add space before all except the first. - @include break-medium() { - &:not(:first-child) { - margin-left: calc(#{$grid-size-large * 2} + #{$block-padding}); - } - } - - > .editor-block-list__block-edit { - margin-top: 0; - margin-bottom: 0; - - // Remove Block "padding" so individual Column is flush with parent Columns - &::before { - left: 0; - right: 0; - } - - > .editor-block-contextual-toolbar { - margin-left: -$border-width; - } - - // Zero out margins. - > [data-block] { - margin-top: 0; - margin-bottom: 0; - } - - // The Columns block is a flex-container, therefore it nullifies margin collapsing. - // Therefore, blocks inside this will appear to create a double margin. - // We compensate for this using negative margins. - > div > .block-core-columns > .editor-inner-blocks { - margin-top: -$default-block-margin; - margin-bottom: -$default-block-margin; - } - } - } - } -} - -/** - * Columns act as as a "passthrough container" - * and therefore has its vertical margins/padding removed via negative margins - * therefore we need to compensate for this here by doubling the spacing on the - * vertical to ensure there is equal visual spacing around the inserter. Note there - * is no formal API for a "passthrough" Block so this is an edge case overide - */ -[data-type="core/columns"] .block-list-appender { - margin-top: $block-padding*2; - margin-bottom: $block-padding*2; -} - -/** - * Vertical Alignment Preview - * note: specificity is important here to ensure individual - * * columns alignment is prioritised over parent column alignment - * - */ -.are-vertically-aligned-top .block-core-columns, -div.block-core-columns.is-vertically-aligned-top { - justify-content: flex-start; -} - -.are-vertically-aligned-center .block-core-columns, -div.block-core-columns.is-vertically-aligned-center { - justify-content: center; -} - -.are-vertically-aligned-bottom .block-core-columns, -div.block-core-columns.is-vertically-aligned-bottom { - justify-content: flex-end; -} - - -/** - * Fixes single Column breadcrumb to RHS of Block boundary - */ -[data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb { - right: 0; -} - -// The empty state of a columns block has the default appenders. -// Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders. -// Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style. -.wp-block-columns [data-type="core/column"].is-hovered { - > .block-editor-block-list__block-edit::before { - content: none; - } - - .block-editor-block-list__breadcrumb { - display: none; - } -} - -// In absence of making the individual columns resizable, we prevent them from being clickable. -// This makes them less fiddly. @todo: This should be revisited as the interface is refined. -.wp-block-columns [data-type="core/column"] { - pointer-events: none; - - // This selector re-enables clicking on any child of a column block. - .block-core-columns .block-editor-block-list__layout { - pointer-events: all; - } -} diff --git a/packages/block-library/src/social-links/index.js b/packages/block-library/src/social-links/index.js index 17baa36fecdd7d..58ad039aad2650 100644 --- a/packages/block-library/src/social-links/index.js +++ b/packages/block-library/src/social-links/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; /** * Internal dependencies @@ -19,6 +19,10 @@ export const settings = { title: __( 'Social links' ), icon, description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ), + styles: [ + { name: 'regular', label: _x( 'Regular', 'block style' ), isDefault: true }, + { name: 'filled', label: __( 'Filled' ) }, + ], supports: { align: [ 'wide', 'full' ], html: false, diff --git a/packages/block-library/src/social-links/social-link/edit.js b/packages/block-library/src/social-links/social-link/edit.js index eafa23eb6ba2f7..fb585771a4f567 100644 --- a/packages/block-library/src/social-links/social-link/edit.js +++ b/packages/block-library/src/social-links/social-link/edit.js @@ -19,18 +19,26 @@ import { Icon } from '@wordpress/components'; import PlaceholderIcon from './PlaceholderIcon'; -const SocialLinkEdit = ( { attributes, setUrl } ) => { +const SocialLinkEdit = ( { attributes, setUrl, isSelected } ) => { + const { url } = attributes; + return ( - - setUrl( event.target.value ) } - placeholder={ __( 'example.com/username' ) } - /> - + { + isSelected && ( +
+ setUrl( event.target.value ) } + placeholder={ __( 'example.com/username' ) } + /> +
+ ) + } + + { ! isSelected && url } ); }; diff --git a/packages/block-library/src/social-links/social-link/index.js b/packages/block-library/src/social-links/social-link/index.js index 6f6f1913a4fbf6..9967032da737d3 100644 --- a/packages/block-library/src/social-links/social-link/index.js +++ b/packages/block-library/src/social-links/social-link/index.js @@ -16,10 +16,10 @@ const { name } = metadata; export { metadata, name }; export const settings = { - title: __( 'Social link' ), + title: __( 'Social links' ), parent: [ 'core/social-links' ], icon, - description: __( 'A single column within a columns block.' ), + description: __( 'Social links.' ), supports: { inserter: false, reusable: false, diff --git a/packages/block-library/src/social-links/social-link/save.js b/packages/block-library/src/social-links/social-link/save.js index 9e8ea1ac4a3b32..c8b75b58e84ce5 100644 --- a/packages/block-library/src/social-links/social-link/save.js +++ b/packages/block-library/src/social-links/social-link/save.js @@ -9,7 +9,7 @@ import classnames from 'classnames'; import { InnerBlocks } from '@wordpress/block-editor'; export default function save( { attributes } ) { - const { verticalAlignment } = attributes; + const { verticalAlignment, url } = attributes; const wrapperClasses = classnames( { [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss deleted file mode 100644 index ab2ec375ca1e8e..00000000000000 --- a/packages/block-library/src/social-links/style.scss +++ /dev/null @@ -1,81 +0,0 @@ -.wp-block-columns { - display: flex; - margin-bottom: $default-block-margin; - - // Responsiveness: Allow wrapping on mobile. - flex-wrap: wrap; - - @include break-medium() { - flex-wrap: nowrap; - } -} - -.wp-block-column { - margin-bottom: 1em; - flex-grow: 1; - - // Responsiveness: Show at most one columns on mobile. - flex-basis: 100%; - - // Prevent the columns from growing wider than their distributed sizes. - min-width: 0; - - // Prevent long unbroken words from overflowing. - word-break: break-word; // For back-compat. - overflow-wrap: break-word; // New standard. - - @include break-small() { - - // Beyond mobile, allow 2 columns. - flex-basis: calc(50% - #{$grid-size-large}); - flex-grow: 0; - - // Add space between the 2 columns. Themes can customize this if they wish to work differently. - // Only apply this beyond the mobile breakpoint, as there's only a single column on mobile. - &:nth-child(even) { - margin-left: $grid-size-large * 2; - } - } - - @include break-medium() { - - // When columns are in a single row, add space before all except the first. - &:not(:first-child) { - margin-left: $grid-size-large * 2; - } - } -} - -/** - * All Columns Alignment - */ -.wp-block-columns { - &.are-vertically-aligned-top { - align-items: flex-start; - } - - &.are-vertically-aligned-center { - align-items: center; - } - - &.are-vertically-aligned-bottom { - align-items: flex-end; - } -} - -/** - * Individual Column Alignment - */ -.wp-block-column { - &.is-vertically-aligned-top { - align-self: flex-start; - } - - &.is-vertically-aligned-center { - align-self: center; - } - - &.is-vertically-aligned-bottom { - align-self: flex-end; - } -} From 2bf588d1ae9a525433d1cdfe3c072dfc2ca3fe3b Mon Sep 17 00:00:00 2001 From: Vadim Nicolai Date: Wed, 31 Jul 2019 16:16:08 +0300 Subject: [PATCH 10/10] Check if URL is a facebook. --- packages/block-library/src/social-links/edit.js | 3 +++ .../src/social-links/social-link/edit.js | 14 ++++++++++++-- .../src/social-links/social-link/index.js | 2 +- 3 files changed, 16 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 72e4cc432a8638..91ec641649d30d 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -51,6 +51,8 @@ export const SocialLinksEdit = function( { attributes, setAttributes, className, updateAlignment( alignment ); }; + + return ( @@ -74,6 +76,7 @@ export const SocialLinksEdit = function( { attributes, setAttributes, className, value={ verticalAlignment } /> +
{ const { url } = attributes; + const getDashiconsIconName = () => { + const isFacebook = url.includes( 'fb.com' ) || url.includes( 'facebook.com' ); + + if ( isFacebook ) { + return 'facebook'; + } + }; + + const dashiconsIconName = getDashiconsIconName(); + return ( - +
+ { isSelected && (
diff --git a/packages/block-library/src/social-links/social-link/index.js b/packages/block-library/src/social-links/social-link/index.js index 9967032da737d3..02f206e3c94ef5 100644 --- a/packages/block-library/src/social-links/social-link/index.js +++ b/packages/block-library/src/social-links/social-link/index.js @@ -19,7 +19,7 @@ export const settings = { title: __( 'Social links' ), parent: [ 'core/social-links' ], icon, - description: __( 'Social links.' ), + description: __( 'Display a row of icons of your social media accounts.' ), supports: { inserter: false, reusable: false,