Add calendar block v1

lib/load.php

@@ -36,6 +36,9 @@
 }
 // Currently merged in core as `gutenberg_render_block_core_latest_comments`,
 // expected to change soon.
+if ( ! function_exists( 'render_block_core_calendar' ) ) {
+	require dirname( __FILE__ ) . '/../packages/block-library/src/calendar/index.php';
+}
 if ( ! function_exists( 'render_block_core_latest_comments' )
 	&& ! function_exists( 'gutenberg_render_block_core_latest_comments' ) ) {
 	require dirname( __FILE__ ) . '/../packages/block-library/src/latest-comments/index.php';

packages/block-library/src/calendar/edit.js

@@ -0,0 +1,67 @@
+/**
+ * External dependencies
+ */
+import moment from 'moment';
+import memoize from 'memize';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	Disabled,
+	ServerSideRender,
+} from '@wordpress/components';
+import { Component } from '@wordpress/element';
+import { withSelect } from '@wordpress/data';
+
+class CalendarEdit extends Component {
+	constructor() {
+		super( ...arguments );
+		this.getYearMonth = memoize(
+			this.getYearMonth.bind( this ),
+			{ maxSize: 1 }
+		);
+		this.getServerSideAttributes = memoize(
+			this.getServerSideAttributes.bind( this ),
+			{ maxSize: 1 }
+		);
+	}
+
+	getYearMonth( date ) {
+		if ( ! date ) {
+			return {};
+		}
+		const momentDate = moment( date );
+		return {
+			year: momentDate.year(),
+			monthNum: momentDate.month() + 1,
+		};
+	}
+
+	getServerSideAttributes( attributes, date ) {
+		return {
+			...attributes,
+			...this.getYearMonth( date ),
+		};
+	}
+
+	render() {
+		return (
+			<Disabled>
+				<ServerSideRender
+					block="core/calendar"
+					attributes={ this.getServerSideAttributes(
+						this.props.attributes,
+						this.props.date
+					) }
+				/>
+			</Disabled>
+		);
+	}
+}
+
+export default withSelect( ( select ) => {
+	return {
+		date: select( 'core/editor' ).getEditedPostAttribute( 'date' ),
+	};
+} )( CalendarEdit );

packages/block-library/src/calendar/index.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+
+export const name = 'core/calendar';
+
+export const settings = {
+	title: __( 'Calendar' ),
+
+	description: __( 'A calendar of your site’s Posts.' ),
+
+	icon: 'calendar',
+
+	category: 'widgets',
+
+	keywords: [ __( 'posts' ), __( 'archive' ) ],
+
+	supports: {
+		align: true,
+	},
+
+	edit,
+
+	save() {
+		return null;
+	},
+};

packages/block-library/src/calendar/index.php

@@ -0,0 +1,60 @@
+<?php
+/**
+ * Server-side rendering of the `core/calendar` block.
+ *
+ * @package WordPress
+ */
+
+/**
+ * Renders the `core/calendar` block on server.
+ *
+ * @param array $attributes The block attributes.
+ *
+ * @return string Returns the block content.
+ */
+function render_block_core_calendar( $attributes ) {
+	global $monthnum, $year;
+	if ( isset( $attributes['monthNum'] ) ) {
+		$monthnum = $attributes['monthNum'];
+	}
+
+	if ( isset( $attributes['year'] ) ) {
+		$year = $attributes['year'];
+	}
+	$custom_class_name = empty( $attributes['className'] ) ? '' : ' ' . $attributes['className'];
+	$align_class_name  = empty( $attributes['align'] ) ? '' : " align{$attributes['align']}";
+
+	return sprintf(
+		'<div class="%1$s">%2$s</div>',
+		esc_attr( 'wp-block-calendar' . $custom_class_name . $align_class_name ),
+		get_calendar( true, false )
+	);
+}
+
+/**
+ * Registers the `core/calendar` block on server.
+ */
+function register_block_core_calendar() {
+	register_block_type(
+		'core/calendar',
+		array(
+			'attributes'      => array(
+				'align'     => array(
+					'type' => 'string',
+				),
+				'className' => array(
+					'type' => 'string',
+				),
+				'monthNum'  => array(
+					'type' => 'integer',
+				),
+				'year'      => array(
+					'type' => 'integer',
+				),
+			),
+			'render_callback' => 'render_block_core_calendar',
+		)
+	);
+}
+
+add_action( 'init', 'register_block_core_calendar' );

packages/block-library/src/calendar/style.scss

@@ -0,0 +1,61 @@
+.wp-block-calendar {
+	text-align: center;
+	border: 2px solid #ebecee;
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+		font-family: $default-font;
+	}
+	table thead {
+		display: table-row-group;
+	}
+
+	table tfoot {
+		display: table-header-group;
+		border-bottom: 2px solid #ebecee;
+	}
+
+	table tfoot,
+	caption {
+		font-weight: 600;
+		background: #edeff0;
+	}
+
+	table tfoot tr td#prev a,
+	table tfoot tr td#next a {
+		color: transparent;
+		overflow: hidden;
+		max-height: 40px;
+		width: 16px;
+
+	}
+
+	table tfoot tr td#prev a::before,
+	table tfoot tr td#next a::after {
+		// Disabling lint because in this case we need dashicons and not
+		// a generic font.
+		/* stylelint-disable */
+		font-family: dashicons;
+		/* stylelint-enable */
+		display: inline-block;
+		color: $black;
+	}
+
+	table tfoot tr td#prev a::before {
+		content: "\f141";
+	}
+
+	table tfoot tr td#next a::after {
+		content: "\f139";
+	}
+
+	table td,
+	table th {
+		border: none;
+	}
+
+	a {
+		text-decoration: underline;
+	}
+}

packages/block-library/src/index.js

@@ -20,6 +20,7 @@ import * as gallery from './gallery';
 import * as archives from './archives';
 import * as audio from './audio';
 import * as button from './button';
+import * as calendar from './calendar';
 import * as categories from './categories';
 import * as code from './code';
 import * as columns from './columns';
@@ -67,6 +68,7 @@ export const registerCoreBlocks = () => {
 		archives,
 		audio,
 		button,
+		calendar,
 		categories,
 		code,
 		columns,

packages/block-library/src/style.scss

@@ -2,6 +2,7 @@
 @import "./block/edit-panel/style.scss";
 @import "./block/indicator/style.scss";
 @import "./button/style.scss";
+@import "./calendar/style.scss";
 @import "./categories/style.scss";
 @import "./columns/style.scss";
 @import "./cover/style.scss";

test/integration/full-content/fixtures/core__calendar.html

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

test/integration/full-content/fixtures/core__calendar.json

@@ -0,0 +1,10 @@
+[
+    {
+        "clientId": "_clientId_0",
+        "name": "core/calendar",
+        "isValid": true,
+        "attributes": {},
+        "innerBlocks": [],
+        "originalContent": ""
+    }
+]

test/integration/full-content/fixtures/core__calendar.parsed.json

@@ -0,0 +1,18 @@
+[
+    {
+        "blockName": "core/calendar",
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "",
+        "innerContent": []
+    },
+    {
+        "blockName": null,
+        "attrs": {},
+        "innerBlocks": [],
+        "innerHTML": "\n",
+        "innerContent": [
+            "\n"
+        ]
+    }
+]

test/integration/full-content/fixtures/core__calendar.serialized.html

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