diff --git a/packages/block-library/src/common.scss b/packages/block-library/src/common.scss index bf437ce82cbb2..0aa200e9cb3f6 100644 --- a/packages/block-library/src/common.scss +++ b/packages/block-library/src/common.scss @@ -64,3 +64,20 @@ .aligncenter { clear: both; } + +// Justification. +.items-justified-left { + justify-content: flex-start; +} + +.items-justified-center { + justify-content: center; +} + +.items-justified-right { + justify-content: flex-end; +} + +.items-justified-space-between { + justify-content: space-between; +} diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index e0e62f1bd56c7..4df5f475f802e 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -14,6 +14,7 @@ import { __experimentalUseInnerBlocksProps as useInnerBlocksProps, useBlockProps, InspectorControls, + JustifyToolbar, ContrastChecker, PanelColorSettings, withColors, @@ -52,6 +53,7 @@ export function SocialLinksEdit( props ) { const { iconBackgroundColorValue, iconColorValue, + itemsJustification, openInNewTab, size, } = attributes; @@ -86,6 +88,7 @@ export function SocialLinksEdit( props ) { 'has-icon-color': iconColor.color || iconColorValue, 'has-icon-background-color': iconBackgroundColor.color || iconBackgroundColorValue, + [ `items-justified-${ itemsJustification }` ]: itemsJustification, } ); const style = { @@ -111,6 +114,22 @@ export function SocialLinksEdit( props ) { return ( + + setAttributes( { itemsJustification: value } ) + } + popoverProps={ { + position: 'bottom right', + isAlternate: true, + } } + /> { ( toggleProps ) => ( diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js index 65699fd903635..eafca3dbac53b 100644 --- a/packages/block-library/src/social-links/save.js +++ b/packages/block-library/src/social-links/save.js @@ -10,12 +10,18 @@ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; export default function save( props ) { const { - attributes: { iconBackgroundColorValue, iconColorValue, size }, + attributes: { + iconBackgroundColorValue, + iconColorValue, + itemsJustification, + size, + }, } = props; const className = classNames( size, { 'has-icon-color': iconColorValue, 'has-icon-background-color': iconBackgroundColorValue, + [ `items-justified-${ itemsJustification }` ]: itemsJustification, } ); const style = { diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss index 1c9360e22112f..31dcfd19c5fb7 100644 --- a/packages/block-library/src/social-links/style.scss +++ b/packages/block-library/src/social-links/style.scss @@ -1,7 +1,6 @@ .wp-block-social-links { display: flex; flex-wrap: wrap; - justify-content: flex-start; padding-left: 0; padding-right: 0; // Some themes set text-indent on all