From 8e315718f21b2ae2ced81b2656a66ef0444405ec Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 4 Feb 2022 10:02:37 +0200 Subject: [PATCH] [Block Library]: Add new `Read More` block (post link) (#37649) * [Block Library - Post Link]: Add new post link block * rename to `read more` * move block declaration * change placeholder text --- docs/reference-guides/core-blocks.md | 9 +++ lib/blocks.php | 1 + packages/block-library/src/index.js | 2 + .../block-library/src/read-more/block.json | 56 +++++++++++++++++++ packages/block-library/src/read-more/edit.js | 50 +++++++++++++++++ packages/block-library/src/read-more/index.js | 18 ++++++ .../block-library/src/read-more/index.php | 45 +++++++++++++++ .../block-library/src/read-more/style.scss | 12 ++++ packages/block-library/src/style.scss | 1 + .../fixtures/blocks/core__read-more.html | 1 + .../fixtures/blocks/core__read-more.json | 12 ++++ .../blocks/core__read-more.parsed.json | 9 +++ .../blocks/core__read-more.serialized.html | 1 + 13 files changed, 217 insertions(+) create mode 100644 packages/block-library/src/read-more/block.json create mode 100644 packages/block-library/src/read-more/edit.js create mode 100644 packages/block-library/src/read-more/index.js create mode 100644 packages/block-library/src/read-more/index.php create mode 100644 packages/block-library/src/read-more/style.scss create mode 100644 test/integration/fixtures/blocks/core__read-more.html create mode 100644 test/integration/fixtures/blocks/core__read-more.json create mode 100644 test/integration/fixtures/blocks/core__read-more.parsed.json create mode 100644 test/integration/fixtures/blocks/core__read-more.serialized.html diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 9c87938538faa..0244c56110908 100644 --- a/docs/reference-guides/core-blocks.md +++ b/docs/reference-guides/core-blocks.md @@ -656,6 +656,15 @@ Give quoted text visual emphasis. "In quoting others, we cite ourselves." — Ju - **Supports:** anchor, typography (fontSize, lineHeight) - **Attributes:** align, citation, value +## Read More + +Displays the link of a post, page, or any other content-type. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/read-more)) + +- **Name:** core/read-more +- **Category:** theme +- **Supports:** color (background, gradients, ~~text~~), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~ +- **Attributes:** content, linkTarget + ## RSS Display entries from any RSS or Atom feed. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/rss)) diff --git a/lib/blocks.php b/lib/blocks.php index f0b3d0d7930ac..ba32c35cb7817 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -103,6 +103,7 @@ function gutenberg_reregister_core_block_types() { 'query-pagination-numbers.php' => 'core/query-pagination-numbers', 'query-pagination-previous.php' => 'core/query-pagination-previous', 'query-title.php' => 'core/query-title', + 'read-more.php' => 'core/read-more', 'rss.php' => 'core/rss', 'search.php' => 'core/search', 'shortcode.php' => 'core/shortcode', diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index c778208fe0a0a..06bccb3de38f9 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -84,6 +84,7 @@ import * as queryPaginationPrevious from './query-pagination-previous'; import * as queryTitle from './query-title'; import * as quote from './quote'; import * as reusableBlock from './block'; +import * as readMore from './read-more'; import * as rss from './rss'; import * as search from './search'; import * as separator from './separator'; @@ -271,6 +272,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = process.env postCommentsCount, postCommentsForm, postCommentsLink, + readMore, ] : [] ), ].forEach( registerBlock ); diff --git a/packages/block-library/src/read-more/block.json b/packages/block-library/src/read-more/block.json new file mode 100644 index 0000000000000..c9068e12d6978 --- /dev/null +++ b/packages/block-library/src/read-more/block.json @@ -0,0 +1,56 @@ +{ + "$schema": "https://schemas.wp.org/trunk/block.json", + "apiVersion": 2, + "name": "core/read-more", + "title": "Read More", + "category": "theme", + "description": "Displays the link of a post, page, or any other content-type.", + "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-read-more" +} diff --git a/packages/block-library/src/read-more/edit.js b/packages/block-library/src/read-more/edit.js new file mode 100644 index 0000000000000..3458d0206d8fb --- /dev/null +++ b/packages/block-library/src/read-more/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 ReadMore( { + 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/read-more/index.js b/packages/block-library/src/read-more/index.js new file mode 100644 index 0000000000000..e463830969348 --- /dev/null +++ b/packages/block-library/src/read-more/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/read-more/index.php b/packages/block-library/src/read-more/index.php new file mode 100644 index 0000000000000..82db9228f5bd1 --- /dev/null +++ b/packages/block-library/src/read-more/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/read-more` block on the server. + */ +function register_block_core_read_more() { + register_block_type_from_metadata( + __DIR__ . '/read-more', + array( + 'render_callback' => 'render_block_core_read_more', + ) + ); +} +add_action( 'init', 'register_block_core_read_more' ); diff --git a/packages/block-library/src/read-more/style.scss b/packages/block-library/src/read-more/style.scss new file mode 100644 index 0000000000000..f0e0291eb6ffc --- /dev/null +++ b/packages/block-library/src/read-more/style.scss @@ -0,0 +1,12 @@ +.wp-block-read-more { + 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..3cef1655441ab 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -35,6 +35,7 @@ @import "./post-template/style.scss"; @import "./query-pagination/style.scss"; @import "./quote/style.scss"; +@import "./read-more/style.scss"; @import "./rss/style.scss"; @import "./search/style.scss"; @import "./separator/style.scss"; diff --git a/test/integration/fixtures/blocks/core__read-more.html b/test/integration/fixtures/blocks/core__read-more.html new file mode 100644 index 0000000000000..1cb97a0f7e89a --- /dev/null +++ b/test/integration/fixtures/blocks/core__read-more.html @@ -0,0 +1 @@ + diff --git a/test/integration/fixtures/blocks/core__read-more.json b/test/integration/fixtures/blocks/core__read-more.json new file mode 100644 index 0000000000000..238899e82ebe4 --- /dev/null +++ b/test/integration/fixtures/blocks/core__read-more.json @@ -0,0 +1,12 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/read-more", + "isValid": true, + "attributes": { + "linkTarget": "_self" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/fixtures/blocks/core__read-more.parsed.json b/test/integration/fixtures/blocks/core__read-more.parsed.json new file mode 100644 index 0000000000000..3c79761e059f3 --- /dev/null +++ b/test/integration/fixtures/blocks/core__read-more.parsed.json @@ -0,0 +1,9 @@ +[ + { + "blockName": "core/read-more", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + } +] diff --git a/test/integration/fixtures/blocks/core__read-more.serialized.html b/test/integration/fixtures/blocks/core__read-more.serialized.html new file mode 100644 index 0000000000000..1cb97a0f7e89a --- /dev/null +++ b/test/integration/fixtures/blocks/core__read-more.serialized.html @@ -0,0 +1 @@ +