From efb06192793623708408ddae9f7418cce5979db6 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 7 Oct 2020 13:01:45 -0700 Subject: [PATCH 01/23] Social Links: Add variables to change icon sizes This adds CSS custom properties to alter the circle/logo sizes. I'm not quite sure how to integrate this in to make it adjustable, maybe as a theme.json optoin? First, we may want to create as fixed sizes (sm, med, large) to make sure things look right. There are two values to adjust, the outer circle and the inner logo. So it is possible to make the icons all out of sorts if the sizes don't match properly. --- .../block-library/src/social-links/style.scss | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index cfd5375654b362..69d7660185125a 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -1,3 +1,8 @@ +.wp-social-link { + --social-link-size: 36px; + --social-link-logo-size: 24px; +} + .wp-block-social-links { display: flex; flex-wrap: wrap; @@ -20,8 +25,8 @@ .wp-social-link { display: block; - width: 36px; - height: 36px; + width: var(--social-link-size); + height: var(--social-link-size); border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized. margin: 0 8px 8px 0; transition: transform 0.1s ease; @@ -41,6 +46,8 @@ svg { color: currentColor; fill: currentColor; + width: var(--social-link-logo-size); + height: var(--social-link-logo-size); } &:hover { @@ -69,10 +76,6 @@ // Make these bigger. padding: 4px; - svg { - width: 28px; - height: 28px; - } } @import "../social-link/socials-without-bg.scss"; From c915b1cb6336584f7b06518edb26ab8a3a4f8ff0 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Tue, 13 Oct 2020 10:29:27 -0700 Subject: [PATCH 02/23] Switch social links to fixed sizes Uses small, normal, large, and huge sizes matching the same presets as the font sizes. Uses the CustomSelectControl to pick which size Introduces class names `has-SIZE-icon-size` that applies to social link --- .../block-library/src/social-links/block.json | 3 + .../block-library/src/social-links/edit.js | 59 ++++++++++++++++++- .../block-library/src/social-links/save.js | 15 ++++- .../block-library/src/social-links/style.scss | 27 +++++++-- 4 files changed, 94 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index d0ed132031b912..06e2fd5903f53c 100644 --- a/packages/block-library/src/social-links/block.json +++ b/packages/block-library/src/social-links/block.json @@ -6,6 +6,9 @@ "openInNewTab": { "type": "boolean", "default": false + }, + "iconSize": { + "type": "string" } }, "providesContext": { diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 13ce364c83561b..b02d1841194399 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classNames from 'classnames'; + /** * WordPress dependencies */ @@ -9,14 +14,45 @@ import { useBlockProps, InspectorControls, } from '@wordpress/block-editor'; -import { ToggleControl, PanelBody } from '@wordpress/components'; +import { + CustomSelectControl, + PanelBody, + ToggleControl, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; const ALLOWED_BLOCKS = [ 'core/social-link' ]; +// The default_option is used for the CustomSelectControl if no value is found. +// This prevents deprecation issues for social links without a default size set. +const defaultOption = { + name: __( 'Normal' ), + key: 'has-normal-icon-size', + style: { fontSize: '100%' }, +}; + +const iconOptions = [ + { + key: 'has-small-icon-size', + name: __( 'Small' ), + style: { fontSize: '75%' }, + }, + defaultOption, + { + name: __( 'Large' ), + key: 'has-large-icon-size', + style: { fontSize: '150%' }, + }, + { + name: __( 'Huge' ), + key: 'has-huge-icon-size', + style: { fontSize: '200%' }, + }, +]; + export function SocialLinksEdit( props ) { const { - attributes: { openInNewTab }, + attributes: { iconSize, openInNewTab }, setAttributes, } = props; @@ -28,7 +64,8 @@ export function SocialLinksEdit( props ) { ); - const blockProps = useBlockProps(); + const className = classNames( iconSize ); + const blockProps = useBlockProps( { className } ); const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: ALLOWED_BLOCKS, orientation: 'horizontal', @@ -36,9 +73,25 @@ export function SocialLinksEdit( props ) { templateLock: false, __experimentalAppenderTagName: 'li', } ); + return ( + + option.key === iconSize + ) || defaultOption + } + onChange={ ( { selectedItem } ) => { + setAttributes( { iconSize: selectedItem.key } ); + } } + /> + +
); diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 69d7660185125a..c289d4b1cd694c 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -1,6 +1,23 @@ -.wp-social-link { - --social-link-size: 36px; - --social-link-logo-size: 24px; + +// Normal / default size +:root { + --wp-social-link-size: 36px; + --wp-social-link-logo-size: 24px; +} + +.has-huge-icon-size > .wp-social-link { + --wp-social-link-size: 60px; + --wp-social-link-logo-size: 48px; +} + +.has-large-icon-size > .wp-social-link { + --wp-social-link-size: 48px; + --wp-social-link-logo-size: 36px; +} + +.has-small-icon-size > .wp-social-link { + --wp-social-link-size: 30px; + --wp-social-link-logo-size: 18px; } .wp-block-social-links { @@ -46,8 +63,8 @@ svg { color: currentColor; fill: currentColor; - width: var(--social-link-logo-size); - height: var(--social-link-logo-size); + width: var(--wp-social-link-logo-size); + height: var(--wp-social-link-logo-size); } &:hover { From f20bb66f1b51ce295cb3cf85acb25f95e285518f Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Wed, 14 Oct 2020 11:57:40 -0400 Subject: [PATCH 03/23] Ensure that icons aren't cut off by their button container in the editor. --- packages/block-library/src/social-link/editor.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss index e938b8d74ee749..c7389b02b4d4bc 100644 --- a/packages/block-library/src/social-link/editor.scss +++ b/packages/block-library/src/social-link/editor.scss @@ -1,6 +1,7 @@ .wp-block-social-links .wp-social-link button { color: currentColor; padding: 6px; + height: var(--wp-social-link-size); } .wp-block-social-links.is-style-pill-shape .wp-social-link button { From fda190fa4ad85b1885269c3977d1ca353632fcc4 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Thu, 15 Oct 2020 08:55:23 -0700 Subject: [PATCH 04/23] Switch size control to toolbar --- .../block-library/src/social-links/edit.js | 99 +++++++++++-------- 1 file changed, 58 insertions(+), 41 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index b02d1841194399..3af2d605b221a3 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -10,44 +10,30 @@ import classNames from 'classnames'; import { Fragment } from '@wordpress/element'; import { + BlockControls, __experimentalUseInnerBlocksProps as useInnerBlocksProps, useBlockProps, InspectorControls, } from '@wordpress/block-editor'; import { - CustomSelectControl, + Dropdown, + MenuGroup, + MenuItem, PanelBody, ToggleControl, + ToolbarButton, + ToolbarGroup, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { DOWN } from '@wordpress/keycodes'; const ALLOWED_BLOCKS = [ 'core/social-link' ]; -// The default_option is used for the CustomSelectControl if no value is found. -// This prevents deprecation issues for social links without a default size set. -const defaultOption = { - name: __( 'Normal' ), - key: 'has-normal-icon-size', - style: { fontSize: '100%' }, -}; - -const iconOptions = [ - { - key: 'has-small-icon-size', - name: __( 'Small' ), - style: { fontSize: '75%' }, - }, - defaultOption, - { - name: __( 'Large' ), - key: 'has-large-icon-size', - style: { fontSize: '150%' }, - }, - { - name: __( 'Huge' ), - key: 'has-huge-icon-size', - style: { fontSize: '200%' }, - }, +const sizeOptions = [ + { name: __( 'Small' ), value: 'has-small-icon-size' }, + { name: __( 'Normal' ), value: 'has-normal-icon-size' }, + { name: __( 'Large' ), value: 'has-large-icon-size' }, + { name: __( 'Huge' ), value: 'has-huge-icon-size' }, ]; export function SocialLinksEdit( props ) { @@ -74,24 +60,55 @@ export function SocialLinksEdit( props ) { __experimentalAppenderTagName: 'li', } ); + const openOnArrowDown = ( event ) => { + if ( event.keyCode === DOWN ) { + event.preventDefault(); + event.stopPropagation(); + event.target.click(); + } + }; return ( + + ( + + + { __( 'Size' ) } + + + ) } + renderContent={ () => ( + + { sizeOptions.map( ( entry ) => { + return ( + + setAttributes( { + iconSize: entry.value, + } ) + } + > + { entry.name } + + ); + } ) } + + ) } + /> + - - option.key === iconSize - ) || defaultOption - } - onChange={ ( { selectedItem } ) => { - setAttributes( { iconSize: selectedItem.key } ); - } } - /> - Date: Fri, 16 Oct 2020 09:41:59 -0700 Subject: [PATCH 05/23] Add check icon for selected menuitem --- packages/block-library/src/social-links/edit.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 3af2d605b221a3..1d0cba8d433e0f 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -25,6 +25,7 @@ import { ToolbarGroup, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { check } from '@wordpress/icons'; import { DOWN } from '@wordpress/keycodes'; const ALLOWED_BLOCKS = [ 'core/social-link' ]; @@ -91,14 +92,17 @@ export function SocialLinksEdit( props ) { { sizeOptions.map( ( entry ) => { return ( setAttributes( { iconSize: entry.value, } ) } + role="menuitemradio" > { entry.name } From 8b32cd27bc354aaac3e3761bb3bee6353d1ecf0b Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 16 Oct 2020 09:46:56 -0700 Subject: [PATCH 06/23] Add isAlternate prop for Dropdown --- packages/block-library/src/social-links/edit.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 1d0cba8d433e0f..143b4a506a712c 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -74,7 +74,10 @@ export function SocialLinksEdit( props ) { ( Date: Mon, 19 Oct 2020 10:00:27 +0200 Subject: [PATCH 07/23] Initial refactor work. --- .../block-library/src/social-link/editor.scss | 18 +++-- .../block-library/src/social-links/edit.js | 6 +- .../src/social-links/editor.scss | 25 +++---- .../block-library/src/social-links/style.scss | 71 +++++++++++-------- 4 files changed, 69 insertions(+), 51 deletions(-) diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss index c7389b02b4d4bc..cbd05f36cf4f01 100644 --- a/packages/block-library/src/social-link/editor.scss +++ b/packages/block-library/src/social-link/editor.scss @@ -1,10 +1,18 @@ -.wp-block-social-links .wp-social-link button { - color: currentColor; - padding: 6px; - height: var(--wp-social-link-size); -} +// The editor uses the button component, the frontend uses a link. +// Therefore we unstyle the button component to make it more like the frontend. +.wp-block-social-links .wp-social-link { + line-height: 0; + button { + color: currentColor; + padding: 0; + height: auto; + line-height: 0; + } +} +/* .wp-block-social-links.is-style-pill-shape .wp-social-link button { padding-left: 16px; padding-right: 16px; } +*/ diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 143b4a506a712c..1df00ddcb73c54 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -45,9 +45,9 @@ export function SocialLinksEdit( props ) { const SocialPlaceholder = (
-
-
-
+
+
+
); diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index dec1e6fa3634d0..6a9e2562590849 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -6,13 +6,8 @@ } } -// Reduce the paddings, margins, and UI of inner-blocks. -// @todo: eventually we may add a feature that lets a parent container absorb the block UI of a child block. -// When that happens, leverage that instead of the following overrides. +// Prevent toolbar from jumping when selecting / hovering a link. .editor-styles-wrapper .wp-block-social-link { - margin: 0 8px 8px 0; - - // Prevent toolbar from jumping when selecting / hovering a link. &.is-selected, &.is-hovered { transform: none; @@ -26,12 +21,13 @@ // Placeholder/setup state. .wp-block-social-links__social-placeholder { display: flex; + min-height: 24px; - .wp-block-social-link { + .wp-social-link { display: inline-flex; align-items: center; justify-content: center; - margin: 0 $grid-unit-10 $grid-unit-10 0; + margin: $grid-unit-05 $grid-unit-10 $grid-unit-05 0; width: 36px; height: 36px; border-radius: $radius-round; @@ -57,9 +53,14 @@ // Polish the Appender. .wp-block-social-links .block-list-appender { - margin: 0 0 $grid-unit-10 0; + margin: -$grid-unit-10 0; display: flex; align-items: center; + + svg { + width: $icon-size; + height: $icon-size; + } } // Center flex items. This has an equivalent in style.scss. @@ -73,12 +74,6 @@ opacity: 1; } -// Selected/unselected states. -// Unselected block is preview, selected has additional options. -[data-type="core/social-links"]:not(.is-selected):not(.has-child-selected) .wp-block-social-links { - min-height: 36px; // This height matches the height of the buttons and ensures an empty block doesn't collapse. -} - // Unconfigured placeholder links are semitransparent. .wp-social-link.wp-social-link__is-incomplete { opacity: 0.5; diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index c289d4b1cd694c..94d26426ea90ed 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -1,25 +1,3 @@ - -// Normal / default size -:root { - --wp-social-link-size: 36px; - --wp-social-link-logo-size: 24px; -} - -.has-huge-icon-size > .wp-social-link { - --wp-social-link-size: 60px; - --wp-social-link-logo-size: 48px; -} - -.has-large-icon-size > .wp-social-link { - --wp-social-link-size: 48px; - --wp-social-link-logo-size: 36px; -} - -.has-small-icon-size > .wp-social-link { - --wp-social-link-size: 30px; - --wp-social-link-logo-size: 18px; -} - .wp-block-social-links { display: flex; flex-wrap: wrap; @@ -38,19 +16,58 @@ border-bottom: 0; box-shadow: none; } + + // Vertically balance the margin of each icon. + .wp-social-link { + margin: 4px 8px 4px 0; + } + + // Icon sizes. + // Small. + &.has-small-icon-size { + svg { + width: 18px; + height: 18px; + } + } + + // Normal/default. + &, + &.has-normal-icon-size { + // 24 & 36 button + svg { + width: 24px; + height: 24px; + } + } + + // Large. + &.has-large-icon-size { + svg { + width: 36px; + height: 36px; + } + } + + // Huge. + &.has-huge-icon-size { + svg { + width: 48px; + height: 48px; + } + } } .wp-social-link { display: block; - width: var(--social-link-size); - height: var(--social-link-size); border-radius: 9999px; // This makes it pill-shaped instead of oval, in cases where the image fed is not perfectly sized. - margin: 0 8px 8px 0; transition: transform 0.1s ease; @include reduce-motion("transition"); + // Dimensions. + height: auto; + a { - padding: 6px; display: block; line-height: 0; transition: transform 0.1s ease; @@ -63,8 +80,6 @@ svg { color: currentColor; fill: currentColor; - width: var(--wp-social-link-logo-size); - height: var(--wp-social-link-logo-size); } &:hover { From 0ac9731949b07f85b1b7fbc07aa85cc92414c53b Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 19 Oct 2020 10:24:18 +0200 Subject: [PATCH 08/23] Refactor to use ems. --- .../block-library/src/social-link/editor.scss | 1 + .../block-library/src/social-links/style.scss | 30 ++++++++----------- 2 files changed, 14 insertions(+), 17 deletions(-) diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss index cbd05f36cf4f01..8890e2e0d47247 100644 --- a/packages/block-library/src/social-link/editor.scss +++ b/packages/block-library/src/social-link/editor.scss @@ -4,6 +4,7 @@ line-height: 0; button { + font-size: inherit; color: currentColor; padding: 0; height: auto; diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 94d26426ea90ed..6262d5548b2cb5 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -20,41 +20,37 @@ // Vertically balance the margin of each icon. .wp-social-link { margin: 4px 8px 4px 0; + + // By setting the font size, we can scale icons and paddings consistently based on that. + // This also allows themes to override this, if need be. + padding: 0.25em; + + svg { + width: 1em; + height: 1em; + } } // Icon sizes. // Small. &.has-small-icon-size { - svg { - width: 18px; - height: 18px; - } + font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered. } // Normal/default. &, &.has-normal-icon-size { - // 24 & 36 button - svg { - width: 24px; - height: 24px; - } + font-size: 24px; } // Large. &.has-large-icon-size { - svg { - width: 36px; - height: 36px; - } + font-size: 36px; } // Huge. &.has-huge-icon-size { - svg { - width: 48px; - height: 48px; - } + font-size: 48px; } } From 2881e594ec741bedab5107a541de797c662723da Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 19 Oct 2020 10:38:36 +0200 Subject: [PATCH 09/23] Small tweaks. --- packages/block-library/src/social-links/editor.scss | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 6a9e2562590849..901d566315eb8c 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -70,7 +70,7 @@ // Improve the preview, ensure buttons are fully opaque despite being disabled. // @todo: Look at improving the preview component to make this unnecessary. -.block-editor-block-preview__content .wp-social-link:disabled { +.block-editor-block-preview__content .components-button:disabled { opacity: 1; } @@ -96,10 +96,3 @@ // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } - -// To ensure a better selection footprint when editing, attach the margin to the block container. -// @todo: This can very probably be removed entirely when this block receives a lighter DOM. -.is-navigate-mode .block-editor-block-list__layout .block-editor-block-list__block[data-type="core/social-link"].is-selected::after, -.block-editor-block-list__layout .block-editor-block-list__block[data-type="core/social-link"]:not([contenteditable]):focus::after { - right: 8px; -} From e67758d781143a9a21d366916c8d814839ba66eb Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 19 Oct 2020 10:55:28 +0200 Subject: [PATCH 10/23] Fix variations. --- packages/block-library/src/social-link/editor.scss | 11 ++++++----- packages/block-library/src/social-links/editor.scss | 2 +- packages/block-library/src/social-links/style.scss | 8 +++++--- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss index 8890e2e0d47247..ef458eb5c58ce9 100644 --- a/packages/block-library/src/social-link/editor.scss +++ b/packages/block-library/src/social-link/editor.scss @@ -6,14 +6,15 @@ button { font-size: inherit; color: currentColor; - padding: 0; height: auto; line-height: 0; + + // This rule is duplicated from the style.scss and needs to be the same as there. + padding: 0.25em; } } -/* + .wp-block-social-links.is-style-pill-shape .wp-social-link button { - padding-left: 16px; - padding-right: 16px; + padding-left: 0.6666em; + padding-right: 0.6666em; } -*/ diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 901d566315eb8c..521c7c9296c12a 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -34,7 +34,7 @@ opacity: 0.8; } } - +// @todo fix these so they work for placeholders .is-style-logos-only .wp-block-social-links__social-placeholder .wp-block-social-link::before { content: ""; display: block; diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 6262d5548b2cb5..4d2f1f28937adc 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -23,7 +23,9 @@ // By setting the font size, we can scale icons and paddings consistently based on that. // This also allows themes to override this, if need be. - padding: 0.25em; + a { + padding: 0.25em; + } svg { width: 1em; @@ -116,7 +118,7 @@ } .wp-social-link a { - padding-left: 16px; - padding-right: 16px; + padding-left: 0.6666em; + padding-right: 0.6666em; } } From f153efca36f7802662165a4d493501c88ab480a8 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 19 Oct 2020 11:48:15 +0200 Subject: [PATCH 11/23] Get the setup state working. --- .../src/social-links/editor.scss | 42 ++++++++----------- 1 file changed, 18 insertions(+), 24 deletions(-) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 521c7c9296c12a..1513847490f778 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -21,34 +21,28 @@ // Placeholder/setup state. .wp-block-social-links__social-placeholder { display: flex; - min-height: 24px; + opacity: 0.8; .wp-social-link { - display: inline-flex; - align-items: center; - justify-content: center; - margin: $grid-unit-05 $grid-unit-10 $grid-unit-05 0; - width: 36px; - height: 36px; - border-radius: $radius-round; - opacity: 0.8; + padding: 0.25em; + + .is-style-pill-shape & { + padding-left: 0.6666em; + padding-right: 0.6666em; + } } -} -// @todo fix these so they work for placeholders -.is-style-logos-only .wp-block-social-links__social-placeholder .wp-block-social-link::before { - content: ""; - display: block; - width: 18px; - height: 18px; - border-radius: $radius-round; - opacity: 0.8; - background: currentColor; -} -.is-style-pill-shape .wp-block-social-links__social-placeholder .wp-block-social-link { - border-radius: 9999px; - padding-left: 16px + 12px; - padding-right: 16px + 12px; + .wp-social-link::before { + content: ""; + display: block; + width: 1em; + height: 1em; + border-radius: $radius-round; + + .is-style-logos-only & { + background: currentColor; + } + } } // Polish the Appender. From fb5a053a2629f7b3368c6bbbd3f56196be5bb73c Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 19 Oct 2020 11:58:02 +0200 Subject: [PATCH 12/23] Don't size up placeholder state on hover. --- packages/block-library/src/social-links/editor.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 1513847490f778..32a0f8d0822321 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -32,6 +32,10 @@ } } + .wp-social-link:hover { + transform: none; + } + .wp-social-link::before { content: ""; display: block; From dd0b88aa14e839e509a33e2b5032d3e90e82253d Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Mon, 19 Oct 2020 06:26:01 -0700 Subject: [PATCH 13/23] Add checkmark to normal size even if not set The default size is normal, even if the iconsize is not set, so this sets the checkmark in the dropdown to reflect. --- packages/block-library/src/social-links/edit.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 1df00ddcb73c54..a42ffbc820bc32 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -96,7 +96,11 @@ export function SocialLinksEdit( props ) { return ( Date: Mon, 19 Oct 2020 15:33:14 +0200 Subject: [PATCH 14/23] Use math for nicer padding. Props @kirilzh --- packages/block-library/src/social-links/editor.scss | 4 ++-- packages/block-library/src/social-links/style.scss | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 32a0f8d0822321..55b477d4e2ce20 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -27,8 +27,8 @@ padding: 0.25em; .is-style-pill-shape & { - padding-left: 0.6666em; - padding-right: 0.6666em; + padding-left: calc((2/3) * 1em); + padding-right: calc((2/3) * 1em); } } diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 4d2f1f28937adc..386e9ff7588dc6 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -118,7 +118,7 @@ } .wp-social-link a { - padding-left: 0.6666em; - padding-right: 0.6666em; + padding-left: calc((2/3) * 1em); + padding-right: calc((2/3) * 1em); } } From cb1a1fc305055cd42e15a0fc2a314c986107d054 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 19 Oct 2020 19:07:19 +0200 Subject: [PATCH 15/23] Add specificity to margins to fix a theme issue. --- packages/block-library/src/social-links/style.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 386e9ff7588dc6..cc93e45a113619 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -19,7 +19,10 @@ // Vertically balance the margin of each icon. .wp-social-link { - margin: 4px 8px 4px 0; + // This needs specificity to override some themes. + &.wp-social-link.wp-social-link { + margin: 4px 8px 4px 0; + } // By setting the font size, we can scale icons and paddings consistently based on that. // This also allows themes to override this, if need be. From 613fd3d12540c9a4377d1dd6d097f4c8e2e25224 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 21 Oct 2020 09:50:25 +0200 Subject: [PATCH 16/23] iconSize -> size --- packages/block-library/src/social-links/block.json | 2 +- packages/block-library/src/social-links/edit.js | 12 ++++++------ packages/block-library/src/social-links/save.js | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index 06e2fd5903f53c..47147dee69c89b 100644 --- a/packages/block-library/src/social-links/block.json +++ b/packages/block-library/src/social-links/block.json @@ -7,7 +7,7 @@ "type": "boolean", "default": false }, - "iconSize": { + "size": { "type": "string" } }, diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index a42ffbc820bc32..92cf6b4a622fed 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -39,7 +39,7 @@ const sizeOptions = [ export function SocialLinksEdit( props ) { const { - attributes: { iconSize, openInNewTab }, + attributes: { size, openInNewTab }, setAttributes, } = props; @@ -51,7 +51,7 @@ export function SocialLinksEdit( props ) { ); - const className = classNames( iconSize ); + const className = classNames( size ); const blockProps = useBlockProps( { className } ); const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: ALLOWED_BLOCKS, @@ -96,17 +96,17 @@ export function SocialLinksEdit( props ) { return ( setAttributes( { - iconSize: entry.value, + size: entry.value, } ) } role="menuitemradio" diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js index 30dad9978ff05c..09728cd12fc150 100644 --- a/packages/block-library/src/social-links/save.js +++ b/packages/block-library/src/social-links/save.js @@ -10,10 +10,10 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; export default function save( props ) { const { - attributes: { iconSize }, + attributes: { size }, } = props; - const className = classNames( iconSize ); + const className = classNames( size ); return (
    From 6b33a86da501d9ac0151eaba48ad629f80215562 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 21 Oct 2020 10:04:12 +0200 Subject: [PATCH 17/23] Hover cleanup. --- packages/block-library/src/social-links/editor.scss | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/social-links/editor.scss b/packages/block-library/src/social-links/editor.scss index 55b477d4e2ce20..fe11d0765c4df8 100644 --- a/packages/block-library/src/social-links/editor.scss +++ b/packages/block-library/src/social-links/editor.scss @@ -7,11 +7,8 @@ } // Prevent toolbar from jumping when selecting / hovering a link. -.editor-styles-wrapper .wp-block-social-link { - &.is-selected, - &.is-hovered { - transform: none; - } +.wp-social-link:hover { + transform: none; } .editor-styles-wrapper .wp-block-social-links { @@ -32,10 +29,6 @@ } } - .wp-social-link:hover { - transform: none; - } - .wp-social-link::before { content: ""; display: block; From 26abaa3c0593b3bfe0a07e8dd18dcfe2c03ec8e0 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Thu, 22 Oct 2020 12:58:56 -0700 Subject: [PATCH 18/23] Try using DropdownMenu component --- .../block-library/src/social-links/edit.js | 98 ++++++++----------- 1 file changed, 41 insertions(+), 57 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 92cf6b4a622fed..83ed34e2c41a00 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -16,17 +16,16 @@ import { InspectorControls, } from '@wordpress/block-editor'; import { - Dropdown, + DropdownMenu, MenuGroup, MenuItem, PanelBody, ToggleControl, - ToolbarButton, + ToolbarItem, ToolbarGroup, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { check } from '@wordpress/icons'; -import { DOWN } from '@wordpress/keycodes'; const ALLOWED_BLOCKS = [ 'core/social-link' ]; @@ -61,63 +60,48 @@ export function SocialLinksEdit( props ) { __experimentalAppenderTagName: 'li', } ); - const openOnArrowDown = ( event ) => { - if ( event.keyCode === DOWN ) { - event.preventDefault(); - event.stopPropagation(); - event.target.click(); - } - }; return ( - ( - - - { __( 'Size' ) } - - - ) } - renderContent={ () => ( - - { sizeOptions.map( ( entry ) => { - return ( - - setAttributes( { - size: entry.value, - } ) - } - role="menuitemradio" - > - { entry.name } - - ); - } ) } - - ) } - /> + + + { () => ( + + { ( onClose ) => ( + + { sizeOptions.map( ( entry ) => { + return ( + { + setAttributes( { + size: entry.value, + } ); + } } + onClose={ onClose } + role="menuitemradio" + > + { entry.name } + + ); + } ) } + + ) } + + ) } + + From 17c20ed9d8aa94ecbccf915cbf39f83464eafd66 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Fri, 23 Oct 2020 09:34:50 +0200 Subject: [PATCH 19/23] Fix calc. --- packages/block-library/src/social-link/editor.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss index ef458eb5c58ce9..1d9bde20f72436 100644 --- a/packages/block-library/src/social-link/editor.scss +++ b/packages/block-library/src/social-link/editor.scss @@ -15,6 +15,6 @@ } .wp-block-social-links.is-style-pill-shape .wp-social-link button { - padding-left: 0.6666em; - padding-right: 0.6666em; + padding-left: calc((2/3) * 1em); + padding-right: calc((2/3) * 1em); } From dd1b761819c0d7849a11497995e5bfc68d8fb6af Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 23 Oct 2020 06:51:55 -0700 Subject: [PATCH 20/23] Try text for button instead of icon A test to see what we think of modifying the DropdownMenu/Button to accept a text property which when specified and icon=null than it will show instead of the icon. --- packages/block-library/src/social-links/edit.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 83ed34e2c41a00..087f4fc9bc7304 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -66,7 +66,11 @@ export function SocialLinksEdit( props ) { { () => ( - + { ( onClose ) => ( { sizeOptions.map( ( entry ) => { From 3a3f1f543bd4163bcdb3cdbdcbb0f145fcfc843c Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 23 Oct 2020 08:33:07 -0700 Subject: [PATCH 21/23] Add popover props for isAlternate --- packages/block-library/src/social-links/edit.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 087f4fc9bc7304..584f1a88e5ebd2 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -60,6 +60,11 @@ export function SocialLinksEdit( props ) { __experimentalAppenderTagName: 'li', } ); + const POPOVER_PROPS = { + position: 'bottom right', + isAlternate: true, + }; + return ( @@ -70,6 +75,7 @@ export function SocialLinksEdit( props ) { label={ __( 'Size' ) } text={ __( 'Size' ) } icon={ null } + popoverProps={ POPOVER_PROPS } > { ( onClose ) => ( From 63aeff1332c1f9481e43ba89723ebdac1f046760 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Mon, 2 Nov 2020 09:54:38 -0800 Subject: [PATCH 22/23] Display size name as label Switches the button to display the name as the label for example "Large" instead of just showing "Size" Fix issue with { onClose } not being destructured Pass toggleProps forward. --- packages/block-library/src/social-links/edit.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 584f1a88e5ebd2..d5404b6376db7a 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -70,14 +70,20 @@ export function SocialLinksEdit( props ) { - { () => ( + { ( toggleProps ) => ( opt.value === size + ).name || __( 'Size' ) + } icon={ null } popoverProps={ POPOVER_PROPS } + toggleProps={ toggleProps } > - { ( onClose ) => ( + { ( { onClose } ) => ( { sizeOptions.map( ( entry ) => { return ( From c550580beb2478010be58768a9b4c3ddc72dd71c Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Wed, 4 Nov 2020 11:46:04 -0800 Subject: [PATCH 23/23] Switch back to 'Size' in toolbar --- packages/block-library/src/social-links/edit.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index d5404b6376db7a..b8b9136a6fdcdb 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -73,12 +73,7 @@ export function SocialLinksEdit( props ) { { ( toggleProps ) => ( opt.value === size - ).name || __( 'Size' ) - } + text={ __( 'Size' ) } icon={ null } popoverProps={ POPOVER_PROPS } toggleProps={ toggleProps }