diff --git a/projects/plugins/jetpack/changelog/add-size-control-to-sharing-block b/projects/plugins/jetpack/changelog/add-size-control-to-sharing-block new file mode 100644 index 0000000000000..7d15ce39002b6 --- /dev/null +++ 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 index 7c0e2e02db16b..79b9b2142bae1 100644 --- 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 index 7fada3471bdbd..cb761ed166ef1 100644 --- 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 index 2ce18c8019698..464cd252a0abb 100644 --- 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 = (