From 0deec5feb4703e6b22da30d57106aed1ef4e8415 Mon Sep 17 00:00:00 2001 From: Jeremy Herve Date: Mon, 25 Sep 2023 19:24:15 +0200 Subject: [PATCH] Social Links: add X (#54092) * Social Links: add X Fixes #53223 * Add Twitter keyword to variation This will allow people to find the new icon when searching for Twitter. See https://github.com/WordPress/gutenberg/issues/53223#issuecomment-1692334880 * Reorder links alphabetically Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * No need for a capital letter Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> * Fix svg attributes See https://github.com/WordPress/gutenberg/pull/54092#discussion_r1322030940 Co-authored-by: Rich Tabor * Remove "icon" Co-authored-by: Nick Diego * Update X icon path See https://github.com/WordPress/gutenberg/pull/54092#discussion_r1334659450 See https://github.com/WordPress/gutenberg/pull/54092#discussion_r1334660867 --------- Co-authored-by: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Co-authored-by: Rich Tabor Co-authored-by: Nick Diego --- .../block-library/src/social-link/icons/index.js | 1 + packages/block-library/src/social-link/icons/x.js | 10 ++++++++++ packages/block-library/src/social-link/index.php | 12 ++++++++---- .../src/social-link/socials-with-bg.scss | 5 +++++ .../src/social-link/socials-without-bg.scss | 4 ++++ packages/block-library/src/social-link/variations.js | 8 ++++++++ .../fixtures/blocks/core__social-link-x.html | 1 + .../fixtures/blocks/core__social-link-x.json | 11 +++++++++++ .../fixtures/blocks/core__social-link-x.parsed.json | 11 +++++++++++ .../blocks/core__social-link-x.serialized.html | 1 + 10 files changed, 60 insertions(+), 4 deletions(-) create mode 100644 packages/block-library/src/social-link/icons/x.js create mode 100644 test/integration/fixtures/blocks/core__social-link-x.html create mode 100644 test/integration/fixtures/blocks/core__social-link-x.json create mode 100644 test/integration/fixtures/blocks/core__social-link-x.parsed.json create mode 100644 test/integration/fixtures/blocks/core__social-link-x.serialized.html diff --git a/packages/block-library/src/social-link/icons/index.js b/packages/block-library/src/social-link/icons/index.js index 62c32d2d5f35c..85de13090ad5d 100644 --- a/packages/block-library/src/social-link/icons/index.js +++ b/packages/block-library/src/social-link/icons/index.js @@ -40,5 +40,6 @@ export * from './vimeo'; export * from './vk'; export * from './whatsapp'; export * from './wordpress'; +export * from './x'; export * from './yelp'; export * from './youtube'; diff --git a/packages/block-library/src/social-link/icons/x.js b/packages/block-library/src/social-link/icons/x.js new file mode 100644 index 0000000000000..cd70775ad7cb8 --- /dev/null +++ b/packages/block-library/src/social-link/icons/x.js @@ -0,0 +1,10 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/primitives'; + +export const XIcon = () => ( + + + +); diff --git a/packages/block-library/src/social-link/index.php b/packages/block-library/src/social-link/index.php index 1ce60ff49fb41..cda8e125097a5 100644 --- a/packages/block-library/src/social-link/index.php +++ b/packages/block-library/src/social-link/index.php @@ -238,6 +238,10 @@ function block_core_social_link_services( $service = '', $field = '' ) { 'name' => 'Reddit', 'icon' => '', ), + 'share' => array( + 'name' => 'Share Icon', + 'icon' => '', + ), 'skype' => array( 'name' => 'Skype', 'icon' => '', @@ -294,6 +298,10 @@ function block_core_social_link_services( $service = '', $field = '' ) { 'name' => 'WhatsApp', 'icon' => '', ), + 'x' => array( + 'name' => 'X', + 'icon' => '', + ), 'yelp' => array( 'name' => 'Yelp', 'icon' => '', @@ -302,10 +310,6 @@ function block_core_social_link_services( $service = '', $field = '' ) { 'name' => 'YouTube', 'icon' => '', ), - 'share' => array( - 'name' => 'Share Icon', - 'icon' => '', - ), ); if ( ! empty( $service ) diff --git a/packages/block-library/src/social-link/socials-with-bg.scss b/packages/block-library/src/social-link/socials-with-bg.scss index 042db464f6ee2..3ee9b4b5148a8 100644 --- a/packages/block-library/src/social-link/socials-with-bg.scss +++ b/packages/block-library/src/social-link/socials-with-bg.scss @@ -199,6 +199,11 @@ color: #fff; } +.wp-social-link-x { + background-color: #000; + color: #fff; +} + .wp-social-link-yelp { background-color: #d32422; color: #fff; diff --git a/packages/block-library/src/social-link/socials-without-bg.scss b/packages/block-library/src/social-link/socials-without-bg.scss index ea8fca5d7ab83..aa84b5ab1433c 100644 --- a/packages/block-library/src/social-link/socials-without-bg.scss +++ b/packages/block-library/src/social-link/socials-without-bg.scss @@ -155,6 +155,10 @@ color: #3499cd; } +.wp-social-link-x { + color: #000; +} + .wp-social-link-yelp { color: #d32422; } diff --git a/packages/block-library/src/social-link/variations.js b/packages/block-library/src/social-link/variations.js index 47307ca65c088..5b03b85ae4e60 100644 --- a/packages/block-library/src/social-link/variations.js +++ b/packages/block-library/src/social-link/variations.js @@ -44,6 +44,7 @@ import { VkIcon, WhatsAppIcon, WordPressIcon, + XIcon, YelpIcon, YouTubeIcon, } from './icons'; @@ -304,6 +305,13 @@ const variations = [ title: 'WhatsApp', icon: WhatsAppIcon, }, + { + name: 'x', + attributes: { service: 'x' }, + keywords: [ 'twitter' ], + title: 'X', + icon: XIcon, + }, { name: 'yelp', attributes: { service: 'yelp' }, diff --git a/test/integration/fixtures/blocks/core__social-link-x.html b/test/integration/fixtures/blocks/core__social-link-x.html new file mode 100644 index 0000000000000..a587f2d0962f6 --- /dev/null +++ b/test/integration/fixtures/blocks/core__social-link-x.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__social-link-x.json b/test/integration/fixtures/blocks/core__social-link-x.json new file mode 100644 index 0000000000000..d0cf492d2aa03 --- /dev/null +++ b/test/integration/fixtures/blocks/core__social-link-x.json @@ -0,0 +1,11 @@ +[ + { + "name": "core/social-link", + "isValid": true, + "attributes": { + "url": "https://example.com/", + "service": "x" + }, + "innerBlocks": [] + } +] diff --git a/test/integration/fixtures/blocks/core__social-link-x.parsed.json b/test/integration/fixtures/blocks/core__social-link-x.parsed.json new file mode 100644 index 0000000000000..2119720f5db0f --- /dev/null +++ b/test/integration/fixtures/blocks/core__social-link-x.parsed.json @@ -0,0 +1,11 @@ +[ + { + "blockName": "core/social-link-x", + "attrs": { + "url": "https://example.com/" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__social-link-x.serialized.html b/test/integration/fixtures/blocks/core__social-link-x.serialized.html new file mode 100644 index 0000000000000..be00807af4c9e --- /dev/null +++ b/test/integration/fixtures/blocks/core__social-link-x.serialized.html @@ -0,0 +1 @@ +