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 all commits
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
3 changes: 3 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 @@ -15,6 +15,9 @@
"type": "string"
}
},
"usesContext": [
"openInNewTab"
],
"supports": {
"reusable": false,
"html": false,
Expand Down
15 changes: 12 additions & 3 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 @@ -8,11 +8,15 @@
/**
* Renders the `core/social-link` block on server.
*
* @param array $attributes The block attributes.
* @param Array $attributes The block attributes.
* @param String $content InnerBlocks content of the Block.
* @param WPBlock $block Block object.
*
* @return string Rendered HTML of the referenced block.
*/
function render_block_core_social_link( $attributes ) {
function render_block_core_social_link( $attributes, $content, $block ) {
$open_in_new_tab = $block->context['openInNewTab'];

$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 );
Expand All @@ -23,8 +27,13 @@ function render_block_core_social_link( $attributes ) {
return '';
}

$attribute = '';
if ( $open_in_new_tab ) {
$attribute = 'rel="noopener nofollow" target="_blank"';
}

$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 ) . '" ' . $attribute . '> ' . $icon . '</a></li>';
}

/**
Expand Down
9 changes: 9 additions & 0 deletions packages/block-library/src/social-links/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
{
"name": "core/social-links",
"category": "widgets",
"attributes": {
"openInNewTab": {
"type": "boolean",
"default": false
}
},
"providesContext": {
"openInNewTab": "openInNewTab"
},
"supports": {
"align": [
"left",
Expand Down
40 changes: 31 additions & 9 deletions packages/block-library/src/social-links/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,15 @@
* WordPress dependencies
*/

import { Fragment } from '@wordpress/element';

import {
InnerBlocks,
__experimentalBlock as Block,
InspectorControls,
} from '@wordpress/block-editor';
import { ToggleControl, PanelBody } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const ALLOWED_BLOCKS = [ 'core/social-link' ];

Expand All @@ -22,16 +27,33 @@ const TEMPLATE = [
[ 'core/social-link', { service: 'youtube' } ],
];

export function SocialLinksEdit() {
export function SocialLinksEdit( props ) {
const {
attributes: { openInNewTab },
setAttributes,
} = props;
return (
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
templateLock={ false }
template={ TEMPLATE }
orientation="horizontal"
__experimentalTagName={ Block.ul }
__experimentalAppenderTagName="li"
/>
<Fragment>
<InspectorControls>
<PanelBody title={ __( 'Link settings' ) }>
<ToggleControl
label={ __( 'Open links in new tab' ) }
checked={ openInNewTab }
onChange={ () =>
setAttributes( { openInNewTab: ! openInNewTab } )
}
/>
</PanelBody>
</InspectorControls>
<InnerBlocks
allowedBlocks={ ALLOWED_BLOCKS }
templateLock={ false }
template={ TEMPLATE }
orientation="horizontal"
__experimentalTagName={ Block.ul }
__experimentalAppenderTagName="li"
/>
</Fragment>
);
}

Expand Down
4 changes: 3 additions & 1 deletion packages/e2e-tests/fixtures/blocks/core__social-links.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
"clientId": "_clientId_0",
"name": "core/social-links",
"isValid": true,
"attributes": {},
"attributes": {
"openInNewTab": false
},
"innerBlocks": [
{
"clientId": "_clientId_0",
Expand Down