[New block] Query Title block

lib/blocks.php

@@ -78,6 +78,7 @@ function gutenberg_reregister_core_block_types() {
 					'post-hierarchical-terms.php' => 'core/post-hierarchical-terms',
 					'post-tags.php'               => 'core/post-tags',
 					'post-title.php'              => 'core/post-title',
+					'query-title.php'             => 'core/query-title',
 					'query.php'                   => 'core/query',
 					'query-loop.php'              => 'core/query-loop',
 					'query-pagination.php'        => 'core/query-pagination',

packages/block-library/src/index.js

@@ -66,6 +66,7 @@ import * as siteLogo from './site-logo';
 import * as siteTagline from './site-tagline';
 import * as siteTitle from './site-title';
 import * as templatePart from './template-part';
+import * as queryTitle from './query-title';
 import * as query from './query';
 import * as queryLoop from './query-loop';
 import * as queryPagination from './query-pagination';
@@ -212,6 +213,7 @@ export const __experimentalRegisterExperimentalCoreBlocks =
 								siteTagline,
 								siteTitle,
 								templatePart,
+								queryTitle,
 								query,
 								queryLoop,
 								queryPagination,

packages/block-library/src/query-title/block.json

@@ -0,0 +1,74 @@
+{
+	"apiVersion": 2,
+	"name": "core/query-title",
+	"category": "design",
+	"attributes": {
+		"content": {
+			"type": "string"
+		},
+		"type": {
+			"type": "string"
+		},
+		"textAlign": {
+			"type": "string"
+		},
+		"level": {
+			"type": "number",
+			"default": 2
+		}
+	},
+	"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
+				}
+			}
+		}
+	}
+}

packages/block-library/src/query-title/edit.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+// import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	AlignmentToolbar,
+	BlockControls,
+	useBlockProps,
+	RichText,
+} from '@wordpress/block-editor';
+import { ToolbarGroup } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import HeadingLevelDropdown from '../heading/heading-level-dropdown';
+
+export default function QueryTitleEdit( {
+	attributes: { content, type, level, textAlign },
+	setAttributes,
+} ) {
+	const TagName = `h${ level }`;
+	const tagName = `h${ level }`;
+	const blockProps = useBlockProps( {
+		className: classnames( {
+			[ `has-text-align-${ textAlign }` ]: textAlign,
+		} ),
+	} );
+	let titleElement;
+	if ( type === 'archive' ) {
+		titleElement = (
+			<TagName { ...blockProps }>
+				{ __( 'Archive title placeholder' ) }
+			</TagName>
+		);
+	} else {
+		titleElement = (
+			<div { ...blockProps }>
+				<RichText
+					tagName={ tagName }
+					value={ content }
+					placeholder={ __( 'Query title' ) }
+					allowedFormats={ [ 'core/bold', 'core/italic' ] }
+					onChange={ ( newContent ) =>
+						setAttributes( { content: newContent } )
+					}
+					disableLineBreaks={ true }
+				/>
+			</div>
+		);
+	}
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<HeadingLevelDropdown
+						selectedLevel={ level }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+				</ToolbarGroup>
+				<AlignmentToolbar
+					value={ textAlign }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { textAlign: nextAlign } );
+					} }
+				/>
+			</BlockControls>
+			{ titleElement }
+		</>
+	);
+}

packages/block-library/src/query-title/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { archiveTitle as icon } from '@wordpress/icons';
+
+/**
+ * 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.' ),
+	icon,
+	edit,
+	variations,
+};

packages/block-library/src/query-title/index.php

@@ -0,0 +1,58 @@
+<?php
+/**
+ * Server-side rendering of the `core/query-title` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/query-title` block on the server.
+ * For now it supports Arhive title and Search title,
+ * using queried object information
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the query title based on the queried object.
+ */
+function render_block_core_query_title( $attributes, $content, $block ) {
+	$type       = isset( $attributes['type'] ) ? $attributes['type'] : null;
+	$is_search  = is_search();
+	$is_archive = is_archive();
+	if ( ! $type || ( 'archive' === $type && ! $is_archive ) || ( 'search' === $type && ! $is_search ) ) {
+		return '';
+	}
+	$title = isset( $attributes['content'] ) ? $attributes['content'] : '';
+	if ( $is_archive ) {
+		$title = get_the_archive_title();
+	}
+	if ( $is_search ) {
+		global $wp_query;
+		$formats      = array( '%total%', '%search%' );
+		$replacements = array( $wp_query->found_posts, get_search_query() );
+		$title        = str_replace( $formats, $replacements, $title );
+	}
+	$tag_name           = isset( $attributes['level'] ) ? 'h' . (int) $attributes['level'] : 'h2';
+	$align_class_name   = empty( $attributes['textAlign'] ) ? '' : "has-text-align-{$attributes['textAlign']}";
+	$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $align_class_name ) );
+	return sprintf(
+		'<%1$s %2$s>%3$s</%1$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' );

packages/block-library/src/query-title/variations.js

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { _x, __ } from '@wordpress/i18n';
+import { archiveTitle } from '@wordpress/icons';
+const variations = [
+	{
+		name: 'custom-query-title',
+		title: __( 'Custom query Title' ),
+		description: __( 'Display a custom query title.' ),
+		icon: archiveTitle,
+		attributes: { type: 'custom', content: '' },
+		scope: [ 'inserter', 'transform' ],
+		isDefault: true,
+	},
+	{
+		name: 'archive-title',
+		title: __( 'Archive Title' ),
+		description: __(
+			'Display the archive title based on the queried object.'
+		),
+		icon: archiveTitle,
+		attributes: {
+			type: 'archive',
+			content: __( 'Archive title placeholder' ),
+		},
+		scope: [ 'inserter', 'transform' ],
+	},
+	{
+		name: 'search-title',
+		title: __( 'Search title' ),
+		description: __(
+			'Displays a title in a search template, using search related format placeholders.'
+		),
+		attributes: {
+			type: 'search',
+			// translators: Title for search template with dynamic content placeholders.
+			content: _x(
+				'%total% results found for "%search%"',
+				'search template title'
+			),
+		},
+		scope: [ 'inserter', 'transform' ],
+	},
+];
+
+/**
+ * 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;

packages/e2e-tests/fixtures/blocks/core__query-title.html

@@ -0,0 +1 @@
+<!-- wp:query-title /-->

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';

packages/icons/src/library/archive-title.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const archiveTitle = (
+	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+		<Path stroke="#1E1E1E" strokeWidth="1.5" d="M4 19.25h9M4 15.25h16" />
+		<Path
+			d="M8.994 10.103H6.08L5.417 12H4l2.846-8h1.383l2.845 8H9.657l-.663-1.897zm-.457-1.28l-.994-2.857-1.006 2.857h2z"
+			fill="#1E1E1E"
+		/>
+	</SVG>
+);
+
+export default archiveTitle;

packages/icons/src/library/post-title.js

@@ -5,10 +5,7 @@ import { Path, SVG } from '@wordpress/primitives';
 
 const postTitle = (
 	<SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-		<Path
-			fill="#000"
-			d="M4 14.5h16V16H4zM4 18.5h9V20H4zM4 4h3c2 0 3 .86 3 2.583 0 .891-.253 1.554-.76 1.988-.505.435-1.24.652-2.204.652H5.542V12H4V4zm2.855 4c.53 0 .924-.114 1.18-.343.266-.228.398-.579.398-1.051 0-.473-.132-.82-.397-1.04-.265-.229-.67-.343-1.217-.343H5.542V8h1.313z"
-		/>
+		<Path d="M4 14.5h16V16H4zM4 18.5h9V20H4zM4 4h3c2 0 3 .86 3 2.583 0 .891-.253 1.554-.76 1.988-.505.435-1.24.652-2.204.652H5.542V12H4V4zm2.855 4c.53 0 .924-.114 1.18-.343.266-.228.398-.579.398-1.051 0-.473-.132-.82-.397-1.04-.265-.229-.67-.343-1.217-.343H5.542V8h1.313z" />
 	</SVG>
 );