From 422b21c70ad6a28f1b1b2cd6acb642c3360fa454 Mon Sep 17 00:00:00 2001 From: Marcus Kazmierczak Date: Fri, 6 Nov 2020 07:37:59 -0800 Subject: [PATCH] Social Links: Add ability to change social icon sizes (#25921) * 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. * 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 * Ensure that icons aren't cut off by their button container in the editor. * Switch size control to toolbar * Add check icon for selected menuitem * Add isAlternate prop for Dropdown * Initial refactor work. * Refactor to use ems. * Small tweaks. * Fix variations. * Get the setup state working. * Don't size up placeholder state on hover. * 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. * Use math for nicer padding. Props @kirilzh * Add specificity to margins to fix a theme issue. * iconSize -> size * Hover cleanup. * Try using DropdownMenu component * Fix calc. * 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. * Add popover props for isAlternate * 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. * Switch back to 'Size' in toolbar Co-authored-by: Kjell Reigstad Co-authored-by: jasmussen --- .../block-library/src/social-link/editor.scss | 21 +++-- .../block-library/src/social-links/block.json | 3 + .../block-library/src/social-links/edit.js | 88 +++++++++++++++++-- .../src/social-links/editor.scss | 77 ++++++---------- .../block-library/src/social-links/save.js | 15 +++- .../block-library/src/social-links/style.scss | 56 +++++++++--- 6 files changed, 188 insertions(+), 72 deletions(-) diff --git a/packages/block-library/src/social-link/editor.scss b/packages/block-library/src/social-link/editor.scss index e938b8d74ee749..1d9bde20f72436 100644 --- a/packages/block-library/src/social-link/editor.scss +++ b/packages/block-library/src/social-link/editor.scss @@ -1,9 +1,20 @@ -.wp-block-social-links .wp-social-link button { - color: currentColor; - padding: 6px; +// 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 { + font-size: inherit; + color: currentColor; + 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: calc((2/3) * 1em); + padding-right: calc((2/3) * 1em); } diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index d0ed132031b912..47147dee69c89b 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 + }, + "size": { + "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..b8b9136a6fdcdb 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 */ @@ -5,30 +10,48 @@ import { Fragment } from '@wordpress/element'; import { + BlockControls, __experimentalUseInnerBlocksProps as useInnerBlocksProps, useBlockProps, InspectorControls, } from '@wordpress/block-editor'; -import { ToggleControl, PanelBody } from '@wordpress/components'; +import { + DropdownMenu, + MenuGroup, + MenuItem, + PanelBody, + ToggleControl, + ToolbarItem, + ToolbarGroup, +} from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { check } from '@wordpress/icons'; const ALLOWED_BLOCKS = [ 'core/social-link' ]; +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 ) { const { - attributes: { openInNewTab }, + attributes: { size, openInNewTab }, setAttributes, } = props; const SocialPlaceholder = (
-
-
-
+
+
+
); - const blockProps = useBlockProps(); + const className = classNames( size ); + const blockProps = useBlockProps( { className } ); const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: ALLOWED_BLOCKS, orientation: 'horizontal', @@ -36,8 +59,61 @@ export function SocialLinksEdit( props ) { templateLock: false, __experimentalAppenderTagName: 'li', } ); + + const POPOVER_PROPS = { + position: 'bottom right', + isAlternate: true, + }; + return ( + + + + { ( toggleProps ) => ( + + { ( { onClose } ) => ( + + { sizeOptions.map( ( entry ) => { + return ( + { + setAttributes( { + size: entry.value, + } ); + } } + onClose={ onClose } + role="menuitemradio" + > + { entry.name } + + ); + } ) } + + ) } + + ) } + + + +
); diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index cfd5375654b362..cc93e45a113619 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -16,19 +16,59 @@ border-bottom: 0; box-shadow: none; } + + // Vertically balance the margin of each icon. + .wp-social-link { + // 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. + a { + padding: 0.25em; + } + + svg { + width: 1em; + height: 1em; + } + } + + // Icon sizes. + // Small. + &.has-small-icon-size { + font-size: 16px; // 16 makes for a quarter-padding that keeps the icon centered. + } + + // Normal/default. + &, + &.has-normal-icon-size { + font-size: 24px; + } + + // Large. + &.has-large-icon-size { + font-size: 36px; + } + + // Huge. + &.has-huge-icon-size { + font-size: 48px; + } } .wp-social-link { display: block; - width: 36px; - height: 36px; 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; @@ -69,10 +109,6 @@ // Make these bigger. padding: 4px; - svg { - width: 28px; - height: 28px; - } } @import "../social-link/socials-without-bg.scss"; @@ -85,7 +121,7 @@ } .wp-social-link a { - padding-left: 16px; - padding-right: 16px; + padding-left: calc((2/3) * 1em); + padding-right: calc((2/3) * 1em); } }