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 <[email protected]>

* add placeholder styles

* default to h1

Co-authored-by: Carolina Nymark <[email protected]>

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

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

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,

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"
+}

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 (
+			<div { ...blockProps }>
+				<Warning>{ __( 'Provided type is not supported.' ) }</Warning>
+			</div>
+		);
+	}
+
+	let titleElement;
+	if ( type === 'archive' ) {
+		titleElement = (
+			<TagName { ...blockProps }>{ __( 'Archive title' ) }</TagName>
+		);
+	}
+	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/editor.scss

@@ -0,0 +1,4 @@
+.wp-block-query-title__placeholder {
+	padding: 1em 0;
+	border: 1px dashed;
+}

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,
+};

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

@@ -0,0 +1,51 @@
+<?php
+/**
+ * Server-side rendering of the `core/query-title` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/query-title` block on the server.
+ * For now it only supports Archive 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_archive = is_archive();
+	if ( ! $type || ( 'archive' === $type && ! $is_archive ) ) {
+		return '';
+	}
+	$title = '';
+	if ( $is_archive ) {
+		$title = get_the_archive_title();
+	}
+	$tag_name           = isset( $attributes['level'] ) ? 'h' . (int) $attributes['level'] : 'h1';
+	$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,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;

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

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

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": ""
+    }
+]

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"
+        ]
+    }
+]

packages/e2e-tests/fixtures/blocks/core__query-title.serialized.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;