Add link option in PostTitle block (#25341)

* add link option in post title * fix indentation from spaces
WordPress · Sep 16, 2020 · 3c7a5aa · 3c7a5aa
1 parent b2a76df
commit 3c7a5aa
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 17 deletions.
diff --git a/packages/block-library/src/post-title/block.json b/packages/block-library/src/post-title/block.json
@@ -12,6 +12,19 @@
 		"level": {
 			"type": "number",
 			"default": 2
+		},
+		"makeLink": {
+			"type": "boolean",
+			"default": false
+		},
+		"rel": {
+			"type": "string",
+			"attribute": "rel",
+			"default": ""
+		},
+		"linkTarget": {
+			"type": "string",
+			"default": "_blank"
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/post-title/edit.js b/packages/block-library/src/post-title/edit.js
@@ -10,9 +10,15 @@ import { useSelect } from '@wordpress/data';
 import {
 	AlignmentToolbar,
 	BlockControls,
+	InspectorControls,
 	__experimentalBlock as Block,
 } from '@wordpress/block-editor';
-import { ToolbarGroup } from '@wordpress/components';
+import {
+	ToolbarGroup,
+	ToggleControl,
+	TextControl,
+	PanelBody,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -21,12 +27,10 @@ import { __ } from '@wordpress/i18n';
 import HeadingLevelDropdown from '../heading/heading-level-dropdown';
 
 export default function PostTitleEdit( {
-	attributes,
+	attributes: { level, textAlign, makeLink, rel, linkTarget },
 	setAttributes,
-	context,
+	context: { postType, postId },
 } ) {
-	const { level, textAlign } = attributes;
-	const { postType, postId } = context;
 	const tagName = 0 === level ? 'p' : 'h' + level;
 
 	const post = useSelect(
@@ -44,6 +48,14 @@ export default function PostTitleEdit( {
 	}
 
 	const BlockWrapper = Block[ tagName ];
+	let title = post.title || __( 'Post Title' );
+	if ( makeLink ) {
+		title = (
+			<a href={ post.link } target={ linkTarget } rel={ rel }>
+				{ title }
+			</a>
+		);
+	}
 
 	return (
 		<>
@@ -63,12 +75,43 @@ export default function PostTitleEdit( {
 					} }
 				/>
 			</BlockControls>
+			<InspectorControls>
+				<PanelBody title={ __( 'Link settings' ) }>
+					<ToggleControl
+						label={ __( 'Make title a link' ) }
+						onChange={ () =>
+							setAttributes( { makeLink: ! makeLink } )
+						}
+						checked={ makeLink }
+					/>
+					{ makeLink && (
+						<>
+							<ToggleControl
+								label={ __( 'Open in new tab' ) }
+								onChange={ ( value ) =>
+									setAttributes( {
+										linkTarget: value ? '_blank' : '_self',
+									} )
+								}
+								checked={ linkTarget === '_blank' }
+							/>
+							<TextControl
+								label={ __( 'Link rel' ) }
+								value={ rel }
+								onChange={ ( newRel ) =>
+									setAttributes( { rel: newRel } )
+								}
+							/>
+						</>
+					) }
+				</PanelBody>
+			</InspectorControls>
 			<BlockWrapper
 				className={ classnames( {
 					[ `has-text-align-${ textAlign }` ]: textAlign,
 				} ) }
 			>
-				{ post.title || __( 'Post Title' ) }
+				{ title }
 			</BlockWrapper>
 		</>
 	);

diff --git a/packages/block-library/src/post-title/index.php b/packages/block-library/src/post-title/index.php
@@ -19,18 +19,24 @@ function render_block_core_post_title( $attributes, $content, $block ) {
 		return '';
 	}
 
+	$post_ID          = $block->context['postId'];
 	$tag_name         = 'h2';
 	$align_class_name = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
 
 	if ( isset( $attributes['level'] ) ) {
 		$tag_name = 0 === $attributes['level'] ? 'p' : 'h' . $attributes['level'];
 	}
 
+	$title = get_the_title( $post_ID );
+	if ( isset( $attributes['makeLink'] ) && $attributes['makeLink'] ) {
+		$title = sprintf( '<a href="%1s" target="%2s" rel="%3s">%4s</a>', get_the_permalink( $post_ID ), $attributes['linkTarget'], $attributes['rel'], $title );
+	}
+
 	return sprintf(
 		'<%1$s class="%2$s">%3$s</%1$s>',
 		$tag_name,
 		esc_attr( $align_class_name ),
-		get_the_title( $block->context['postId'] )
+		$title
 	);
 }
 

diff --git a/packages/e2e-tests/fixtures/blocks/core__post-title.json b/packages/e2e-tests/fixtures/blocks/core__post-title.json
@@ -1,12 +1,15 @@
 [
-    {
-        "clientId": "_clientId_0",
-        "name": "core/post-title",
-        "isValid": true,
-        "attributes": {
-            "level": 2
-        },
-        "innerBlocks": [],
-        "originalContent": ""
-    }
+	{
+		"clientId": "_clientId_0",
+		"name": "core/post-title",
+		"isValid": true,
+		"attributes": {
+			"level": 2,
+			"makeLink": false,
+			"linkTarget": "_blank",
+			"rel": ""
+		},
+		"innerBlocks": [],
+		"originalContent": ""
+	}
 ]