Skip to content

Commit

Permalink
Social Links: Add ability to change social icon sizes (#25921)
Browse files Browse the repository at this point in the history 
* 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 <kjell@kjellr.com>
Co-authored-by: jasmussen <joen@automattic.com>
  • Loading branch information
@mkaz @kjellr @jasmussen
3 people authored Nov 6, 2020
1 parent 24a4f44 commit 422b21c
Show file tree
Hide file tree
Showing 6 changed files with 188 additions and 72 deletions.
21 changes: 16 additions & 5 deletions packages/block-library/src/social-link/editor.scss
View file
Original file line number Diff line number Diff line change
@@ -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);
}
3 changes: 3 additions & 0 deletions packages/block-library/src/social-links/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@
"openInNewTab": {
"type": "boolean",
"default": false
},
"size": {
"type": "string"
}
},
"providesContext": {
Expand Down
88 changes: 82 additions & 6 deletions packages/block-library/src/social-links/edit.js
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,119 @@
/**
* External dependencies
*/
import classNames from 'classnames';

/**
* WordPress dependencies
*/

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 = (
<div className="wp-block-social-links__social-placeholder">
<div className="wp-block-social-link wp-social-link-facebook"></div>
<div className="wp-block-social-link wp-social-link-twitter"></div>
<div className="wp-block-social-link wp-social-link-instagram"></div>
<div className="wp-social-link wp-social-link-facebook"></div>
<div className="wp-social-link wp-social-link-twitter"></div>
<div className="wp-social-link wp-social-link-instagram"></div>
</div>
);

const blockProps = useBlockProps();
const className = classNames( size );
const blockProps = useBlockProps( { className } );
const innerBlocksProps = useInnerBlocksProps( blockProps, {
allowedBlocks: ALLOWED_BLOCKS,
orientation: 'horizontal',
placeholder: SocialPlaceholder,
templateLock: false,
__experimentalAppenderTagName: 'li',
} );

const POPOVER_PROPS = {
position: 'bottom right',
isAlternate: true,
};

return (
<Fragment>
<BlockControls>
<ToolbarGroup>
<ToolbarItem>
{ ( toggleProps ) => (
<DropdownMenu
label={ __( 'Size' ) }
text={ __( 'Size' ) }
icon={ null }
popoverProps={ POPOVER_PROPS }
toggleProps={ toggleProps }
>
{ ( { onClose } ) => (
<MenuGroup>
{ sizeOptions.map( ( entry ) => {
return (
<MenuItem
icon={
( size ===
entry.value ||
( ! size &&
entry.value ===
'has-normal-icon-size' ) ) &&
check
}
isSelected={
size === entry.value
}
key={ entry.value }
onClick={ () => {
setAttributes( {
size: entry.value,
} );
} }
onClose={ onClose }
role="menuitemradio"
>
{ entry.name }
</MenuItem>
);
} ) }
</MenuGroup>
) }
</DropdownMenu>
) }
</ToolbarItem>
</ToolbarGroup>
</BlockControls>
<InspectorControls>
<PanelBody title={ __( 'Link settings' ) }>
<ToggleControl
Expand Down
77 changes: 28 additions & 49 deletions packages/block-library/src/social-links/editor.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,17 +6,9 @@
}
}

// 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.
.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;
}
// Prevent toolbar from jumping when selecting / hovering a link.
.wp-social-link:hover {
transform: none;
}

.editor-styles-wrapper .wp-block-social-links {
Expand All @@ -26,40 +18,40 @@
// Placeholder/setup state.
.wp-block-social-links__social-placeholder {
display: flex;
opacity: 0.8;

.wp-block-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0 $grid-unit-10 $grid-unit-10 0;
width: 36px;
height: 36px;
border-radius: $radius-round;
opacity: 0.8;
.wp-social-link {
padding: 0.25em;

.is-style-pill-shape & {
padding-left: calc((2/3) * 1em);
padding-right: calc((2/3) * 1em);
}
}
}

.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;
}
.wp-social-link::before {
content: "";
display: block;
width: 1em;
height: 1em;
border-radius: $radius-round;

.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;
.is-style-logos-only & {
background: currentColor;
}
}
}

// 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.
Expand All @@ -69,16 +61,10 @@

// 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;
}

// 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;
Expand All @@ -101,10 +87,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;
}
15 changes: 13 additions & 2 deletions packages/block-library/src/social-links/save.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,22 @@
/**
* External dependencies
*/
import classNames from 'classnames';

/**
* WordPress dependencies
*/
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

export default function save() {
export default function save( props ) {
const {
attributes: { size },
} = props;

const className = classNames( size );

return (
<ul { ...useBlockProps.save() }>
<ul { ...useBlockProps.save( { className } ) }>
<InnerBlocks.Content />
</ul>
);
Expand Down
56 changes: 46 additions & 10 deletions packages/block-library/src/social-links/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -69,10 +109,6 @@

// Make these bigger.
padding: 4px;
svg {
width: 28px;
height: 28px;
}
}

@import "../social-link/socials-without-bg.scss";
Expand All @@ -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);
}
}

0 comments on commit 422b21c

Please sign in to comment.