diff --git a/packages/block-library/src/buttons/editor.scss b/packages/block-library/src/buttons/editor.scss index 0a5cc537c0f823..29b381ac794650 100644 --- a/packages/block-library/src/buttons/editor.scss +++ b/packages/block-library/src/buttons/editor.scss @@ -27,6 +27,34 @@ $blocks-block__margin: 0.5em; box-shadow: none; } } + + // Back compat: Inner button blocks previously had their own alignment + // options. Forcing them to 100% width in the flex container replicates + // that these were block level elements that took up the full width. + // + // This back compat rule is ignored if the user decides to use the + // newer justification options on the button block, hence the :not. + // + // Disable the stylelint rule, otherwise this selector is ugly! + /* stylelint-disable indentation */ + &:not( + .is-content-justification-space-between, + .is-content-justification-right, + .is-content-justification-left, + .is-content-justification-center + ) .wp-block[data-align="center"] { + /* stylelint-enable indentation */ + margin-left: auto; + margin-right: auto; + margin-top: 0; + width: 100%; + + .wp-block-button { + // Some margin hacks are needed, since margin doesn't seem to + // collapse in the same way when a parent layout it flex. + margin-bottom: 0; + } + } } .wp-block[data-align="center"] > .wp-block-buttons { diff --git a/packages/block-library/src/buttons/style.scss b/packages/block-library/src/buttons/style.scss index 2fb0cf8ca3827e..568a44824f53e3 100644 --- a/packages/block-library/src/buttons/style.scss +++ b/packages/block-library/src/buttons/style.scss @@ -66,7 +66,11 @@ $blocks-block__margin: 0.5em; } } - // Kept for backward compatibiity. + &.is-content-justification-space-between { + justify-content: space-between; + } + + // Kept for backward compatibility. &.aligncenter { text-align: center; } @@ -92,4 +96,26 @@ $blocks-block__margin: 0.5em; margin-left: 0; } } + + // Back compat: Inner button blocks previously had their own alignment + // options. Forcing them to 100% width in the flex container replicates + // that these were block level elements that took up the full width. + // + // This back compat rule is ignored if the user decides to use the + // newer justification options on the button block, hence the :not. + // + // Disable the stylelint rule, otherwise this selector is ugly! + /* stylelint-disable indentation */ + &:not( + .is-content-justification-space-between, + .is-content-justification-right, + .is-content-justification-left, + .is-content-justification-center + ) .wp-block-button.aligncenter { + /* stylelint-enable indentation */ + margin-left: auto; + margin-right: auto; + margin-bottom: $blocks-block__margin; + width: 100%; + } } diff --git a/packages/block-library/src/social-link/block.json b/packages/block-library/src/social-link/block.json index 0ec91e23d905d7..eef254e205b412 100644 --- a/packages/block-library/src/social-link/block.json +++ b/packages/block-library/src/social-link/block.json @@ -17,7 +17,9 @@ } }, "usesContext": [ - "openInNewTab" + "openInNewTab", + "iconColorValue", + "iconBackgroundColorValue" ], "supports": { "reusable": false, diff --git a/packages/block-library/src/social-link/edit.js b/packages/block-library/src/social-link/edit.js index aa957abfb12261..81aaeba0f99e75 100644 --- a/packages/block-library/src/social-link/edit.js +++ b/packages/block-library/src/social-link/edit.js @@ -27,8 +27,14 @@ import { keyboardReturn } from '@wordpress/icons'; */ import { getIconBySite, getNameBySite } from './social-list'; -const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => { +const SocialLinkEdit = ( { + attributes, + context, + isSelected, + setAttributes, +} ) => { const { url, service, label } = attributes; + const { iconColorValue, iconBackgroundColorValue } = context; const [ showURLPopover, setPopover ] = useState( false ); const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, { 'wp-social-link__is-incomplete': ! url, @@ -36,7 +42,13 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => { const IconComponent = getIconBySite( service ); const socialLinkName = getNameBySite( service ); - const blockProps = useBlockProps( { className: classes } ); + const blockProps = useBlockProps( { + className: classes, + style: { + color: iconColorValue, + backgroundColor: iconBackgroundColorValue, + }, + } ); return ( diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php index 4e7e556d11918e..4f8893511d48f3 100644 --- a/packages/block-library/src/social-link/index.php +++ b/packages/block-library/src/social-link/index.php @@ -33,7 +33,12 @@ function render_block_core_social_link( $attributes, $content, $block ) { } $icon = block_core_social_link_get_icon( $service ); - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'wp-social-link wp-social-link-' . $service . $class_name ) ); + $wrapper_attributes = get_block_wrapper_attributes( + array( + 'class' => 'wp-social-link wp-social-link-' . $service . $class_name, + 'style' => block_core_social_link_get_color_styles( $block->context ), + ) + ); return '
  • ' . $icon . '
    • '; } @@ -280,3 +285,24 @@ function block_core_social_link_services( $service = '', $field = '' ) { return $services_data; } + +/** + * Returns CSS styles for icon and icon background colors. + * + * @param array $context Block context passed to Social Link. + * + * @return string Inline CSS styles for link's icon and background colors. + */ +function block_core_social_link_get_color_styles( $context ) { + $styles = array(); + + if ( array_key_exists( 'iconColorValue', $context ) ) { + $styles[] = 'color: ' . $context['iconColorValue'] . '; '; + } + + if ( array_key_exists( 'iconBackgroundColorValue', $context ) ) { + $styles[] = 'background-color: ' . $context['iconBackgroundColorValue'] . '; '; + } + + return implode( '', $styles ); +} diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index 766ab4d52795b3..b174a1e86dd3d2 100644 --- a/packages/block-library/src/social-links/block.json +++ b/packages/block-library/src/social-links/block.json @@ -30,7 +30,9 @@ } }, "providesContext": { - "openInNewTab": "openInNewTab" + "openInNewTab": "openInNewTab", + "iconColorValue": "iconColorValue", + "iconBackgroundColorValue": "iconBackgroundColorValue" }, "supports": { "align": [ diff --git a/packages/block-library/src/social-links/deprecated.js b/packages/block-library/src/social-links/deprecated.js new file mode 100644 index 00000000000000..e8615282201f56 --- /dev/null +++ b/packages/block-library/src/social-links/deprecated.js @@ -0,0 +1,79 @@ +/** + * External dependencies + */ +import classNames from 'classnames'; + +/** + * WordPress dependencies + */ +import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; + +// Social Links block deprecations. +const deprecated = [ + // V1. Remove CSS variable use for colors. + { + attributes: { + iconColor: { + type: 'string', + }, + customIconColor: { + type: 'string', + }, + iconColorValue: { + type: 'string', + }, + iconBackgroundColor: { + type: 'string', + }, + customIconBackgroundColor: { + type: 'string', + }, + iconBackgroundColorValue: { + type: 'string', + }, + openInNewTab: { + type: 'boolean', + default: false, + }, + size: { + type: 'string', + }, + }, + providesContext: { + openInNewTab: 'openInNewTab', + }, + supports: { + align: [ 'left', 'center', 'right' ], + anchor: true, + }, + save: ( props ) => { + const { + 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 = { + '--wp--social-links--icon-color': iconColorValue, + '--wp--social-links--icon-background-color': iconBackgroundColorValue, + }; + + return ( + + ); + }, + }, +]; + +export default deprecated; diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index e0e62f1bd56c75..f78980a40f5bb3 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -88,13 +88,7 @@ export function SocialLinksEdit( props ) { iconBackgroundColor.color || iconBackgroundColorValue, } ); - const style = { - '--wp--social-links--icon-color': iconColor.color || iconColorValue, - '--wp--social-links--icon-background-color': - iconBackgroundColor.color || iconBackgroundColorValue, - }; - - const blockProps = useBlockProps( { className, style } ); + const blockProps = useBlockProps( { className } ); const innerBlocksProps = useInnerBlocksProps( blockProps, { allowedBlocks: ALLOWED_BLOCKS, orientation: 'horizontal', @@ -176,7 +170,6 @@ export function SocialLinksEdit( props ) { value: iconColor.color || iconColorValue, onChange: ( colorValue ) => { setIconColor( colorValue ); - // Set explicit color value used to add CSS variable in save.js setAttributes( { iconColorValue: colorValue } ); }, label: __( 'Icon color' ), @@ -189,7 +182,6 @@ export function SocialLinksEdit( props ) { iconBackgroundColorValue, onChange: ( colorValue ) => { setIconBackgroundColor( colorValue ); - // Set explicit color value used to add CSS variable in save.js setAttributes( { iconBackgroundColorValue: colorValue, } ); diff --git a/packages/block-library/src/social-links/index.js b/packages/block-library/src/social-links/index.js index 309b5270444682..778cb49c05cf6b 100644 --- a/packages/block-library/src/social-links/index.js +++ b/packages/block-library/src/social-links/index.js @@ -7,6 +7,7 @@ import { share as icon } from '@wordpress/icons'; /** * Internal dependencies */ +import deprecated from './deprecated'; import edit from './edit'; import metadata from './block.json'; import save from './save'; @@ -54,4 +55,5 @@ export const settings = { icon, edit, save, + deprecated, }; diff --git a/packages/block-library/src/social-links/save.js b/packages/block-library/src/social-links/save.js index 65699fd903635e..7ed90959cc9cd5 100644 --- a/packages/block-library/src/social-links/save.js +++ b/packages/block-library/src/social-links/save.js @@ -18,13 +18,8 @@ export default function save( props ) { 'has-icon-background-color': iconBackgroundColorValue, } ); - const style = { - '--wp--social-links--icon-color': iconColorValue, - '--wp--social-links--icon-background-color': iconBackgroundColorValue, - }; - return ( -