From 6568e54d9a76ca2601833e771212f0a4e5ebe26c Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 17 Aug 2022 12:39:59 +1000 Subject: [PATCH 1/4] Adding background color block supports to the social links block. --- docs/reference-guides/core-blocks.md | 2 +- .../block-library/src/social-links/block.json | 7 ++ .../block-library/src/social-links/edit.js | 66 +++++++++++++------ 3 files changed, 54 insertions(+), 21 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 3449d35fe06fe1..928ea5af0514d6 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -761,7 +761,7 @@ Display icons linking to your social media profiles or sites. ([Source](https:// - **Name:** core/social-links - **Category:** widgets -- **Supports:** align (center, left, right), anchor, spacing (blockGap, margin, units) +- **Supports:** align (center, left, right), anchor, color (background, ~~text~~), spacing (blockGap, margin, units) - **Attributes:** customIconBackgroundColor, customIconColor, iconBackgroundColor, iconBackgroundColorValue, iconColor, iconColorValue, openInNewTab, showLabels, size ## Spacer diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index 8dd7df80a25253..9caa65ca578755 100644 --- a/packages/block-library/src/social-links/block.json +++ b/packages/block-library/src/social-links/block.json @@ -56,6 +56,13 @@ "type": "flex" } }, + "color": { + "background": true, + "text": false, + "__experimentalDefaultControls": { + "background": false + } + }, "spacing": { "blockGap": [ "horizontal", "vertical" ], "margin": [ "top", "bottom" ], diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 64ce714c4fb36d..430e6641c0e292 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -7,15 +7,16 @@ import classNames from 'classnames'; * WordPress dependencies */ import { getBlockSupport } from '@wordpress/blocks'; -import { Fragment, useEffect, useRef } from '@wordpress/element'; +import { useEffect, useRef } from '@wordpress/element'; import { BlockControls, useInnerBlocksProps, useBlockProps, InspectorControls, ContrastChecker, - PanelColorSettings, withColors, + __experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown, + __experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients, } from '@wordpress/block-editor'; import { MenuGroup, @@ -46,6 +47,7 @@ const getDefaultBlockLayout = ( blockTypeOrName ) => { export function SocialLinksEdit( props ) { const { + clientId, name, attributes, iconBackgroundColor, @@ -137,6 +139,10 @@ export function SocialLinksEdit( props ) { setAttributes( { iconColorValue: colorValue } ); }, label: __( 'Icon color' ), + resetAllFilter: () => { + setIconColor( undefined ); + setAttributes( { iconColorValue: undefined } ); + }, }, ]; @@ -152,11 +158,17 @@ export function SocialLinksEdit( props ) { } ); }, label: __( 'Icon background' ), + resetAllFilter: () => { + setIconBackgroundColor( undefined ); + setAttributes( { iconBackgroundColorValue: undefined } ); + }, } ); } + const colorGradientSettings = useMultipleOriginColorsAndGradients(); + return ( - + <> - - { ! logosOnly && ( - + + { colorSettings.map( + ( { onChange, label, value, resetAllFilter } ) => ( + - ) } - + ) + ) } + { ! logosOnly && ( + + ) }
    - + ); } From 781d78a1d1890aa2e05c16ca26a6f17b2985b6b2 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 17 Aug 2022 12:51:52 +1000 Subject: [PATCH 2/4] Adding background color block supports to the social links block. --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/social-links/block.json | 1 + test/emptytheme/theme.json | 9 +++++++++ 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 928ea5af0514d6..5ccca2d59898f5 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -761,7 +761,7 @@ Display icons linking to your social media profiles or sites. ([Source](https:// - **Name:** core/social-links - **Category:** widgets -- **Supports:** align (center, left, right), anchor, color (background, ~~text~~), spacing (blockGap, margin, units) +- **Supports:** align (center, left, right), anchor, color (background, gradients, ~~text~~), spacing (blockGap, margin, units) - **Attributes:** customIconBackgroundColor, customIconColor, iconBackgroundColor, iconBackgroundColorValue, iconColor, iconColorValue, openInNewTab, showLabels, size ## Spacer diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index 9caa65ca578755..e257f3e642de5a 100644 --- a/packages/block-library/src/social-links/block.json +++ b/packages/block-library/src/social-links/block.json @@ -58,6 +58,7 @@ }, "color": { "background": true, + "gradients": true, "text": false, "__experimentalDefaultControls": { "background": false diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index ed2d7b8d0946aa..7705f9ee826abd 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -7,5 +7,14 @@ "wideSize": "1100px" } }, + "styles": { + "blocks": { + "core/social-links": { + "color": { + "background": "green" + } + } + } + }, "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ] } From 26d3849444239b872ea3307c7e38b733d70fb1e8 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Wed, 17 Aug 2022 12:55:05 +1000 Subject: [PATCH 3/4] Revert emptytheme theme.json --- test/emptytheme/theme.json | 9 --------- 1 file changed, 9 deletions(-) diff --git a/test/emptytheme/theme.json b/test/emptytheme/theme.json index 7705f9ee826abd..ed2d7b8d0946aa 100644 --- a/test/emptytheme/theme.json +++ b/test/emptytheme/theme.json @@ -7,14 +7,5 @@ "wideSize": "1100px" } }, - "styles": { - "blocks": { - "core/social-links": { - "color": { - "background": "green" - } - } - } - }, "patterns": [ "short-text-surrounded-by-round-images", "partner-logos" ] } From b2dfb8243f1272ab98dd738adb889cb73f5e9409 Mon Sep 17 00:00:00 2001 From: ramonjd Date: Tue, 23 Aug 2022 11:19:32 +1000 Subject: [PATCH 4/4] Disable contrast checker for the background color Enable alpha for icons and icon background colors added in #43453 --- docs/reference-guides/core-blocks.md | 2 +- packages/block-library/src/social-links/block.json | 1 + packages/block-library/src/social-links/edit.js | 1 + 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 5ccca2d59898f5..0720b4815f5308 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -761,7 +761,7 @@ Display icons linking to your social media profiles or sites. ([Source](https:// - **Name:** core/social-links - **Category:** widgets -- **Supports:** align (center, left, right), anchor, color (background, gradients, ~~text~~), spacing (blockGap, margin, units) +- **Supports:** align (center, left, right), anchor, color (background, gradients, ~~enableContrastChecker~~, ~~text~~), spacing (blockGap, margin, units) - **Attributes:** customIconBackgroundColor, customIconColor, iconBackgroundColor, iconBackgroundColorValue, iconColor, iconColorValue, openInNewTab, showLabels, size ## Spacer diff --git a/packages/block-library/src/social-links/block.json b/packages/block-library/src/social-links/block.json index e257f3e642de5a..6ba9f32040ffc9 100644 --- a/packages/block-library/src/social-links/block.json +++ b/packages/block-library/src/social-links/block.json @@ -57,6 +57,7 @@ } }, "color": { + "enableContrastChecker": false, "background": true, "gradients": true, "text": false, diff --git a/packages/block-library/src/social-links/edit.js b/packages/block-library/src/social-links/edit.js index 430e6641c0e292..eb1f83180e6e7f 100644 --- a/packages/block-library/src/social-links/edit.js +++ b/packages/block-library/src/social-links/edit.js @@ -238,6 +238,7 @@ export function SocialLinksEdit( props ) { onColorChange: onChange, isShownByDefault: true, resetAllFilter, + enableAlpha: true, }, ] } panelId={ clientId }