From 0be3b29c45953a0933fa60524c8498c3432de4ff Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 29 Dec 2021 08:45:05 +0200 Subject: [PATCH] [Block Library - Post Link]: Add new post link block --- docs/reference-guides/core-blocks.md | 9 +++ lib/blocks.php | 1 + packages/block-library/src/index.js | 2 + .../block-library/src/post-link/block.json | 57 +++++++++++++++++++ packages/block-library/src/post-link/edit.js | 50 ++++++++++++++++ packages/block-library/src/post-link/index.js | 18 ++++++ .../block-library/src/post-link/index.php | 45 +++++++++++++++ .../block-library/src/post-link/style.scss | 12 ++++ packages/block-library/src/style.scss | 1 + .../fixtures/blocks/core__post-link.html | 1 + .../fixtures/blocks/core__post-link.json | 12 ++++ .../blocks/core__post-link.parsed.json | 9 +++ .../blocks/core__post-link.serialized.html | 1 + 13 files changed, 218 insertions(+) create mode 100644 packages/block-library/src/post-link/block.json create mode 100644 packages/block-library/src/post-link/edit.js create mode 100644 packages/block-library/src/post-link/index.js create mode 100644 packages/block-library/src/post-link/index.php create mode 100644 packages/block-library/src/post-link/style.scss create mode 100644 test/integration/fixtures/blocks/core__post-link.html create mode 100644 test/integration/fixtures/blocks/core__post-link.json create mode 100644 test/integration/fixtures/blocks/core__post-link.parsed.json create mode 100644 test/integration/fixtures/blocks/core__post-link.serialized.html diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 1b460219d5fda..3d12f0ef0d88f 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -530,6 +530,15 @@ Display a post's featured image. - **Supports:** align (center, full, left, right, wide), color (~~background~~, ~~text~~), spacing (margin, padding), ~~html~~ - **Attributes:** height, isLink, scale, width +## Post Link + +Add the link of this post. + +- **Name:** core/post-link +- **Category:** theme +- **Supports:** color (background, gradients, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Attributes:** content, linkTarget + ## Post Navigation Link Displays the next or previous post link that is adjacent to the current post. diff --git a/lib/blocks.php b/lib/blocks.php index 4983d0ac8be3a..ed0d468dc5309 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -92,6 +92,7 @@ function gutenberg_reregister_core_block_types() { 'post-date.php' => 'core/post-date', 'post-excerpt.php' => 'core/post-excerpt', 'post-featured-image.php' => 'core/post-featured-image', + 'post-link.php' => 'core/post-link', 'post-navigation-link.php' => 'core/post-navigation-link', 'post-terms.php' => 'core/post-terms', 'post-title.php' => 'core/post-title', diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 037eaa0f3df70..657bdf9a64bae 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -69,6 +69,7 @@ import * as postContent from './post-content'; import * as postDate from './post-date'; import * as postExcerpt from './post-excerpt'; import * as postFeaturedImage from './post-featured-image'; +import * as postLink from './post-link'; import * as postNavigationLink from './post-navigation-link'; import * as postTemplate from './post-template'; import * as postTerms from './post-terms'; @@ -193,6 +194,7 @@ export const __experimentalGetCoreBlocks = () => [ postAuthor, postDate, postTerms, + postLink, postNavigationLink, postTemplate, queryPagination, diff --git a/packages/block-library/src/post-link/block.json b/packages/block-library/src/post-link/block.json new file mode 100644 index 0000000000000..017e532fd8d57 --- /dev/null +++ b/packages/block-library/src/post-link/block.json @@ -0,0 +1,57 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "core/post-link", + "title": "Post Link", + "category": "theme", + "description": "Add the link of this post.", + "keywords": [ "read more" ], + "textdomain": "default", + "attributes": { + "content": { + "type": "string" + }, + "linkTarget": { + "type": "string", + "default": "_self" + } + }, + "usesContext": [ "postId" ], + "supports": { + "html": false, + "color": { + "gradients": true, + "text": false + }, + "typography": { + "fontSize": true, + "lineHeight": true, + "__experimentalFontFamily": true, + "__experimentalFontWeight": true, + "__experimentalFontStyle": true, + "__experimentalTextTransform": true, + "__experimentalLetterSpacing": true, + "__experimentalTextDecoration": true, + "__experimentalDefaultControls": { + "fontSize": true, + "textDecoration": true + } + }, + "spacing": { + "margin": [ "top", "bottom" ], + "padding": true, + "__experimentalDefaultControls": { + "padding": true + } + }, + "__experimentalBorder": { + "color": true, + "radius": true, + "width": true, + "__experimentalDefaultControls": { + "width": true + } + } + }, + "style": "wp-block-post-link" +} diff --git a/packages/block-library/src/post-link/edit.js b/packages/block-library/src/post-link/edit.js new file mode 100644 index 0000000000000..f5a6fb0493a2b --- /dev/null +++ b/packages/block-library/src/post-link/edit.js @@ -0,0 +1,50 @@ +/** + * WordPress dependencies + */ +import { + InspectorControls, + RichText, + useBlockProps, +} from '@wordpress/block-editor'; +import { ToggleControl, PanelBody } from '@wordpress/components'; +import { createBlock, getDefaultBlockName } from '@wordpress/blocks'; +import { __ } from '@wordpress/i18n'; + +export default function PostLink( { + attributes: { content, linkTarget }, + setAttributes, + insertBlocksAfter, +} ) { + const blockProps = useBlockProps(); + return ( + <> + + + + setAttributes( { + linkTarget: value ? '_blank' : '_self', + } ) + } + checked={ linkTarget === '_blank' } + /> + + + + setAttributes( { content: newValue } ) + } + __unstableOnSplitAtEnd={ () => + insertBlocksAfter( createBlock( getDefaultBlockName() ) ) + } + withoutInteractiveFormatting={ true } + { ...blockProps } + /> + + ); +} diff --git a/packages/block-library/src/post-link/index.js b/packages/block-library/src/post-link/index.js new file mode 100644 index 0000000000000..e463830969348 --- /dev/null +++ b/packages/block-library/src/post-link/index.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { link as icon } from '@wordpress/icons'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + icon, + edit, +}; diff --git a/packages/block-library/src/post-link/index.php b/packages/block-library/src/post-link/index.php new file mode 100644 index 0000000000000..bcb9e5314fb57 --- /dev/null +++ b/packages/block-library/src/post-link/index.php @@ -0,0 +1,45 @@ +context['postId'] ) ) { + return ''; + } + + $post_ID = $block->context['postId']; + $justify_class_name = empty( $attributes['justifyContent'] ) ? '' : "is-justified-{$attributes['justifyContent']}"; + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $justify_class_name ) ); + $more_text = ! empty( $attributes['content'] ) ? $attributes['content'] : __( 'Read more' ); + return sprintf( + '%4s', + $wrapper_attributes, + get_the_permalink( $post_ID ), + esc_attr( $attributes['linkTarget'] ), + $more_text + ); +} + +/** + * Registers the `core/post-link` block on the server. + */ +function register_block_core_post_link() { + register_block_type_from_metadata( + __DIR__ . '/post-link', + array( + 'render_callback' => 'render_block_core_post_link', + ) + ); +} +add_action( 'init', 'register_block_core_post_link' ); diff --git a/packages/block-library/src/post-link/style.scss b/packages/block-library/src/post-link/style.scss new file mode 100644 index 0000000000000..d0ee4c9345f98 --- /dev/null +++ b/packages/block-library/src/post-link/style.scss @@ -0,0 +1,12 @@ +.wp-block-post-link { + display: block; + width: fit-content; + &:not([style*="text-decoration"]) { + text-decoration: none; + + &:focus, + &:active { + text-decoration: none; + } + } +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 7174095a59576..3fb48efdf1fa1 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -28,6 +28,7 @@ @import "./post-comments-form/style.scss"; @import "./post-excerpt/style.scss"; @import "./post-featured-image/style.scss"; +@import "./post-link/style.scss"; @import "./post-terms/style.scss"; @import "./post-title/style.scss"; @import "./preformatted/style.scss"; diff --git a/test/integration/fixtures/blocks/core__post-link.html b/test/integration/fixtures/blocks/core__post-link.html new file mode 100644 index 0000000000000..c6155215ec598 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-link.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__post-link.json b/test/integration/fixtures/blocks/core__post-link.json new file mode 100644 index 0000000000000..c0d1f675eb812 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-link.json @@ -0,0 +1,12 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/post-link", + "isValid": true, + "attributes": { + "linkTarget": "_self" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__post-link.parsed.json b/test/integration/fixtures/blocks/core__post-link.parsed.json new file mode 100644 index 0000000000000..17d38d3612a27 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-link.parsed.json @@ -0,0 +1,9 @@ +[ + { + "blockName": "core/post-link", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__post-link.serialized.html b/test/integration/fixtures/blocks/core__post-link.serialized.html new file mode 100644 index 0000000000000..c6155215ec598 --- /dev/null +++ b/test/integration/fixtures/blocks/core__post-link.serialized.html @@ -0,0 +1 @@ +