From 886f7b4ec824dc4840d958104d13d0a73d3f5ca8 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Fri, 5 Mar 2021 15:33:02 +0200 Subject: [PATCH 01/13] WIP for term-description block --- packages/block-library/src/index.js | 2 + .../src/term-description/block.json | 10 +++++ .../src/term-description/edit.js | 18 ++++++++ .../src/term-description/editor.scss | 11 +++++ .../src/term-description/index.js | 20 +++++++++ .../src/term-description/index.php | 45 +++++++++++++++++++ 6 files changed, 106 insertions(+) create mode 100644 packages/block-library/src/term-description/block.json create mode 100644 packages/block-library/src/term-description/edit.js create mode 100644 packages/block-library/src/term-description/editor.scss create mode 100644 packages/block-library/src/term-description/index.js create mode 100644 packages/block-library/src/term-description/index.php diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 37cafb85f8410c..fe4a354f76487b 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -90,6 +90,7 @@ import * as postExcerpt from './post-excerpt'; import * as postFeaturedImage from './post-featured-image'; import * as postHierarchicalTerms from './post-hierarchical-terms'; import * as postTags from './post-tags'; +import * as termDescription from './term-description'; /** * Function to register an individual block. @@ -242,6 +243,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = postHierarchicalTerms, postTags, postNavigationLink, + termDescription, ] : [] ), ].forEach( registerBlock ); diff --git a/packages/block-library/src/term-description/block.json b/packages/block-library/src/term-description/block.json new file mode 100644 index 00000000000000..a5084f74cf17f7 --- /dev/null +++ b/packages/block-library/src/term-description/block.json @@ -0,0 +1,10 @@ +{ + "apiVersion": 2, + "name": "core/term-description", + "category": "design", + "supports": { + "align": [ "wide", "full" ], + "html": false + }, + "editorStyle": "wp-block-term-description-editor" +} diff --git a/packages/block-library/src/term-description/edit.js b/packages/block-library/src/term-description/edit.js new file mode 100644 index 00000000000000..46ef5d7647d4b4 --- /dev/null +++ b/packages/block-library/src/term-description/edit.js @@ -0,0 +1,18 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { useBlockProps } from '@wordpress/block-editor'; + +export default function TermDescriptionEdit() { + const blockProps = useBlockProps(); + return ( +
+
+ + { __( 'This is a placeholder for term description.' ) } + +
+
+ ); +} diff --git a/packages/block-library/src/term-description/editor.scss b/packages/block-library/src/term-description/editor.scss new file mode 100644 index 00000000000000..ffd0a6b2bc8acf --- /dev/null +++ b/packages/block-library/src/term-description/editor.scss @@ -0,0 +1,11 @@ +.wp-block-term-description__placeholder { + height: 100px; + border: 1px dashed; + display: flex; + justify-content: center; + align-items: center; + + span { + font-style: italic; + } +} diff --git a/packages/block-library/src/term-description/index.js b/packages/block-library/src/term-description/index.js new file mode 100644 index 00000000000000..099f7ef8a2fa22 --- /dev/null +++ b/packages/block-library/src/term-description/index.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { _x } from '@wordpress/i18n'; +import { alignJustify 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 = { + title: _x( 'Term Description', 'block title' ), + icon, + edit, +}; diff --git a/packages/block-library/src/term-description/index.php b/packages/block-library/src/term-description/index.php new file mode 100644 index 00000000000000..ea54ef0ac3636d --- /dev/null +++ b/packages/block-library/src/term-description/index.php @@ -0,0 +1,45 @@ + 'term-description' ) ); + return '
' . $description . '
'; + } + + return ''; +} + +/** + * Registers the `core/term-description` block on the server. + */ +function register_block_core_term_description() { + register_block_type_from_metadata( + __DIR__ . '/term-description', + array( + 'render_callback' => 'render_block_core_term_description', + ) + ); +} +add_action( 'init', 'register_block_core_term_description' ); From 1106e7d972c1468510f4f78d193d283024d0b2f9 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Mon, 8 Mar 2021 11:05:47 +0200 Subject: [PATCH 02/13] load the block. --- lib/blocks.php | 1 + 1 file changed, 1 insertion(+) diff --git a/lib/blocks.php b/lib/blocks.php index 8fbc900d7ecb19..e415bccd5ff502 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -92,6 +92,7 @@ function gutenberg_reregister_core_block_types() { 'site-title.php' => 'core/site-title', 'table-of-contents.php' => 'core/table-of-contents', 'template-part.php' => 'core/template-part', + 'term-description.php' => 'core/term-description', ) ), ), From 1336d6b2b630cefa9a1df2cfb9e0124e9cc89a02 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Mon, 8 Mar 2021 11:10:58 +0200 Subject: [PATCH 03/13] better safe than sorry --- packages/block-library/src/term-description/index.php | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/term-description/index.php b/packages/block-library/src/term-description/index.php index ea54ef0ac3636d..af2cb86f8c7783 100644 --- a/packages/block-library/src/term-description/index.php +++ b/packages/block-library/src/term-description/index.php @@ -15,6 +15,7 @@ */ function render_block_core_term_description( $attributes, $content, $block ) { + $description = false; if ( is_category() ) { $description = category_description(); } else if ( is_tag() ) { From 0904c84fbd033b8c72ea4cc84ed29782d14fbb94 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 9 Mar 2021 14:54:01 +0200 Subject: [PATCH 04/13] Add more supports --- .../block-library/src/term-description/block.json | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/term-description/block.json b/packages/block-library/src/term-description/block.json index a5084f74cf17f7..b358334963994e 100644 --- a/packages/block-library/src/term-description/block.json +++ b/packages/block-library/src/term-description/block.json @@ -2,9 +2,19 @@ "apiVersion": 2, "name": "core/term-description", "category": "design", + "attributes": { + "textAlign": { + "type": "string" + } + }, "supports": { "align": [ "wide", "full" ], - "html": false + "html": false, + "fontSize": true, + "lineHeight": true, + "color": { + "link": true + } }, "editorStyle": "wp-block-term-description-editor" } From cda0f6f20ed5a5da9c711bd75ae2ffdb12a2d3cd Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 9 Mar 2021 15:06:44 +0200 Subject: [PATCH 05/13] add fixtures files --- .../blocks/core__term-description.html | 1 + .../blocks/core__term-description.json | 12 +++++++++++ .../blocks/core__term-description.parsed.json | 20 +++++++++++++++++++ .../core__term-description.serialized.html | 1 + 4 files changed, 34 insertions(+) create mode 100644 packages/e2e-tests/fixtures/blocks/core__term-description.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__term-description.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__term-description.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__term-description.serialized.html diff --git a/packages/e2e-tests/fixtures/blocks/core__term-description.html b/packages/e2e-tests/fixtures/blocks/core__term-description.html new file mode 100644 index 00000000000000..63bb38e7fbe3b4 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__term-description.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__term-description.json b/packages/e2e-tests/fixtures/blocks/core__term-description.json new file mode 100644 index 00000000000000..4148e19d752424 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__term-description.json @@ -0,0 +1,12 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/term-description", + "isValid": true, + "attributes": { + "align": "full" + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__term-description.parsed.json b/packages/e2e-tests/fixtures/blocks/core__term-description.parsed.json new file mode 100644 index 00000000000000..30e6c5778a52d4 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__term-description.parsed.json @@ -0,0 +1,20 @@ +[ + { + "blockName": "core/term-description", + "attrs": { + "align": "full" + }, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__term-description.serialized.html b/packages/e2e-tests/fixtures/blocks/core__term-description.serialized.html new file mode 100644 index 00000000000000..63bb38e7fbe3b4 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__term-description.serialized.html @@ -0,0 +1 @@ + From dd02a7a7a0c613d3c90ad50bf87aefe83dc6ccea Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 9 Mar 2021 15:10:34 +0200 Subject: [PATCH 06/13] use padding instead of height so border can adapt depending on font-size --- packages/block-library/src/term-description/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/term-description/editor.scss b/packages/block-library/src/term-description/editor.scss index ffd0a6b2bc8acf..bf2f1d5d2e1375 100644 --- a/packages/block-library/src/term-description/editor.scss +++ b/packages/block-library/src/term-description/editor.scss @@ -1,5 +1,5 @@ .wp-block-term-description__placeholder { - height: 100px; + padding: 1em; border: 1px dashed; display: flex; justify-content: center; From 99e0e95394d329a5ee6280bfa7adfc1c27bb2942 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Tue, 9 Mar 2021 15:30:08 +0200 Subject: [PATCH 07/13] Change the icon Use icon from https://github.com/WordPress/gutenberg/pull/27989#issuecomment-755232436 --- .../src/term-description/index.js | 2 +- packages/icons/src/index.js | 1 + .../icons/src/library/term-description.js | 20 +++++++++++++++++++ 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 packages/icons/src/library/term-description.js diff --git a/packages/block-library/src/term-description/index.js b/packages/block-library/src/term-description/index.js index 099f7ef8a2fa22..2ecf76d1cade0a 100644 --- a/packages/block-library/src/term-description/index.js +++ b/packages/block-library/src/term-description/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { _x } from '@wordpress/i18n'; -import { alignJustify as icon } from '@wordpress/icons'; +import { termDescription as icon } from '@wordpress/icons'; /** * Internal dependencies diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index 3a6457d6b9de63..bbcd6856943ae5 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -189,6 +189,7 @@ export { default as tableRowBefore } from './library/table-row-before'; export { default as tableRowDelete } from './library/table-row-delete'; export { default as table } from './library/table'; export { default as tag } from './library/tag'; +export { default as termDescription } from './library/term-description'; export { default as footer } from './library/footer'; export { default as header } from './library/header'; export { default as sidebar } from './library/sidebar'; diff --git a/packages/icons/src/library/term-description.js b/packages/icons/src/library/term-description.js new file mode 100644 index 00000000000000..38622174c25860 --- /dev/null +++ b/packages/icons/src/library/term-description.js @@ -0,0 +1,20 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const tag = ( + + + + +); + +export default tag; From 6d2bfddb08fc852f3a194646c218719f216e79ca Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 10 Mar 2021 13:42:53 +0200 Subject: [PATCH 08/13] Update packages/icons/src/library/term-description.js Co-authored-by: Nik Tsekouras --- packages/icons/src/library/term-description.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icons/src/library/term-description.js b/packages/icons/src/library/term-description.js index 38622174c25860..5c3efead4ca0c3 100644 --- a/packages/icons/src/library/term-description.js +++ b/packages/icons/src/library/term-description.js @@ -7,7 +7,7 @@ const tag = ( Date: Wed, 10 Mar 2021 14:26:03 +0200 Subject: [PATCH 09/13] address feedback --- packages/block-library/src/editor.scss | 1 + .../src/term-description/edit.js | 47 +++++++++++++++---- .../src/term-description/editor.scss | 9 +--- .../src/term-description/index.php | 18 +++---- 4 files changed, 47 insertions(+), 28 deletions(-) diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 4ff3ee319d800d..9ff64efd4684e2 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -53,6 +53,7 @@ @import "./query-pagination/editor.scss"; @import "./query-pagination-numbers/editor.scss"; @import "./post-featured-image/editor.scss"; +@import "./term-description/editor.scss"; :root .editor-styles-wrapper { // Background colors. diff --git a/packages/block-library/src/term-description/edit.js b/packages/block-library/src/term-description/edit.js index 46ef5d7647d4b4..f3c3c4c22d4645 100644 --- a/packages/block-library/src/term-description/edit.js +++ b/packages/block-library/src/term-description/edit.js @@ -1,18 +1,47 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useBlockProps } from '@wordpress/block-editor'; +import { + useBlockProps, + BlockControls, + AlignmentToolbar, +} from '@wordpress/block-editor'; -export default function TermDescriptionEdit() { - const blockProps = useBlockProps(); +export default function TermDescriptionEdit( { + attributes, + setAttributes, + mergedStyle, +} ) { + const { textAlign } = attributes; + const blockProps = useBlockProps( { + className: classnames( { + [ `has-text-align-${ textAlign }` ]: textAlign, + } ), + style: mergedStyle, + } ); return ( -
-
- - { __( 'This is a placeholder for term description.' ) } - + <> + + { + setAttributes( { textAlign: nextAlign } ); + } } + /> + +
+
+ + { __( 'This is a placeholder for term description.' ) } + +
-
+ ); } diff --git a/packages/block-library/src/term-description/editor.scss b/packages/block-library/src/term-description/editor.scss index bf2f1d5d2e1375..1eb196c9bfdc52 100644 --- a/packages/block-library/src/term-description/editor.scss +++ b/packages/block-library/src/term-description/editor.scss @@ -1,11 +1,4 @@ .wp-block-term-description__placeholder { - padding: 1em; + padding: 1em 0; border: 1px dashed; - display: flex; - justify-content: center; - align-items: center; - - span { - font-style: italic; - } } diff --git a/packages/block-library/src/term-description/index.php b/packages/block-library/src/term-description/index.php index af2cb86f8c7783..a48a9baef8badc 100644 --- a/packages/block-library/src/term-description/index.php +++ b/packages/block-library/src/term-description/index.php @@ -15,18 +15,14 @@ */ function render_block_core_term_description( $attributes, $content, $block ) { - $description = false; - if ( is_category() ) { - $description = category_description(); - } else if ( is_tag() ) { - $description = tag_description(); - } else if ( is_tax() ) { - $description = term_description(); - } + if ( is_category() || is_tag() || is_tax() ) { + $classes = 'term-description'; + if ( isset( $attributes['textAlign'] ) ) { + $classes .= ' has-text-align-' . $attributes['textAlign']; + } + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); - if ( $description ) { - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'term-description' ) ); - return '
' . $description . '
'; + return '
' . term_description() . '
'; } return ''; From 12396d7791e45fd08579b72a7e0760a483ad98ab Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 10 Mar 2021 14:34:01 +0200 Subject: [PATCH 10/13] Add description --- packages/block-library/src/term-description/index.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/term-description/index.js b/packages/block-library/src/term-description/index.js index 2ecf76d1cade0a..2981fc4677da7d 100644 --- a/packages/block-library/src/term-description/index.js +++ b/packages/block-library/src/term-description/index.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { _x } from '@wordpress/i18n'; +import { _x, __ } from '@wordpress/i18n'; import { termDescription as icon } from '@wordpress/icons'; /** @@ -15,6 +15,9 @@ export { metadata, name }; export const settings = { title: _x( 'Term Description', 'block title' ), + description: __( + 'Display the description of categories, tags and custom taxonomies when viewing an archive.' + ), icon, edit, }; From cf031b8ba15d1e1d12dd235ef281a7f4c7e5a754 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 10 Mar 2021 15:00:34 +0200 Subject: [PATCH 11/13] reverse condition & logic --- .../src/term-description/index.php | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/term-description/index.php b/packages/block-library/src/term-description/index.php index a48a9baef8badc..69541e93d3c2bd 100644 --- a/packages/block-library/src/term-description/index.php +++ b/packages/block-library/src/term-description/index.php @@ -15,17 +15,16 @@ */ function render_block_core_term_description( $attributes, $content, $block ) { - if ( is_category() || is_tag() || is_tax() ) { - $classes = 'term-description'; - if ( isset( $attributes['textAlign'] ) ) { - $classes .= ' has-text-align-' . $attributes['textAlign']; - } - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); - - return '
' . term_description() . '
'; + if ( ! is_category() && ! is_tag() && ! is_tax() ) { + return ''; + } + $classes = 'term-description'; + if ( isset( $attributes['textAlign'] ) ) { + $classes .= ' has-text-align-' . $attributes['textAlign']; } + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); - return ''; + return '
' . term_description() . '
'; } /** From df67df812eae80c544f4311cb352c83f894d25ab Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 10 Mar 2021 15:21:47 +0200 Subject: [PATCH 12/13] Change placeholder text --- packages/block-library/src/term-description/edit.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-library/src/term-description/edit.js b/packages/block-library/src/term-description/edit.js index f3c3c4c22d4645..b4cc0a062c6dfb 100644 --- a/packages/block-library/src/term-description/edit.js +++ b/packages/block-library/src/term-description/edit.js @@ -37,9 +37,7 @@ export default function TermDescriptionEdit( {
- - { __( 'This is a placeholder for term description.' ) } - + { __( 'Term description.' ) }
From 9c28e3dc8e6dcacfb011cacc2d0082aa6cbd0117 Mon Sep 17 00:00:00 2001 From: Ari Stathopoulos Date: Wed, 10 Mar 2021 15:56:26 +0200 Subject: [PATCH 13/13] Simplify --- packages/block-library/src/term-description/index.php | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/term-description/index.php b/packages/block-library/src/term-description/index.php index 69541e93d3c2bd..b7819dd3df0af8 100644 --- a/packages/block-library/src/term-description/index.php +++ b/packages/block-library/src/term-description/index.php @@ -18,11 +18,11 @@ function render_block_core_term_description( $attributes, $content, $block ) { if ( ! is_category() && ! is_tag() && ! is_tax() ) { return ''; } - $classes = 'term-description'; - if ( isset( $attributes['textAlign'] ) ) { - $classes .= ' has-text-align-' . $attributes['textAlign']; - } - $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classes ) ); + + $extra_attributes = ( isset( $attributes['textAlign'] ) ) + ? array( 'class' => 'has-text-align-' . $attributes['textAlign'] ) + : array(); + $wrapper_attributes = get_block_wrapper_attributes( $extra_attributes ); return '
' . term_description() . '
'; }