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

Add "open in new tab" feature to Social Links Block #25468

Merged
merged 6 commits into from
Sep 19, 2020
Merged

Add "open in new tab" feature to Social Links Block #25468

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6da2202
add target and rel setting in SocialLink Block
fabiankaegy Sep 18, 2020
3ae51cd
Revert "add target and rel setting in SocialLink Block"
fabiankaegy Sep 18, 2020
f3aa393
use context to open Social Links in new tab
fabiankaegy Sep 18, 2020
1900a5e
Update packages/block-library/src/social-links/edit.js
fabiankaegy Sep 18, 2020
b1be176
Update packages/block-library/src/social-links/edit.js
fabiankaegy Sep 18, 2020
5b372ee
update test fixture of social links block
fabiankaegy Sep 19, 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
6 changes: 6 additions & 0 deletions packages/block-library/src/social-link/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
},
"label": {
"type": "string"
},
"linkTarget": {
"type": "string"
},
"rel": {
"type": "string"
}
},
"supports": {
Expand Down
94 changes: 63 additions & 31 deletions packages/block-library/src/social-link/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,59 @@ import classNames from 'classnames';
*/
import {
InspectorControls,
URLPopover,
URLInput,
__experimentalBlock as Block,
__experimentalLinkControl as LinkControl,
} from '@wordpress/block-editor';
import { Fragment, useState } from '@wordpress/element';
import {
Button,
PanelBody,
PanelRow,
TextControl,
ToggleControl,
Popover,
} from '@wordpress/components';
import { __, sprintf } from '@wordpress/i18n';
import { keyboardReturn } from '@wordpress/icons';

/**
* Internal dependencies
*/
import { getIconBySite, getNameBySite } from './social-list';

const NEW_TAB_REL = 'noreferrer noopener';

const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
const { url, service, label } = attributes;
const [ showURLPopover, setPopover ] = useState( false );
const { url, service, label, rel, linkTarget } = attributes;
const [ isURLPickerOpen, setIsURLPickerOpen ] = useState( false );
const classes = classNames( 'wp-social-link', 'wp-social-link-' + service, {
'wp-social-link__is-incomplete': ! url,
} );

const IconComponent = getIconBySite( service );
const socialLinkName = getNameBySite( service );

const onToggleOpenInNewTab = ( value ) => {
const newLinkTarget = value ? '_blank' : undefined;

let updatedRel = rel;
if ( newLinkTarget && ! rel ) {
updatedRel = NEW_TAB_REL;
} else if ( ! newLinkTarget && rel === NEW_TAB_REL ) {
updatedRel = undefined;
}

setAttributes( {
linkTarget: newLinkTarget,
rel: updatedRel,
} );
};

const onSetLinkRel = ( value ) => {
setAttributes( { rel: value } );
};

const opensInNewTab = linkTarget === '_blank';

return (
<Fragment>
<InspectorControls>
Expand All @@ -61,36 +85,44 @@ const SocialLinkEdit = ( { attributes, setAttributes, isSelected } ) => {
/>
</PanelRow>
</PanelBody>
<PanelBody title={ __( 'Link settings' ) }>
<ToggleControl
label={ __( 'Open in new tab' ) }
onChange={ onToggleOpenInNewTab }
checked={ opensInNewTab }
/>
<TextControl
label={ __( 'Link rel' ) }
value={ rel || '' }
onChange={ onSetLinkRel }
/>
</PanelBody>
</InspectorControls>
<Block.li className={ classes }>
<Button onClick={ () => setPopover( true ) }>
<Button onClick={ () => setIsURLPickerOpen( true ) }>
<IconComponent />
{ isSelected && showURLPopover && (
<URLPopover onClose={ () => setPopover( false ) }>
<form
className="block-editor-url-popover__link-editor"
onSubmit={ ( event ) => {
event.preventDefault();
setPopover( false );
{ isSelected && isURLPickerOpen && (
<Popover
position="bottom center"
onClose={ () => setIsURLPickerOpen( false ) }
>
<LinkControl
className="wp-block-navigation-link__inline-link-input"
value={ { url, opensInNewTab } }
onChange={ ( {
url: newURL = '',
opensInNewTab: newOpensInNewTab,
} ) => {
setAttributes( { url: newURL } );

if ( opensInNewTab !== newOpensInNewTab ) {
onToggleOpenInNewTab(
newOpensInNewTab
);
}
} }
>
<div className="block-editor-url-input">
<URLInput
value={ url }
onChange={ ( nextURL ) =>
setAttributes( { url: nextURL } )
}
placeholder={ __( 'Enter address' ) }
disableSuggestions={ true }
/>
</div>
<Button
icon={ keyboardReturn }
label={ __( 'Apply' ) }
type="submit"
/>
</form>
</URLPopover>
/>
</Popover>
) }
</Button>
</Block.li>
Expand Down
4 changes: 3 additions & 1 deletion 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 @@ -16,6 +16,8 @@ function render_block_core_social_link( $attributes ) {
$service = ( isset( $attributes['service'] ) ) ? $attributes['service'] : 'Icon';
$url = ( isset( $attributes['url'] ) ) ? $attributes['url'] : false;
$label = ( isset( $attributes['label'] ) ) ? $attributes['label'] : block_core_social_link_get_name( $service );
$target = ( isset( $attributes['linkTarget'] ) ) ? 'target="' . esc_attr( $attributes['linkTarget'] ) . '"' : '';
$rel = ( isset( $attributes['rel'] ) ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
$class_name = isset( $attributes['className'] ) ? ' ' . $attributes['className'] : false;

// Don't render a link if there is no URL set.
Expand All @@ -24,7 +26,7 @@ function render_block_core_social_link( $attributes ) {
}

$icon = block_core_social_link_get_icon( $service );
return '<li class="wp-social-link wp-social-link-' . esc_attr( $service ) . esc_attr( $class_name ) . '"><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '"> ' . $icon . '</a></li>';
return '<li class="wp-social-link wp-social-link-' . esc_attr( $service ) . esc_attr( $class_name ) . '"><a href="' . esc_url( $url ) . '" aria-label="' . esc_attr( $label ) . '"' . $rel . $target . '> ' . $icon . '</a></li>';
}

/**
Expand Down