From d4fcfdd8241a175b0acee572f73ca8be508ce77b Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Fri, 12 Mar 2021 09:14:05 +0200 Subject: [PATCH] Query title block - Archive Title (#29428) * query title - archive title * add fixtures and polish * Update packages/block-library/src/query-title/index.php Co-authored-by: Carolina Nymark * add placeholder styles * default to h1 Co-authored-by: Carolina Nymark --- lib/blocks.php | 1 + packages/block-library/src/editor.scss | 1 + packages/block-library/src/index.js | 2 + .../block-library/src/query-title/block.json | 72 ++++++++++++++++++ .../block-library/src/query-title/edit.js | 74 +++++++++++++++++++ .../block-library/src/query-title/editor.scss | 4 + .../block-library/src/query-title/index.js | 21 ++++++ .../block-library/src/query-title/index.php | 51 +++++++++++++ .../src/query-title/variations.js | 33 +++++++++ .../fixtures/blocks/core__query-title.html | 1 + .../fixtures/blocks/core__query-title.json | 12 +++ .../blocks/core__query-title.parsed.json | 18 +++++ .../blocks/core__query-title.serialized.html | 1 + packages/icons/src/index.js | 1 + packages/icons/src/library/archive-title.js | 16 ++++ 15 files changed, 308 insertions(+) create mode 100644 packages/block-library/src/query-title/block.json create mode 100644 packages/block-library/src/query-title/edit.js create mode 100644 packages/block-library/src/query-title/editor.scss create mode 100644 packages/block-library/src/query-title/index.js create mode 100644 packages/block-library/src/query-title/index.php create mode 100644 packages/block-library/src/query-title/variations.js create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-title.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-title.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-title.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__query-title.serialized.html create mode 100644 packages/icons/src/library/archive-title.js diff --git a/lib/blocks.php b/lib/blocks.php index 7e67106404952f..70f9ec44cb32e1 100644 --- a/lib/blocks.php +++ b/lib/blocks.php @@ -82,6 +82,7 @@ function gutenberg_reregister_core_block_types() { 'post-title.php' => 'core/post-title', 'query.php' => 'core/query', 'query-loop.php' => 'core/query-loop', + 'query-title.php' => 'core/query-title', 'query-pagination.php' => 'core/query-pagination', 'query-pagination-next.php' => 'core/query-pagination-next', 'query-pagination-numbers.php' => 'core/query-pagination-numbers', diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 9ff64efd4684e2..0396d135fc701c 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -48,6 +48,7 @@ @import "./text-columns/editor.scss"; @import "./verse/editor.scss"; @import "./video/editor.scss"; +@import "./query-title/editor.scss"; @import "./query-loop/editor.scss"; @import "./query/editor.scss"; @import "./query-pagination/editor.scss"; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 2268548e13d519..8235b566311548 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -69,6 +69,7 @@ import * as siteTitle from './site-title'; import * as templatePart from './template-part'; import * as query from './query'; import * as queryLoop from './query-loop'; +import * as queryTitle from './query-title'; import * as queryPagination from './query-pagination'; import * as queryPaginationNext from './query-pagination-next'; import * as queryPaginationNumbers from './query-pagination-numbers'; @@ -221,6 +222,7 @@ export const __experimentalRegisterExperimentalCoreBlocks = templatePart, query, queryLoop, + queryTitle, queryPagination, queryPaginationNext, queryPaginationNumbers, diff --git a/packages/block-library/src/query-title/block.json b/packages/block-library/src/query-title/block.json new file mode 100644 index 00000000000000..6635b27d5e2c37 --- /dev/null +++ b/packages/block-library/src/query-title/block.json @@ -0,0 +1,72 @@ +{ + "apiVersion": 2, + "name": "core/query-title", + "category": "design", + "attributes": { + "type": { + "type": "string" + }, + "textAlign": { + "type": "string" + }, + "level": { + "type": "number", + "default": 1 + } + }, + "supports": { + "align": [ "wide", "full" ], + "html": false, + "color": { + "gradients": true + }, + "fontSize": true, + "lineHeight": true, + "__experimentalFontFamily": true, + "__experimentalSelector": { + "core/query-title/h1": { + "title": "h1", + "selector": "h1.wp-block-query-title", + "attributes": { + "level": 1 + } + }, + "core/query-title/h2": { + "title": "h2", + "selector": "h2.wp-block-query-title", + "attributes": { + "level": 2 + } + }, + "core/query-title/h3": { + "title": "h3", + "selector": "h3.wp-block-query-title", + "attributes": { + "level": 3 + } + }, + "core/query-title/h4": { + "title": "h4", + "selector": "h4.wp-block-query-title", + "attributes": { + "level": 4 + } + }, + "core/query-title/h5": { + "title": "h5", + "selector": "h5.wp-block-query-title", + "attributes": { + "level": 5 + } + }, + "core/query-title/h6": { + "title": "h6", + "selector": "h6.wp-block-query-title", + "attributes": { + "level": 6 + } + } + } + }, + "editorStyle": "wp-block-query-title-editor" +} diff --git a/packages/block-library/src/query-title/edit.js b/packages/block-library/src/query-title/edit.js new file mode 100644 index 00000000000000..c57c843bff8e4a --- /dev/null +++ b/packages/block-library/src/query-title/edit.js @@ -0,0 +1,74 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +// import { useSelect, useDispatch } from '@wordpress/data'; +import { + AlignmentToolbar, + BlockControls, + useBlockProps, + Warning, +} from '@wordpress/block-editor'; +import { ToolbarGroup } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import HeadingLevelDropdown from '../heading/heading-level-dropdown'; + +const SUPPORTED_TYPES = [ 'archive' ]; + +export default function QueryTitleEdit( { + attributes: { type, level, textAlign }, + setAttributes, +} ) { + const TagName = `h${ level }`; + const blockProps = useBlockProps( { + className: classnames( { + [ `has-text-align-${ textAlign }` ]: textAlign, + 'wp-block-query-title__placeholder': type === 'archive', + } ), + } ); + // The plan is to augment this block with more + // block variations like `Search Title`. + if ( ! SUPPORTED_TYPES.includes( type ) ) { + return ( +
+ { __( 'Provided type is not supported.' ) } +
+ ); + } + + let titleElement; + if ( type === 'archive' ) { + titleElement = ( + { __( 'Archive title' ) } + ); + } + return ( + <> + + + + setAttributes( { level: newLevel } ) + } + /> + + { + setAttributes( { textAlign: nextAlign } ); + } } + /> + + { titleElement } + + ); +} diff --git a/packages/block-library/src/query-title/editor.scss b/packages/block-library/src/query-title/editor.scss new file mode 100644 index 00000000000000..6e4e6eac443d89 --- /dev/null +++ b/packages/block-library/src/query-title/editor.scss @@ -0,0 +1,4 @@ +.wp-block-query-title__placeholder { + padding: 1em 0; + border: 1px dashed; +} diff --git a/packages/block-library/src/query-title/index.js b/packages/block-library/src/query-title/index.js new file mode 100644 index 00000000000000..faa637638952a4 --- /dev/null +++ b/packages/block-library/src/query-title/index.js @@ -0,0 +1,21 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import metadata from './block.json'; +import edit from './edit'; +import variations from './variations'; + +const { name } = metadata; +export { metadata, name }; + +export const settings = { + title: __( 'Query Title' ), + description: __( 'Display the query title.' ), + edit, + variations, +}; diff --git a/packages/block-library/src/query-title/index.php b/packages/block-library/src/query-title/index.php new file mode 100644 index 00000000000000..bca5c0049db635 --- /dev/null +++ b/packages/block-library/src/query-title/index.php @@ -0,0 +1,51 @@ + $align_class_name ) ); + return sprintf( + '<%1$s %2$s>%3$s', + $tag_name, + $wrapper_attributes, + $title + ); +} + +/** + * Registers the `core/query-title` block on the server. + */ +function register_block_core_query_title() { + register_block_type_from_metadata( + __DIR__ . '/query-title', + array( + 'render_callback' => 'render_block_core_query_title', + ) + ); +} +add_action( 'init', 'register_block_core_query_title' ); diff --git a/packages/block-library/src/query-title/variations.js b/packages/block-library/src/query-title/variations.js new file mode 100644 index 00000000000000..c82a419602ef75 --- /dev/null +++ b/packages/block-library/src/query-title/variations.js @@ -0,0 +1,33 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { archiveTitle } from '@wordpress/icons'; +const variations = [ + { + isDefault: true, + name: 'archive-title', + title: __( 'Archive Title' ), + description: __( + 'Display the archive title based on the queried object.' + ), + icon: archiveTitle, + attributes: { + type: 'archive', + }, + scope: [ 'inserter' ], + }, +]; + +/** + * Add `isActive` function to all `query-title` variations, if not defined. + * `isActive` function is used to find a variation match from a created + * Block by providing its attributes. + */ +variations.forEach( ( variation ) => { + if ( variation.isActive ) return; + variation.isActive = ( blockAttributes, variationAttributes ) => + blockAttributes.type === variationAttributes.type; +} ); + +export default variations; diff --git a/packages/e2e-tests/fixtures/blocks/core__query-title.html b/packages/e2e-tests/fixtures/blocks/core__query-title.html new file mode 100644 index 00000000000000..2fa05648f259fd --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-title.html @@ -0,0 +1 @@ + diff --git a/packages/e2e-tests/fixtures/blocks/core__query-title.json b/packages/e2e-tests/fixtures/blocks/core__query-title.json new file mode 100644 index 00000000000000..082dfaeb845e5f --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-title.json @@ -0,0 +1,12 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/query-title", + "isValid": true, + "attributes": { + "level": 1 + }, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__query-title.parsed.json b/packages/e2e-tests/fixtures/blocks/core__query-title.parsed.json new file mode 100644 index 00000000000000..8cea12344830a9 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-title.parsed.json @@ -0,0 +1,18 @@ +[ + { + "blockName": "core/query-title", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "", + "innerContent": [] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__query-title.serialized.html b/packages/e2e-tests/fixtures/blocks/core__query-title.serialized.html new file mode 100644 index 00000000000000..2fa05648f259fd --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__query-title.serialized.html @@ -0,0 +1 @@ + diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js index bbcd6856943ae5..b003fa08d430f0 100644 --- a/packages/icons/src/index.js +++ b/packages/icons/src/index.js @@ -5,6 +5,7 @@ export { default as alignJustify } from './library/align-justify'; export { default as alignLeft } from './library/align-left'; export { default as alignRight } from './library/align-right'; export { default as archive } from './library/archive'; +export { default as archiveTitle } from './library/archive-title'; export { default as arrowDown } from './library/arrow-down'; export { default as arrowLeft } from './library/arrow-left'; export { default as arrowRight } from './library/arrow-right'; diff --git a/packages/icons/src/library/archive-title.js b/packages/icons/src/library/archive-title.js new file mode 100644 index 00000000000000..68d62649889424 --- /dev/null +++ b/packages/icons/src/library/archive-title.js @@ -0,0 +1,16 @@ +/** + * WordPress dependencies + */ +import { SVG, Path } from '@wordpress/primitives'; + +const archiveTitle = ( + + + + +); + +export default archiveTitle;