From d4bdb05cb4d609a7e3acedf77da6b9765f74e089 Mon Sep 17 00:00:00 2001 From: Luke Walczak Date: Thu, 9 Jul 2020 19:23:38 +0200 Subject: [PATCH] [RNMobile] Social icons (#23017) --- .../block-selection-button.native.js | 2 +- .../src/components/block-list/index.native.js | 67 ++-- .../components/inner-blocks/index.native.js | 2 + packages/block-library/src/index.native.js | 33 +- .../src/social-link/edit.native.js | 209 +++++++++++ .../src/social-link/editor.native.scss | 23 ++ .../src/social-link/socials-with-bg.scss | 185 ++++++++++ .../src/social-link/socials-without-bg.scss | 145 ++++++++ .../src/social-links/edit.native.js | 144 ++++++++ .../src/social-links/editor.native.scss | 21 ++ .../block-library/src/social-links/style.scss | 332 +----------------- packages/blocks/src/api/parser.js | 5 +- packages/primitives/src/svg/index.native.js | 21 +- 13 files changed, 823 insertions(+), 366 deletions(-) create mode 100644 packages/block-library/src/social-link/edit.native.js create mode 100644 packages/block-library/src/social-link/editor.native.scss create mode 100644 packages/block-library/src/social-link/socials-with-bg.scss create mode 100644 packages/block-library/src/social-link/socials-without-bg.scss create mode 100644 packages/block-library/src/social-links/edit.native.js create mode 100644 packages/block-library/src/social-links/editor.native.scss 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 24eb34e1d68cb..c9daaa080205d 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 0370d1baec6a4..d882c0ad671ab 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 c2c0a0025c4a8..433ad8c2b4ee7 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 db82756ad1b29..f06eb84359035 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 0000000000000..b1fe5814c1f56 --- /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 0000000000000..8ba00f70b4191 --- /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 0000000000000..ec46f3626bf4d --- /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 0000000000000..89d05e6fd37cb --- /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 0000000000000..93b372dc08de1 --- /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 0000000000000..14a2c72be16c2 --- /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 9a6f2adabea13..b1ed31069b141 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 72b45bb12d9de..34b86fa724a4f 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 30b44cb83833d..4d3bf26acf1ac 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 ( -