Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Social Links: Add ability to change social icon sizes #25921

Merged
merged 23 commits into from
Nov 6, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 16 additions & 5 deletions packages/block-library/src/social-link/editor.scss
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
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
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>
mkaz marked this conversation as resolved.
Show resolved Hide resolved
<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
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
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
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;
mkaz marked this conversation as resolved.
Show resolved Hide resolved
}
}

.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);
}
}