Add size control to sharing block (#35267)

Automattic · Jan 31, 2024 · fce6c61 · fce6c61
1 parent 80117e6
commit fce6c61
Show file tree

Hide file tree

Showing 6 changed files with 110 additions and 7 deletions.
diff --git a/projects/plugins/jetpack/changelog/add-size-control-to-sharing-block b/projects/plugins/jetpack/changelog/add-size-control-to-sharing-block
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Sharing Buttons Block: Add size controls to the block
diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss b/projects/plugins/jetpack/extensions/blocks/sharing-button/style.scss
@@ -5,7 +5,7 @@
 	flex-direction: row;
 	margin: 4px;
 	cursor: default;
-	font-size: 13px; /* stylelint-disable-line declaration-property-unit-allowed-list */
+	font-size: inherit;
 	font-weight: 500;
 	border-radius: 4px;
 	color: var(--color-neutral-80);
@@ -15,6 +15,13 @@
 	padding: 4px 11px 3px 9px;
 	justify-content: center;
 	text-decoration: none;
+	height: auto;
+	align-items: center;
+
+	& svg {
+		width: 1.5em;
+		height: 1.5em;
+	}
 
 	&:hover {
 		cursor: pointer;

diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/block.json b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/block.json
@@ -31,6 +31,16 @@
 			"type": "string",
 			"default": "icon-text",
 			"validValues": [ "icon-text", "icon", "text", "official" ]
+		},
+		"size": {
+			"type": "string",
+			"default": "has-normal-icon-size",
+			"validValues": [
+				"has-small-icon-size",
+				"has-normal-icon-size",
+				"has-large-icon-size",
+				"has-huge-icon-size"
+			]
 		}
 	},
 	"providesContext": {

diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/edit.js b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/edit.js
@@ -1,20 +1,52 @@
-import { useInnerBlocksProps, useBlockProps, InspectorControls } from '@wordpress/block-editor';
-import { PanelBody, MenuItemsChoice } from '@wordpress/components';
+import {
+	useInnerBlocksProps,
+	useBlockProps,
+	InspectorControls,
+	BlockControls,
+} from '@wordpress/block-editor';
+import {
+	PanelBody,
+	MenuItemsChoice,
+	ToolbarDropdownMenu,
+	MenuGroup,
+	MenuItem,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import './style.scss';
+import { check } from '@wordpress/icons';
+import classNames from 'classnames';
 
 const ALLOWED_BLOCKS = [ 'jetpack/sharing-button' ];
 
+const sizeOptions = [
+	{
+		name: __( 'Small', 'jetpack' ),
+		value: 'has-small-icon-size',
+	},
+	{
+		name: __( 'Normal', 'jetpack' ),
+		value: 'has-normal-icon-size',
+	},
+	{
+		name: __( 'Large', 'jetpack' ),
+		value: 'has-large-icon-size',
+	},
+	{
+		name: __( 'Huge', 'jetpack' ),
+		value: 'has-huge-icon-size',
+	},
+];
+
 export function SharingButtonsEdit( props ) {
 	const { attributes, setAttributes } = props;
 
-	const { styleType } = attributes;
+	const { styleType, size } = attributes;
 
 	const SharingButtonsPlaceholder = (
 		<li>{ __( 'Click plus to add a Sharing Button', 'jetpack' ) }</li>
 	);
 
-	const className = 'jetpack-sharing-buttons__services-list';
+	const className = classNames( size, 'jetpack-sharing-buttons__services-list' );
 
 	const blockProps = useBlockProps( { className } );
 	const innerBlocksProps = useInnerBlocksProps( blockProps, {
@@ -26,8 +58,40 @@ export function SharingButtonsEdit( props ) {
 		__experimentalAppenderTagName: 'li',
 	} );
 
+	const isSelectedValue = value => size === value || ( ! size && value === 'has-normal-icon-size' );
+
 	return (
 		<>
+			<BlockControls group="other">
+				<ToolbarDropdownMenu
+					label={ __( 'Size', 'jetpack' ) }
+					text={ __( 'Size', 'jetpack' ) }
+					icon={ null }
+					popoverProps={ { position: 'bottom right' } }
+				>
+					{ () => (
+						<MenuGroup>
+							{ sizeOptions.map( ( { name, value } ) => {
+								return (
+									<MenuItem
+										icon={ isSelectedValue( value ) && check }
+										isSelected={ isSelectedValue( value ) }
+										key={ value }
+										role="menuitemradio"
+										onClick={ () => {
+											setAttributes( {
+												size: value,
+											} );
+										} }
+									>
+										{ name }
+									</MenuItem>
+								);
+							} ) }
+						</MenuGroup>
+					) }
+				</ToolbarDropdownMenu>
+			</BlockControls>
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings', 'jetpack' ) }>
 					<MenuItemsChoice

diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/save.js
@@ -1,7 +1,9 @@
 import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+import classNames from 'classnames';
 
-export default function save() {
-	const className = 'jetpack-sharing-buttons__services-list';
+export default function save( { attributes } ) {
+	const { size } = attributes;
+	const className = classNames( size, 'jetpack-sharing-buttons__services-list' );
 	const id = 'jetpack-sharing-serivces-list';
 	const blockProps = useBlockProps.save( { className } );
 	const innerBlocksProps = useInnerBlocksProps.save( blockProps );

diff --git a/projects/plugins/jetpack/extensions/blocks/sharing-buttons/style.scss b/projects/plugins/jetpack/extensions/blocks/sharing-buttons/style.scss
@@ -6,6 +6,22 @@
     flex-wrap: wrap;
     gap: 0;
     margin: 5px;
+
+	&.has-small-icon-size {
+		font-size: 12px;
+	}
+
+	&.has-normal-icon-size {
+		font-size: 16px;
+	}
+
+	&.has-large-icon-size {
+		font-size: 24px;
+	}
+
+	&.has-huge-icon-size {
+		font-size: 36px;
+	}
 }
 
 ul.jetpack-sharing-buttons__services-list.has-background {