Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds TikTok Icon to Social Links Block #21900

Closed
wants to merge 5 commits into from
Closed

Adds TikTok Icon to Social Links Block #21900

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c3cb8bf
adds tik tok icon to social-link block library
mattxwang Apr 23, 2020
7b62b19
generates fixtures for tiktok block
mattxwang Apr 26, 2020
8151b4e
prettier
mattxwang Apr 26, 2020
af4b56a
prettier
mattxwang Apr 26, 2020
6e7fa11
adds CSS class (relatively temporary)
mattxwang Apr 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/block-library/src/social-link/icons/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export * from './skype';
export * from './snapchat';
export * from './soundcloud';
export * from './spotify';
export * from './tiktok';
export * from './tumblr';
export * from './twitch';
export * from './twitter';
Expand Down
11 changes: 11 additions & 0 deletions packages/block-library/src/social-link/icons/tiktok.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 5 additions & 0 deletions packages/block-library/src/social-link/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,11 @@ function block_core_social_link_services( $service = '', $field = '' ) {
'name' => 'Spotify',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M12,2C6.477,2,2,6.477,2,12c0,5.523,4.477,10,10,10c5.523,0,10-4.477,10-10C22,6.477,17.523,2,12,2 M16.586,16.424 c-0.18,0.295-0.563,0.387-0.857,0.207c-2.348-1.435-5.304-1.76-8.785-0.964c-0.335,0.077-0.67-0.133-0.746-0.469 c-0.077-0.335,0.132-0.67,0.469-0.746c3.809-0.871,7.077-0.496,9.713,1.115C16.673,15.746,16.766,16.13,16.586,16.424 M17.81,13.7 c-0.226,0.367-0.706,0.482-1.072,0.257c-2.687-1.652-6.785-2.131-9.965-1.166C6.36,12.917,5.925,12.684,5.8,12.273 C5.675,11.86,5.908,11.425,6.32,11.3c3.632-1.102,8.147-0.568,11.234,1.328C17.92,12.854,18.035,13.335,17.81,13.7 M17.915,10.865 c-3.223-1.914-8.54-2.09-11.618-1.156C5.804,9.859,5.281,9.58,5.131,9.086C4.982,8.591,5.26,8.069,5.755,7.919 c3.532-1.072,9.404-0.865,13.115,1.338c0.445,0.264,0.59,0.838,0.327,1.282C18.933,10.983,18.359,11.129,17.915,10.865"></path></svg>',
),
'tiktok' => array(
'name' => 'TikTok',
// Icon made by Freepik from www.flaticon.com
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="MM 21.785156 5.273438 C 19.265625 5.273438 17.214844 3.222656 17.214844 0.703125 C 17.214844 0.316406 16.902344 0 16.511719 0 L 12.746094 0 C 12.359375 0 12.042969 0.316406 12.042969 0.703125 L 12.042969 16.140625 C 12.042969 17.625 10.839844 18.828125 9.359375 18.828125 C 7.875 18.828125 6.671875 17.625 6.671875 16.140625 C 6.671875 14.660156 7.875 13.457031 9.359375 13.457031 C 9.746094 13.457031 10.0625 13.140625 10.0625 12.753906 L 10.0625 8.988281 C 10.0625 8.597656 9.746094 8.285156 9.359375 8.285156 C 5.023438 8.285156 1.5 11.808594 1.5 16.140625 C 1.5 20.476562 5.023438 24 9.359375 24 C 13.691406 24 17.214844 20.476562 17.214844 16.140625 L 17.214844 9.308594 C 18.613281 10.054688 20.171875 10.445312 21.785156 10.445312 C 22.171875 10.445312 22.488281 10.128906 22.488281 9.742188 L 22.488281 5.976562 C 22.488281 5.585938 22.171875 5.273438 21.785156 5.273438 Z M 21.082031 9.007812 C 19.582031 8.882812 18.15625 8.359375 16.921875 7.472656 C 16.710938 7.320312 16.425781 7.296875 16.191406 7.417969 C 15.957031 7.539062 15.808594 7.78125 15.808594 8.042969 L 15.808594 16.140625 C 15.808594 19.699219 12.914062 22.59375 9.359375 22.59375 C 5.800781 22.59375 2.90625 19.699219 2.90625 16.140625 C 2.90625 12.824219 5.425781 10.078125 8.65625 9.730469 L 8.65625 12.109375 C 6.730469 12.445312 5.265625 14.125 5.265625 16.140625 C 5.265625 18.398438 7.101562 20.234375 9.359375 20.234375 C 11.613281 20.234375 13.449219 18.398438 13.449219 16.140625 L 13.449219 1.40625 L 15.851562 1.40625 C 16.171875 4.140625 18.347656 6.316406 21.082031 6.636719 Z M 21.082031 9.007812" /></path></svg>',
),
'tumblr' => array(
'name' => 'Tumblr',
'icon' => '<svg width="24" height="24" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" role="img" aria-hidden="true" focusable="false"><path d="M17.04 21.28h-3.28c-2.84 0-4.94-1.37-4.94-5.02v-5.67H6.08V7.5c2.93-.73 4.11-3.3 4.3-5.48h3.01v4.93h3.47v3.65H13.4v4.93c0 1.47.73 2.01 1.92 2.01h1.73v3.75z" /></path></svg>',
Expand Down
7 changes: 7 additions & 0 deletions packages/block-library/src/social-link/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
SnapchatIcon,
SoundCloudIcon,
SpotifyIcon,
TikTokIcon,
TumblrIcon,
TwitchIcon,
TwitterIcon,
Expand Down Expand Up @@ -238,6 +239,12 @@ const variations = [
title: 'Spotify',
icon: SpotifyIcon,
},
{
name: 'tiktok',
attributes: { service: 'tiktok' },
title: 'TikTok',
icon: TikTokIcon,
},
{
name: 'tumblr',
attributes: { service: 'tumblr' },
Expand Down
5 changes: 5 additions & 0 deletions packages/block-library/src/social-links/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,11 @@
color: #fff;
}

.wp-social-link-tiktok {
background-color: #000;
color: #fff;
}

.wp-social-link-tumblr {
background-color: #011835;
color: #fff;
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-tests/fixtures/blocks/core__social-link-tiktok.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- wp:social-link-facebook {"url":"https://example.com/"} /-->
13 changes: 13 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__social-link-tiktok.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
[
{
"clientId": "_clientId_0",
"name": "core/social-link",
"isValid": true,
"attributes": {
"url": "https://example.com/",
"service": "facebook"
},
"innerBlocks": [],
"originalContent": ""
}
]
20 changes: 20 additions & 0 deletions packages/e2e-tests/fixtures/blocks/core__social-link-tiktok.parsed.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
[
{
"blockName": "core/social-link-facebook",
"attrs": {
"url": "https://example.com/"
},
"innerBlocks": [],
"innerHTML": "",
"innerContent": []
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n",
"innerContent": [
"\n"
]
}
]
1 change: 1 addition & 0 deletions packages/e2e-tests/fixtures/blocks/core__social-link-tiktok.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<!-- wp:social-link {"url":"https://example.com/","service":"facebook"} /-->