diff --git a/lib/load.php b/lib/load.php index b3c81971a353f..54be9e51c49bd 100644 --- a/lib/load.php +++ b/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'; diff --git a/packages/block-library/src/calendar/edit.js b/packages/block-library/src/calendar/edit.js new file mode 100644 index 0000000000000..67d89d99bd457 --- /dev/null +++ b/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(), + month: momentDate.month() + 1, + }; + } + + getServerSideAttributes( attributes, date ) { + return { + ...attributes, + ...this.getYearMonth( date ), + }; + } + + render() { + return ( + + + + ); + } +} + +export default withSelect( ( select ) => { + return { + date: select( 'core/editor' ).getEditedPostAttribute( 'date' ), + }; +} )( CalendarEdit ); diff --git a/packages/block-library/src/calendar/index.js b/packages/block-library/src/calendar/index.js new file mode 100644 index 0000000000000..da8f02dbe4038 --- /dev/null +++ b/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; + }, +}; diff --git a/packages/block-library/src/calendar/index.php b/packages/block-library/src/calendar/index.php new file mode 100644 index 0000000000000..9177997692f40 --- /dev/null +++ b/packages/block-library/src/calendar/index.php @@ -0,0 +1,71 @@ +%2$s', + esc_attr( 'wp-block-calendar' . $custom_class_name . $align_class_name ), + get_calendar( true, false ) + ); + + // phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited + $monthnum = $previous_monthnum; + // phpcs:ignore WordPress.WP.GlobalVariablesOverride.OverrideProhibited + $year = $previous_year; +} + +/** + * 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', + ), + 'month' => array( + 'type' => 'integer', + ), + 'year' => array( + 'type' => 'integer', + ), + ), + 'render_callback' => 'render_block_core_calendar', + ) + ); +} + +add_action( 'init', 'register_block_core_calendar' ); diff --git a/packages/block-library/src/calendar/style.scss b/packages/block-library/src/calendar/style.scss new file mode 100644 index 0000000000000..f6fc8f3a5ad7b --- /dev/null +++ b/packages/block-library/src/calendar/style.scss @@ -0,0 +1,37 @@ +.wp-block-calendar { + text-align: center; + + th, + tbody td { + padding: 4px; + border: 1px solid $light-gray-500; + } + + tfoot td { + border: none; + } + + table { + width: 100%; + border-collapse: collapse; + font-family: $default-font; + } + + table th { + font-weight: 440; + background: $light-gray-300; + } + + a { + text-decoration: underline; + } + + tfoot a { + color: $blue-medium-800; + } + + table tbody, + table caption { + color: $dark-gray-600; + } +} diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index aac4e56fc7a8b..1439edcc350ec 100644 --- a/packages/block-library/src/index.js +++ b/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'; @@ -68,6 +69,7 @@ export const registerCoreBlocks = () => { archives, audio, button, + calendar, categories, code, columns, diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 35168d85ab237..f9a53b9221417 100644 --- a/packages/block-library/src/style.scss +++ b/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"; diff --git a/test/integration/full-content/fixtures/core__calendar.html b/test/integration/full-content/fixtures/core__calendar.html new file mode 100644 index 0000000000000..bef2c9d140267 --- /dev/null +++ b/test/integration/full-content/fixtures/core__calendar.html @@ -0,0 +1 @@ + diff --git a/test/integration/full-content/fixtures/core__calendar.json b/test/integration/full-content/fixtures/core__calendar.json new file mode 100644 index 0000000000000..e0d590b3b9dc1 --- /dev/null +++ b/test/integration/full-content/fixtures/core__calendar.json @@ -0,0 +1,10 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/calendar", + "isValid": true, + "attributes": {}, + "innerBlocks": [], + "originalContent": "" + } +] diff --git a/test/integration/full-content/fixtures/core__calendar.parsed.json b/test/integration/full-content/fixtures/core__calendar.parsed.json new file mode 100644 index 0000000000000..eceba9dddbe8e --- /dev/null +++ b/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" + ] + } +] diff --git a/test/integration/full-content/fixtures/core__calendar.serialized.html b/test/integration/full-content/fixtures/core__calendar.serialized.html new file mode 100644 index 0000000000000..bef2c9d140267 --- /dev/null +++ b/test/integration/full-content/fixtures/core__calendar.serialized.html @@ -0,0 +1 @@ +