Add Archives block (#7949)

* Changes from PR #5495 squashed into single commit

Co-authored-by: Pascal Birchler <[email protected]>
Co-authored-by: Miina Sikk <[email protected]>
Co-authored-by: Weston Ruter <[email protected]>

* Remove archived keywords, since the title is implicitly a keyword already

* Use already destructured property `attributes` over `this.props.attributes`

* Use title case for copy

* Use `Disabled` element to prevent interaction with Archives Block editor view

Use of `pointer-events` to disable interaction was problematic. It
didn't disabled the dropdown version of the block and it doesn't prevent
keyboard interaction.

The Disabled component handles these situations.

* Rename block.js to edit.js for consistency with other blocks

* Convert ArchivesEdit to a function component

* Remove `isSelected` boolean and inline InspectorControls

* Render archives list container as `ul` when a list and `div` when a dropdown

* Remove unnecessary React keys

* Improve description copy

core-blocks/archives/edit.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import {
+	PanelBody,
+	ServerSideRender,
+	ToggleControl,
+	Disabled,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	InspectorControls,
+	BlockAlignmentToolbar,
+	BlockControls,
+} from '@wordpress/editor';
+
+export default function ArchivesEdit( { attributes, setAttributes } ) {
+	const { align, showPostCounts, displayAsDropdown } = attributes;
+
+	return (
+		<Fragment>
+			<InspectorControls>
+				<PanelBody title={ __( 'Archives Settings' ) }>
+					<ToggleControl
+						label={ __( 'Show Post Counts' ) }
+						checked={ showPostCounts }
+						onChange={ () => setAttributes( { showPostCounts: ! showPostCounts } ) }
+					/>
+					<ToggleControl
+						label={ __( 'Display as Dropdown' ) }
+						checked={ displayAsDropdown }
+						onChange={ () => setAttributes( { displayAsDropdown: ! displayAsDropdown } ) }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<BlockControls>
+				<BlockAlignmentToolbar
+					value={ align }
+					onChange={ ( nextAlign ) => {
+						setAttributes( { align: nextAlign } );
+					} }
+					controls={ [ 'left', 'center', 'right' ] }
+				/>
+			</BlockControls>
+			<Disabled>
+				<ServerSideRender block="core/archives" attributes={ attributes } />
+			</Disabled>
+		</Fragment>
+	);
+}

core-blocks/archives/index.js

@@ -0,0 +1,39 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+export const name = 'core/archives';
+
+export const settings = {
+	title: __( 'Archives' ),
+
+	description: __( 'Display a monthly archive of your site’s Posts.' ),
+
+	icon: 'calendar-alt',
+
+	category: 'widgets',
+
+	supports: {
+		html: false,
+	},
+
+	getEditWrapperProps( attributes ) {
+		const { align } = attributes;
+		if ( 'left' === align || 'right' === align || 'center' === align ) {
+			return { 'data-align': align };
+		}
+	},
+
+	edit,
+
+	save() {
+		// Handled by PHP.
+		return null;
+	},
+};

core-blocks/archives/index.php

@@ -0,0 +1,111 @@
+<?php
+/**
+ * Server-side rendering of the `core/archives` block.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Renders the `core/archives` block on server.
+ *
+ * @see WP_Widget_Archives
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the post content with archives added.
+ */
+function render_block_core_archives( $attributes ) {
+	$show_post_count = ! empty( $attributes['showPostCounts'] );
+	$class           = "wp-block-archives align{$attributes['align']}";
+
+	if ( ! empty( $attributes['displayAsDropdown'] ) ) {
+
+		$dropdown_id = esc_attr( uniqid( 'wp-block-archives-' ) );
+		$title       = __( 'Archives', 'gutenberg' );
+
+		/** This filter is documented in wp-includes/widgets/class-wp-widget-archives.php */
+		$dropdown_args = apply_filters( 'widget_archives_dropdown_args', array(
+			'type'            => 'monthly',
+			'format'          => 'option',
+			'show_post_count' => $show_post_count,
+		) );
+
+		$dropdown_args['echo'] = 0;
+
+		$archives = wp_get_archives( $dropdown_args );
+
+		switch ( $dropdown_args['type'] ) {
+			case 'yearly':
+				$label = __( 'Select Year', 'gutenberg' );
+				break;
+			case 'monthly':
+				$label = __( 'Select Month', 'gutenberg' );
+				break;
+			case 'daily':
+				$label = __( 'Select Day', 'gutenberg' );
+				break;
+			case 'weekly':
+				$label = __( 'Select Week', 'gutenberg' );
+				break;
+			default:
+				$label = __( 'Select Post', 'gutenberg' );
+				break;
+		}
+
+		$label = esc_attr( $label );
+
+		$block_content = '<label class="screen-reader-text" for="' . $dropdown_id . '">' . $title . '</label>
+	<select id="' . $dropdown_id . '" name="archive-dropdown" onchange="document.location.href=this.options[this.selectedIndex].value;">
+	<option value="">' . $label . '</option>' . $archives . '</select>';
+
+		$block_content = sprintf(
+			'<div class="%1$s">%2$s</div>',
+			esc_attr( $class ),
+			$block_content
+		);
+	} else {
+
+		/** This filter is documented in wp-includes/widgets/class-wp-widget-archives.php */
+		$archives_args = apply_filters( 'widget_archives_args', array(
+			'type'            => 'monthly',
+			'show_post_count' => $show_post_count,
+		) );
+
+		$archives_args['echo'] = 0;
+
+		$block_content = wp_get_archives( $archives_args );
+
+		$block_content = sprintf(
+			'<ul class="%1$s">%2$s</ul>',
+			esc_attr( $class ),
+			$block_content
+		);
+	}
+
+	return $block_content;
+}
+
+/**
+ * Register archives block.
+ */
+function register_block_core_archives() {
+	register_block_type( 'core/archives', array(
+		'attributes'      => array(
+			'showPostCounts'    => array(
+				'type'    => 'boolean',
+				'default' => false,
+			),
+			'displayAsDropdown' => array(
+				'type'    => 'boolean',
+				'default' => false,
+			),
+			'align'             => array(
+				'type'    => 'string',
+				'default' => 'none',
+			),
+		),
+		'render_callback' => 'render_block_core_archives',
+	) );
+}
+
+add_action( 'init', 'register_block_core_archives' );

core-blocks/index.js

@@ -16,6 +16,7 @@ import * as image from './image';
 import * as heading from './heading';
 import * as quote from './quote';
 import * as gallery from './gallery';
+import * as archives from './archives';
 import * as audio from './audio';
 import * as button from './button';
 import * as categories from './categories';
@@ -56,6 +57,7 @@ export const registerCoreBlocks = () => {
 
 		// Register all remaining core blocks.
 		shortcode,
+		archives,
 		audio,
 		button,
 		categories,

core-blocks/test/fixtures/core__archives.html

@@ -0,0 +1 @@
+<!-- wp:archives {"showPostCounts":false,"displayAsDropdown":false} /-->

core-blocks/test/fixtures/core__archives.json

@@ -0,0 +1,10 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/archives",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

core-blocks/test/fixtures/core__archives.parsed.json

@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/archives",
+        "attrs": {
+            "showPostCounts": false,
+            "displayAsDropdown": false
+        },
+        "innerBlocks": [],
+        "innerHTML": ""
+    }
+]

core-blocks/test/fixtures/core__archives.serialized.html

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

core-blocks/test/fixtures/core__archives__showPostCounts.html

@@ -0,0 +1 @@
+<!-- wp:archives {"showPostCounts":true,"displayAsDropdown":false} /-->

core-blocks/test/fixtures/core__archives__showPostCounts.json

@@ -0,0 +1,10 @@
+[
+    {
+        "uid": "_uid_0",
+        "name": "core/archives",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

core-blocks/test/fixtures/core__archives__showPostCounts.parsed.json

@@ -0,0 +1,11 @@
+[
+    {
+        "blockName": "core/archives",
+        "attrs": {
+            "showPostCounts": true,
+            "displayAsDropdown": false
+        },
+        "innerBlocks": [],
+        "innerHTML": ""
+    }
+]

core-blocks/test/fixtures/core__archives__showPostCounts.serialized.html

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