diff --git a/packages/block-editor/src/components/block-list/block-selection-button.native.js b/packages/block-editor/src/components/block-list/block-selection-button.native.js
index 24eb34e1d68cb1..c9daaa080205de 100644
--- a/packages/block-editor/src/components/block-list/block-selection-button.native.js
+++ b/packages/block-editor/src/components/block-list/block-selection-button.native.js
@@ -46,7 +46,7 @@ const BlockSelectionButton = ( {
rootBlockIcon && [
,
diff --git a/packages/block-editor/src/components/block-list/index.native.js b/packages/block-editor/src/components/block-list/index.native.js
index 0370d1baec6a46..d882c0ad671ab8 100644
--- a/packages/block-editor/src/components/block-list/index.native.js
+++ b/packages/block-editor/src/components/block-list/index.native.js
@@ -312,41 +312,50 @@ export class BlockList extends Component {
}
export default compose( [
- withSelect( ( select, { rootClientId, orientation } ) => {
- const {
- getBlockCount,
- getBlockOrder,
- getSelectedBlockClientId,
- isBlockInsertionPointVisible,
- getSettings,
- getBlockHierarchyRootClientId,
- } = select( 'core/block-editor' );
+ withSelect(
+ ( select, { rootClientId, orientation, filterInnerBlocks } ) => {
+ const {
+ getBlockCount,
+ getBlockOrder,
+ getSelectedBlockClientId,
+ isBlockInsertionPointVisible,
+ getSettings,
+ getBlockHierarchyRootClientId,
+ } = select( 'core/block-editor' );
- const isStackedHorizontally = orientation === 'horizontal';
+ const isStackedHorizontally = orientation === 'horizontal';
- const selectedBlockClientId = getSelectedBlockClientId();
- const blockClientIds = getBlockOrder( rootClientId );
+ const selectedBlockClientId = getSelectedBlockClientId();
- const isReadOnly = getSettings().readOnly;
+ let blockClientIds = getBlockOrder( rootClientId );
+ // Display only block which fulfill the condition in passed `filterInnerBlocks` function
+ if ( filterInnerBlocks ) {
+ blockClientIds = filterInnerBlocks( blockClientIds );
+ }
- const rootBlockId = getBlockHierarchyRootClientId(
- selectedBlockClientId
- );
- const hasRootInnerBlocks = !! getBlockCount( rootBlockId );
+ const isReadOnly = getSettings().readOnly;
- const isFloatingToolbarVisible =
- !! selectedBlockClientId && hasRootInnerBlocks;
+ const blockCount = getBlockCount( rootBlockId );
- return {
- blockClientIds,
- blockCount: getBlockCount( rootClientId ),
- isBlockInsertionPointVisible: isBlockInsertionPointVisible(),
- isReadOnly,
- isRootList: rootClientId === undefined,
- isFloatingToolbarVisible,
- isStackedHorizontally,
- };
- } ),
+ const rootBlockId = getBlockHierarchyRootClientId(
+ selectedBlockClientId
+ );
+ const hasRootInnerBlocks = !! blockCount;
+
+ const isFloatingToolbarVisible =
+ !! selectedBlockClientId && hasRootInnerBlocks;
+
+ return {
+ blockClientIds,
+ blockCount,
+ isBlockInsertionPointVisible: isBlockInsertionPointVisible(),
+ isReadOnly,
+ isRootList: rootClientId === undefined,
+ isFloatingToolbarVisible,
+ isStackedHorizontally,
+ };
+ }
+ ),
withDispatch( ( dispatch ) => {
const { insertBlock, replaceBlock, clearSelectedBlock } = dispatch(
'core/block-editor'
diff --git a/packages/block-editor/src/components/inner-blocks/index.native.js b/packages/block-editor/src/components/inner-blocks/index.native.js
index c2c0a0025c4a81..433ad8c2b4ee77 100644
--- a/packages/block-editor/src/components/inner-blocks/index.native.js
+++ b/packages/block-editor/src/components/inner-blocks/index.native.js
@@ -48,6 +48,7 @@ function UncontrolledInnerBlocks( props ) {
marginVertical,
marginHorizontal,
horizontalAlignment,
+ filterInnerBlocks,
} = props;
const block = useSelect(
@@ -80,6 +81,7 @@ function UncontrolledInnerBlocks( props ) {
contentStyle={ contentStyle }
onAddBlock={ onAddBlock }
onDeleteBlock={ onDeleteBlock }
+ filterInnerBlocks={ filterInnerBlocks }
/>
);
diff --git a/packages/block-library/src/index.native.js b/packages/block-library/src/index.native.js
index db82756ad1b29c..f06eb84359035b 100644
--- a/packages/block-library/src/index.native.js
+++ b/packages/block-library/src/index.native.js
@@ -2,6 +2,7 @@
* External dependencies
*/
import { Platform } from 'react-native';
+import { sortBy } from 'lodash';
/**
* WordPress dependencies
@@ -60,6 +61,8 @@ import * as tagCloud from './tag-cloud';
import * as classic from './classic';
import * as group from './group';
import * as buttons from './buttons';
+import * as socialLink from './social-link';
+import * as socialLinks from './social-links';
export const coreBlocks = [
// Common blocks are grouped at the top to prioritize their display
@@ -108,6 +111,8 @@ export const coreBlocks = [
video,
classic,
buttons,
+ socialLink,
+ socialLinks,
].reduce( ( accumulator, block ) => {
accumulator[ block.name ] = block;
return accumulator;
@@ -130,6 +135,26 @@ const registerBlock = ( block ) => {
} );
};
+/**
+ * Function to register a block variations e.g. social icons different types.
+ *
+ * @param {Object} block The block which variations will be registered.
+ *
+ */
+const registerBlockVariations = ( block ) => {
+ const { metadata, settings, name } = block;
+
+ sortBy( settings.variations, 'title' ).forEach( ( v ) => {
+ registerBlockType( `${ name }-${ v.name }`, {
+ ...metadata,
+ name: `${ name }-${ v.name }`,
+ ...settings,
+ icon: v.icon(),
+ title: v.title,
+ } );
+ } );
+};
+
// only enable code block for development
// eslint-disable-next-line no-undef
const devOnly = ( block ) => ( !! __DEV__ ? block : null );
@@ -137,13 +162,14 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
const iOSOnly = ( block ) =>
Platform.OS === 'ios' ? block : devOnly( block );
-// Hide the Classic block
+// Hide the Classic block and SocialLink block
addFilter(
'blocks.registerBlockType',
'core/react-native-editor',
( settings, name ) => {
+ const hiddenBlocks = [ 'core/freeform', 'core/social-link' ];
if (
- name === 'core/freeform' &&
+ hiddenBlocks.includes( name ) &&
hasBlockSupport( settings, 'inserter', true )
) {
settings.supports = {
@@ -193,9 +219,12 @@ export const registerCoreBlocks = () => {
latestPosts,
verse,
cover,
+ socialLink,
+ socialLinks,
iOSOnly( pullquote ),
].forEach( registerBlock );
+ registerBlockVariations( socialLink );
setDefaultBlockName( paragraph.name );
setFreeformContentHandlerName( classic.name );
setUnregisteredTypeHandlerName( missing.name );
diff --git a/packages/block-library/src/social-link/edit.native.js b/packages/block-library/src/social-link/edit.native.js
new file mode 100644
index 00000000000000..b1fe5814c1f569
--- /dev/null
+++ b/packages/block-library/src/social-link/edit.native.js
@@ -0,0 +1,209 @@
+/**
+ * External dependencies
+ */
+import { View, Animated, Easing, TouchableWithoutFeedback } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { BlockControls } from '@wordpress/block-editor';
+import { useEffect, useState, useRef } from '@wordpress/element';
+import {
+ ToolbarGroup,
+ ToolbarButton,
+ LinkSettings,
+} from '@wordpress/components';
+import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
+import { __, sprintf } from '@wordpress/i18n';
+import { link, Icon } from '@wordpress/icons';
+import { withSelect } from '@wordpress/data';
+/**
+ * Internal dependencies
+ */
+import { getIconBySite, getNameBySite } from './social-list';
+import styles from './editor.scss';
+
+const ANIMATION_DELAY = 300;
+const ANIMATION_DURATION = 400;
+
+const linkSettingsOptions = {
+ url: {
+ label: __( 'URL' ),
+ placeholder: __( 'Add URL' ),
+ autoFocus: true,
+ },
+ linkLabel: {
+ label: __( 'Link label' ),
+ placeholder: __( 'None' ),
+ },
+ footer: {
+ label: __( 'Briefly describe the link to help screen reader user' ),
+ },
+};
+
+const SocialLinkEdit = ( {
+ attributes,
+ setAttributes,
+ isSelected,
+ onFocus,
+ name,
+} ) => {
+ const { url, service = name } = attributes;
+ const [ isLinkSheetVisible, setIsLinkSheetVisible ] = useState( false );
+ const [ hasUrl, setHasUrl ] = useState( !! url );
+
+ const activeIcon =
+ styles[ `wp-social-link-${ service }` ] || styles[ `wp-social-link` ];
+
+ const inactiveIcon = usePreferredColorSchemeStyle(
+ styles.inactiveIcon,
+ styles.inactiveIconDark
+ );
+
+ const animatedValue = useRef( new Animated.Value( 0 ) ).current;
+
+ const IconComponent = getIconBySite( service )();
+ const socialLinkName = getNameBySite( service );
+
+ // When new social icon is added link sheet is opened automatically
+ useEffect( () => {
+ if ( isSelected && ! url ) {
+ setIsLinkSheetVisible( true );
+ }
+ }, [] );
+
+ useEffect( () => {
+ if ( ! url ) {
+ setHasUrl( false );
+ animatedValue.setValue( 0 );
+ } else if ( url ) {
+ animateColors();
+ }
+ }, [ url ] );
+
+ const interpolationColors = {
+ backgroundColor: animatedValue.interpolate( {
+ inputRange: [ 0, 1 ],
+ outputRange: [
+ inactiveIcon.backgroundColor,
+ activeIcon.backgroundColor,
+ ],
+ } ),
+ color: animatedValue.interpolate( {
+ inputRange: [ 0, 1 ],
+ outputRange: [ inactiveIcon.color, activeIcon.color ],
+ } ),
+ stroke: '',
+ };
+
+ const { backgroundColor, color, stroke } = hasUrl
+ ? activeIcon
+ : interpolationColors;
+
+ function animateColors() {
+ Animated.sequence( [
+ Animated.delay( ANIMATION_DELAY ),
+ Animated.timing( animatedValue, {
+ toValue: 1,
+ duration: ANIMATION_DURATION,
+ easing: Easing.circle,
+ } ),
+ ] ).start( () => setHasUrl( true ) );
+ }
+
+ function onCloseSettingsSheet() {
+ setIsLinkSheetVisible( false );
+ }
+
+ function onOpenSettingsSheet() {
+ setIsLinkSheetVisible( true );
+ }
+
+ function onEmptyURL() {
+ animatedValue.setValue( 0 );
+ setHasUrl( false );
+ }
+
+ function onIconPress() {
+ if ( isSelected ) {
+ setIsLinkSheetVisible( true );
+ } else {
+ onFocus();
+ }
+ }
+
+ const accessibilityHint = url
+ ? sprintf(
+ // translators: %s: social link name e.g: "Instagram".
+ __( '%s has URL set' ),
+ socialLinkName
+ )
+ : sprintf(
+ // translators: %s: social link name e.g: "Instagram".
+ __( '%s has no URL set' ),
+ socialLinkName
+ );
+
+ return (
+
+ { isSelected && (
+
+
+
+
+
+ ) }
+
+
+
+
+
+
+
+ );
+};
+
+export default compose( [
+ withSelect( ( select, { clientId } ) => {
+ const { getBlock } = select( 'core/block-editor' );
+
+ const block = getBlock( clientId );
+ const name = block?.name.substring( 17 );
+
+ return {
+ name,
+ };
+ } ),
+] )( SocialLinkEdit );
diff --git a/packages/block-library/src/social-link/editor.native.scss b/packages/block-library/src/social-link/editor.native.scss
new file mode 100644
index 00000000000000..8ba00f70b4191a
--- /dev/null
+++ b/packages/block-library/src/social-link/editor.native.scss
@@ -0,0 +1,23 @@
+@import "./socials-with-bg.scss";
+
+.linkSettingsPanel {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.iconContainer {
+ height: $button-size;
+ width: $button-size;
+ border-radius: $button-size / 2;
+ align-items: center;
+ justify-content: center;
+}
+
+.inactiveIcon {
+ background-color: $light-quaternary;
+ color: $white;
+}
+
+.inactiveIconDark {
+ background-color: $dark-quaternary;
+}
diff --git a/packages/block-library/src/social-link/socials-with-bg.scss b/packages/block-library/src/social-link/socials-with-bg.scss
new file mode 100644
index 00000000000000..ec46f3626bf4d0
--- /dev/null
+++ b/packages/block-library/src/social-link/socials-with-bg.scss
@@ -0,0 +1,185 @@
+.wp-social-link {
+ background-color: #f0f0f0;
+ color: #444;
+}
+
+.wp-social-link-amazon {
+ background-color: #f90;
+ color: #fff;
+}
+
+.wp-social-link-bandcamp {
+ background-color: #1ea0c3;
+ color: #fff;
+}
+
+.wp-social-link-behance {
+ background-color: #0757fe;
+ color: #fff;
+}
+
+.wp-social-link-codepen {
+ background-color: #1e1f26;
+ color: #fff;
+}
+
+.wp-social-link-deviantart {
+ background-color: #02e49b;
+ color: #fff;
+}
+
+.wp-social-link-dribbble {
+ background-color: #e94c89;
+ color: #fff;
+}
+
+.wp-social-link-dropbox {
+ background-color: #4280ff;
+ color: #fff;
+}
+
+.wp-social-link-etsy {
+ background-color: #f45800;
+ color: #fff;
+}
+
+.wp-social-link-facebook {
+ background-color: #1778f2;
+ color: #fff;
+}
+
+.wp-social-link-fivehundredpx {
+ background-color: #000;
+ color: #fff;
+}
+
+.wp-social-link-flickr {
+ background-color: #0461dd;
+ color: #fff;
+}
+
+.wp-social-link-foursquare {
+ background-color: #e65678;
+ color: #fff;
+}
+
+.wp-social-link-github {
+ background-color: #24292d;
+ color: #fff;
+}
+
+.wp-social-link-goodreads {
+ background-color: #eceadd;
+ color: #382110;
+}
+
+.wp-social-link-google {
+ background-color: #ea4434;
+ color: #fff;
+}
+
+.wp-social-link-instagram {
+ background-color: #f00075;
+ color: #fff;
+}
+
+.wp-social-link-lastfm {
+ background-color: #e21b24;
+ color: #fff;
+}
+
+.wp-social-link-linkedin {
+ background-color: #0d66c2;
+ color: #fff;
+}
+
+.wp-social-link-mastodon {
+ background-color: #3288d4;
+ color: #fff;
+}
+
+.wp-social-link-medium {
+ background-color: #02ab6c;
+ color: #fff;
+}
+
+.wp-social-link-meetup {
+ background-color: #f6405f;
+ color: #fff;
+}
+
+.wp-social-link-pinterest {
+ background-color: #e60122;
+ color: #fff;
+}
+
+.wp-social-link-pocket {
+ background-color: #ef4155;
+ color: #fff;
+}
+
+.wp-social-link-reddit {
+ background-color: #fe4500;
+ color: #fff;
+}
+
+.wp-social-link-skype {
+ background-color: #0478d7;
+ color: #fff;
+}
+
+.wp-social-link-snapchat {
+ background-color: #fefc00;
+ color: #fff;
+ stroke: #000;
+}
+
+.wp-social-link-soundcloud {
+ background-color: #ff5600;
+ color: #fff;
+}
+
+.wp-social-link-spotify {
+ background-color: #1bd760;
+ color: #fff;
+}
+
+.wp-social-link-tumblr {
+ background-color: #011835;
+ color: #fff;
+}
+
+.wp-social-link-twitch {
+ background-color: #6440a4;
+ color: #fff;
+}
+
+.wp-social-link-twitter {
+ background-color: #1da1f2;
+ color: #fff;
+}
+
+.wp-social-link-vimeo {
+ background-color: #1eb7ea;
+ color: #fff;
+}
+
+.wp-social-link-vk {
+ background-color: #4680c2;
+ color: #fff;
+}
+
+.wp-social-link-wordpress {
+ background-color: #3499cd;
+ color: #fff;
+}
+
+.wp-social-link-yelp {
+ background-color: #d32422;
+ color: #fff;
+}
+
+.wp-social-link-youtube {
+ background-color: #f00;
+ 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
new file mode 100644
index 00000000000000..89d05e6fd37cb9
--- /dev/null
+++ b/packages/block-library/src/social-link/socials-without-bg.scss
@@ -0,0 +1,145 @@
+.wp-social-link-amazon {
+ color: #f90;
+}
+
+.wp-social-link-bandcamp {
+ color: #1ea0c3;
+}
+
+.wp-social-link-behance {
+ color: #0757fe;
+}
+
+.wp-social-link-codepen {
+ color: #1e1f26;
+}
+
+.wp-social-link-deviantart {
+ color: #02e49b;
+}
+
+.wp-social-link-dribbble {
+ color: #e94c89;
+}
+
+.wp-social-link-dropbox {
+ color: #4280ff;
+}
+
+.wp-social-link-etsy {
+ color: #f45800;
+}
+
+.wp-social-link-facebook {
+ color: #1778f2;
+}
+
+.wp-social-link-fivehundredpx {
+ color: #000;
+}
+
+.wp-social-link-flickr {
+ color: #0461dd;
+}
+
+.wp-social-link-foursquare {
+ color: #e65678;
+}
+
+.wp-social-link-github {
+ color: #24292d;
+}
+
+.wp-social-link-goodreads {
+ color: #382110;
+}
+
+.wp-social-link-google {
+ color: #ea4434;
+}
+
+.wp-social-link-instagram {
+ color: #f00075;
+}
+
+.wp-social-link-lastfm {
+ color: #e21b24;
+}
+
+.wp-social-link-linkedin {
+ color: #0d66c2;
+}
+
+.wp-social-link-mastodon {
+ color: #3288d4;
+}
+
+.wp-social-link-medium {
+ color: #02ab6c;
+}
+
+.wp-social-link-meetup {
+ color: #f6405f;
+}
+
+.wp-social-link-pinterest {
+ color: #e60122;
+}
+
+.wp-social-link-pocket {
+ color: #ef4155;
+}
+
+.wp-social-link-reddit {
+ color: #fe4500;
+}
+
+.wp-social-link-skype {
+ color: #0478d7;
+}
+
+.wp-social-link-snapchat {
+ color: #fff;
+ stroke: #000;
+}
+
+.wp-social-link-soundcloud {
+ color: #ff5600;
+}
+
+.wp-social-link-spotify {
+ color: #1bd760;
+}
+
+.wp-social-link-tumblr {
+ color: #011835;
+}
+
+.wp-social-link-twitch {
+ color: #6440a4;
+}
+
+.wp-social-link-twitter {
+ color: #1da1f2;
+}
+
+.wp-social-link-vimeo {
+ color: #1eb7ea;
+}
+
+.wp-social-link-vk {
+ color: #4680c2;
+}
+
+.wp-social-link-wordpress {
+ color: #3499cd;
+}
+
+.wp-social-link-yelp {
+ background-color: #d32422;
+ color: #fff;
+}
+
+.wp-social-link-youtube {
+ color: #f00;
+}
diff --git a/packages/block-library/src/social-links/edit.native.js b/packages/block-library/src/social-links/edit.native.js
new file mode 100644
index 00000000000000..93b372dc08de19
--- /dev/null
+++ b/packages/block-library/src/social-links/edit.native.js
@@ -0,0 +1,144 @@
+/**
+ * External dependencies
+ */
+import { View } from 'react-native';
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks } from '@wordpress/block-editor';
+import { withDispatch, withSelect } from '@wordpress/data';
+import { useRef, useEffect, useState } from '@wordpress/element';
+import { compose, usePreferredColorSchemeStyle } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './editor.scss';
+import variations from '../social-link/variations';
+
+const ALLOWED_BLOCKS = variations.map(
+ ( v ) => `core/social-link-${ v.name }`
+);
+
+// Template contains the links that show when start.
+const TEMPLATE = [
+ [
+ 'core/social-link-wordpress',
+ { service: 'wordpress', url: 'https://wordpress.org' },
+ ],
+ [ 'core/social-link-facebook', { service: 'facebook' } ],
+ [ 'core/social-link-twitter', { service: 'twitter' } ],
+ [ 'core/social-link-instagram', { service: 'instagram' } ],
+];
+
+function SocialLinksEdit( {
+ shouldDelete,
+ onDelete,
+ isSelected,
+ isInnerIconSelected,
+ innerBlocks,
+ attributes,
+ activeInnerBlocks,
+ getBlock,
+} ) {
+ const [ initialCreation, setInitialCreation ] = useState( true );
+ const shouldRenderFooterAppender = isSelected || isInnerIconSelected;
+ const { align } = attributes;
+ const { marginLeft: spacing } = styles.spacing;
+
+ useEffect( () => {
+ if ( ! shouldRenderFooterAppender ) {
+ setInitialCreation( false );
+ }
+ }, [ shouldRenderFooterAppender ] );
+
+ const renderFooterAppender = useRef( () => (
+
+
+
+ ) );
+
+ const placeholderStyle = usePreferredColorSchemeStyle(
+ styles.placeholder,
+ styles.placeholderDark
+ );
+
+ function renderPlaceholder() {
+ return [
+ ...new Array( innerBlocks.length || 1 ),
+ ].map( ( _, index ) => (
+
+ ) );
+ }
+
+ function filterInnerBlocks( blockIds ) {
+ return blockIds.filter(
+ ( blockId ) => getBlock( blockId ).attributes.url
+ );
+ }
+
+ if ( ! shouldRenderFooterAppender && activeInnerBlocks.length === 0 ) {
+ return (
+
+ { renderPlaceholder() }
+
+ );
+ }
+
+ return (
+
+ );
+}
+
+export default compose(
+ withSelect( ( select, { clientId } ) => {
+ const {
+ getBlockCount,
+ getBlockParents,
+ getSelectedBlockClientId,
+ getBlocks,
+ getBlock,
+ } = select( 'core/block-editor' );
+ const selectedBlockClientId = getSelectedBlockClientId();
+ const selectedBlockParents = getBlockParents(
+ selectedBlockClientId,
+ true
+ );
+ const innerBlocks = getBlocks( clientId );
+ const activeInnerBlocks = innerBlocks.filter(
+ ( block ) => block.attributes?.url
+ );
+
+ return {
+ shouldDelete: getBlockCount( clientId ) === 1,
+ isInnerIconSelected: selectedBlockParents[ 0 ] === clientId,
+ innerBlocks,
+ activeInnerBlocks,
+ getBlock,
+ };
+ } ),
+ withDispatch( ( dispatch, { clientId } ) => {
+ const { removeBlock } = dispatch( 'core/block-editor' );
+
+ return {
+ onDelete: () => {
+ removeBlock( clientId, false );
+ },
+ };
+ } )
+)( SocialLinksEdit );
diff --git a/packages/block-library/src/social-links/editor.native.scss b/packages/block-library/src/social-links/editor.native.scss
new file mode 100644
index 00000000000000..14a2c72be16c20
--- /dev/null
+++ b/packages/block-library/src/social-links/editor.native.scss
@@ -0,0 +1,21 @@
+.spacing {
+ margin: 2 * $block-selected-margin;
+}
+
+.placeholder {
+ width: $button-size;
+ height: $button-size;
+ background-color: $light-ultra-dim;
+ border-radius: $button-size / 2;
+ margin-right: 4 * $block-selected-margin;
+ margin-bottom: 2 * $block-selected-margin;
+}
+
+.placeholderDark {
+ background-color: $dark-ultra-dim;
+}
+
+.placeholderWrapper {
+ flex-direction: row;
+ flex-wrap: wrap;
+}
diff --git a/packages/block-library/src/social-links/style.scss b/packages/block-library/src/social-links/style.scss
index 9a6f2adabea130..b1ed31069b1412 100644
--- a/packages/block-library/src/social-links/style.scss
+++ b/packages/block-library/src/social-links/style.scss
@@ -56,191 +56,7 @@
// Provide colors for a range of icons.
.wp-block-social-links:not(.is-style-logos-only) {
// Generic items such as mail, feed, etc.
- .wp-social-link {
- background-color: #f0f0f0;
- color: #444;
- }
-
- .wp-social-link-amazon {
- background-color: #f90;
- color: #fff;
- }
-
- .wp-social-link-bandcamp {
- background-color: #1ea0c3;
- color: #fff;
- }
-
- .wp-social-link-behance {
- background-color: #0757fe;
- color: #fff;
- }
-
- .wp-social-link-codepen {
- background-color: #1e1f26;
- color: #fff;
- }
-
- .wp-social-link-deviantart {
- background-color: #02e49b;
- color: #fff;
- }
-
- .wp-social-link-dribbble {
- background-color: #e94c89;
- color: #fff;
- }
-
- .wp-social-link-dropbox {
- background-color: #4280ff;
- color: #fff;
- }
-
- .wp-social-link-etsy {
- background-color: #f45800;
- color: #fff;
- }
-
- .wp-social-link-facebook {
- background-color: #1778f2;
- color: #fff;
- }
-
- .wp-social-link-fivehundredpx {
- background-color: #000;
- color: #fff;
- }
-
- .wp-social-link-flickr {
- background-color: #0461dd;
- color: #fff;
- }
-
- .wp-social-link-foursquare {
- background-color: #e65678;
- color: #fff;
- }
-
- .wp-social-link-github {
- background-color: #24292d;
- color: #fff;
- }
-
- .wp-social-link-goodreads {
- background-color: #eceadd;
- color: #382110;
- }
-
- .wp-social-link-google {
- background-color: #ea4434;
- color: #fff;
- }
-
- .wp-social-link-instagram {
- background-color: #f00075;
- color: #fff;
- }
-
- .wp-social-link-lastfm {
- background-color: #e21b24;
- color: #fff;
- }
-
- .wp-social-link-linkedin {
- background-color: #0d66c2;
- color: #fff;
- }
-
- .wp-social-link-mastodon {
- background-color: #3288d4;
- color: #fff;
- }
-
- .wp-social-link-medium {
- background-color: #02ab6c;
- color: #fff;
- }
-
- .wp-social-link-meetup {
- background-color: #f6405f;
- color: #fff;
- }
-
- .wp-social-link-pinterest {
- background-color: #e60122;
- color: #fff;
- }
-
- .wp-social-link-pocket {
- background-color: #ef4155;
- color: #fff;
- }
-
- .wp-social-link-reddit {
- background-color: #fe4500;
- color: #fff;
- }
-
- .wp-social-link-skype {
- background-color: #0478d7;
- color: #fff;
- }
-
- .wp-social-link-snapchat {
- background-color: #fefc00;
- color: #fff;
- stroke: #000;
- }
-
- .wp-social-link-soundcloud {
- background-color: #ff5600;
- color: #fff;
- }
-
- .wp-social-link-spotify {
- background-color: #1bd760;
- color: #fff;
- }
-
- .wp-social-link-tumblr {
- background-color: #011835;
- color: #fff;
- }
-
- .wp-social-link-twitch {
- background-color: #6440a4;
- color: #fff;
- }
-
- .wp-social-link-twitter {
- background-color: #1da1f2;
- color: #fff;
- }
-
- .wp-social-link-vimeo {
- background-color: #1eb7ea;
- color: #fff;
- }
-
- .wp-social-link-vk {
- background-color: #4680c2;
- color: #fff;
- }
-
- .wp-social-link-wordpress {
- background-color: #3499cd;
- color: #fff;
- }
-
- .wp-social-link-yelp {
- background-color: #d32422;
- color: #fff;
- }
-
- .wp-social-link-youtube {
- background-color: #f00;
- color: #fff;
- }
+ @import "../social-link/socials-with-bg.scss";
}
// Treatment for logos only style.
@@ -256,151 +72,7 @@
}
}
- .wp-social-link-amazon {
- color: #f90;
- }
-
- .wp-social-link-bandcamp {
- color: #1ea0c3;
- }
-
- .wp-social-link-behance {
- color: #0757fe;
- }
-
- .wp-social-link-codepen {
- color: #1e1f26;
- }
-
- .wp-social-link-deviantart {
- color: #02e49b;
- }
-
- .wp-social-link-dribbble {
- color: #e94c89;
- }
-
- .wp-social-link-dropbox {
- color: #4280ff;
- }
-
- .wp-social-link-etsy {
- color: #f45800;
- }
-
- .wp-social-link-facebook {
- color: #1778f2;
- }
-
- .wp-social-link-fivehundredpx {
- color: #000;
- }
-
- .wp-social-link-flickr {
- color: #0461dd;
- }
-
- .wp-social-link-foursquare {
- color: #e65678;
- }
-
- .wp-social-link-github {
- color: #24292d;
- }
-
- .wp-social-link-goodreads {
- color: #382110;
- }
-
- .wp-social-link-google {
- color: #ea4434;
- }
-
- .wp-social-link-instagram {
- color: #f00075;
- }
-
- .wp-social-link-lastfm {
- color: #e21b24;
- }
-
- .wp-social-link-linkedin {
- color: #0d66c2;
- }
-
- .wp-social-link-mastodon {
- color: #3288d4;
- }
-
- .wp-social-link-medium {
- color: #02ab6c;
- }
-
- .wp-social-link-meetup {
- color: #f6405f;
- }
-
- .wp-social-link-pinterest {
- color: #e60122;
- }
-
- .wp-social-link-pocket {
- color: #ef4155;
- }
-
- .wp-social-link-reddit {
- color: #fe4500;
- }
-
- .wp-social-link-skype {
- color: #0478d7;
- }
-
- .wp-social-link-snapchat {
- color: #fff;
- stroke: #000;
- }
-
- .wp-social-link-soundcloud {
- color: #ff5600;
- }
-
- .wp-social-link-spotify {
- color: #1bd760;
- }
-
- .wp-social-link-tumblr {
- color: #011835;
- }
-
- .wp-social-link-twitch {
- color: #6440a4;
- }
-
- .wp-social-link-twitter {
- color: #1da1f2;
- }
-
- .wp-social-link-vimeo {
- color: #1eb7ea;
- }
-
- .wp-social-link-vk {
- color: #4680c2;
- }
-
- .wp-social-link-wordpress {
- color: #3499cd;
- }
-
- .wp-social-link-yelp {
- background-color: #d32422;
- color: #fff;
- }
-
- .wp-social-link-youtube {
- color: #f00;
- }
+ @import "../social-link/socials-without-bg.scss";
}
// Treatment for pill shape style.
diff --git a/packages/blocks/src/api/parser.js b/packages/blocks/src/api/parser.js
index 72b45bb12d9de7..34b86fa724a4fa 100644
--- a/packages/blocks/src/api/parser.js
+++ b/packages/blocks/src/api/parser.js
@@ -10,7 +10,7 @@ import { flow, get, castArray, mapValues, omit, stubFalse } from 'lodash';
import { autop } from '@wordpress/autop';
import { applyFilters } from '@wordpress/hooks';
import { parse as defaultParse } from '@wordpress/block-serialization-default-parser';
-
+import { Platform } from '@wordpress/element';
/**
* Internal dependencies
*/
@@ -434,7 +434,8 @@ export function createBlockWithFallback( blockNode ) {
if ( name && name.indexOf( 'core/social-link-' ) === 0 ) {
// Capture `social-link-wordpress` into `{"service":"wordpress"}`
attributes.service = name.substring( 17 );
- name = 'core/social-link';
+ // Display social link service name for mobile platform
+ name = Platform.OS === 'web' ? 'core/social-link' : name;
}
// Fallback content may be upgraded from classic editor expecting implicit
diff --git a/packages/primitives/src/svg/index.native.js b/packages/primitives/src/svg/index.native.js
index 30b44cb83833d4..4d3bf26acf1acd 100644
--- a/packages/primitives/src/svg/index.native.js
+++ b/packages/primitives/src/svg/index.native.js
@@ -2,6 +2,12 @@
* External dependencies
*/
import { Svg } from 'react-native-svg';
+import { Animated } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
/**
* Internal dependencies
@@ -20,7 +26,16 @@ export {
Stop,
} from 'react-native-svg';
-export const SVG = ( { className = '', isPressed, ...props } ) => {
+const AnimatedSvg = Animated.createAnimatedComponent(
+ forwardRef( ( props, ref ) => )
+);
+
+export const SVG = ( {
+ className = '',
+ isPressed,
+ animated = false,
+ ...props
+} ) => {
const colorScheme = props.colorScheme || 'light';
const stylesFromClasses = className
.split( ' ' )
@@ -38,8 +53,10 @@ export const SVG = ( { className = '', isPressed, ...props } ) => {
const appliedProps = { ...props, style: styleValues };
+ const SvgWrapper = animated ? AnimatedSvg : Svg;
+
return (
-