feat: Correction box & Loop item blocks

includes/blocks/correction-box-block/block.json

@@ -0,0 +1,45 @@
+{
+	"name": "newspack-block-theme/correction-box",
+	"category": "newspack",
+	"attributes": {},
+	"supports": {
+		"html": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
+		"color": {
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true,
+			"blockGap": true
+		},
+		"layout": true,
+		"shadow": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"textAlign": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalWritingMode": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	},
+	"usesContext": [ "postId" ],
+	"textdomain": "newspack-block-theme"
+}

includes/blocks/correction-box-block/class-correction-box-block.php

@@ -0,0 +1,113 @@
+<?php
+/**
+ * Correction Box Block.
+ *
+ * @package Newspack_Block_Theme
+ */
+
+namespace Newspack_Block_Theme;
+
+use Newspack\Corrections;
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * Corrections Box class.
+ */
+final class Correction_Box_Block {
+	/**
+	 * Initializes the block.
+	 */
+	public static function init() {
+		add_action( 'init', [ __CLASS__, 'register_block' ] );
+		add_action( 'enqueue_block_editor_assets', [ __CLASS__, 'enqueue_block_editor_assets' ] );
+	}
+
+	/**
+	 * Registers the block.
+	 */
+	public static function register_block() {
+		register_block_type_from_metadata(
+			__DIR__ . '/block.json',
+			[
+				'render_callback' => [ __CLASS__, 'render_block' ],
+				'uses_context'    => [ 'postId' ],
+			]
+		);
+	}
+
+	/**
+	 * Enqueues block editor assets.
+	 */
+	public static function enqueue_block_editor_assets() {
+		global $pagenow;
+		$handle = '';
+		if ( 'site-editor.php' === $pagenow ) {
+			$handle = 'newspack-block-theme-correction-box-site-editor';
+			wp_enqueue_script( $handle, \get_theme_file_uri( 'dist/correction-box-block-site-editor.js' ), [ 'wp-blocks', 'wp-i18n', 'wp-element' ], NEWSPACK_BLOCK_THEME_VERSION, true );
+			return;
+		}
+
+		$handle = 'newspack-block-theme-correction-box-block';
+		wp_enqueue_script( $handle, \get_theme_file_uri( 'dist/correction-box-block-index.js' ), [ 'wp-blocks', 'wp-i18n', 'wp-element' ], NEWSPACK_BLOCK_THEME_VERSION, true );
+	}
+
+	/**
+	 * Block render callback.
+	 *
+	 * @param array  $attributes The block attributes.
+	 * @param string $content    The block content.
+	 * @param object $block      The block.
+	 *
+	 * @return string The block HTML.
+	 */
+	public static function render_block( array $attributes, string $content, $block ) {
+		$post_id = $block->context['postId'] ?? null;
+
+		if ( empty( $post_id ) ) {
+			return '';
+		}
+
+		// Fetch corrections.
+		$corrections = Corrections::get_corrections( $post_id );
+
+		if ( empty( $corrections ) ) {
+			return '';
+		}
+
+		$block_wrapper_attributes = get_block_wrapper_attributes();
+		$corrections_archive_url = get_post_type_archive_link( Corrections::POST_TYPE );
+
+		ob_start();
+		?>
+		<div <?php echo $block_wrapper_attributes; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>>
+			<?php
+			foreach ( $corrections as $correction ) :
+				$correction_content = $correction->post_content;
+				$correction_date    = \get_the_date( get_option( 'date_format' ), $correction->ID );
+				$correction_time    = \get_the_time( get_option( 'time_format' ), $correction->ID );
+				$timezone           = \wp_timezone()->getName();
+				$correction_heading = sprintf(
+					'%s, %s %s %s:',
+					Corrections::get_correction_type( $correction->ID ),
+					$correction_date,
+					$correction_time,
+					$timezone
+				);
+				?>
+				<p class="correction">
+					<a class="correction-title" href="<?php echo esc_url( $corrections_archive_url ); ?>">
+						<?php echo esc_html( $correction_heading ); ?>
+					</a>
+					<span class="correction-content">
+						<?php echo esc_html( $correction_content ); ?>
+					</span>
+				</p>
+			<?php endforeach; ?>
+		</div>
+		<?php
+		return ob_get_clean();
+	}
+}
+
+Correction_Box_Block::init();

includes/blocks/correction-box-block/edit.jsx

@@ -0,0 +1,76 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { update } from '@wordpress/icons';
+import { useSelect } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import ServerSideRender from '@wordpress/server-side-render';
+import { BlockControls } from '@wordpress/block-editor';
+import { Placeholder, ToolbarGroup, ToolbarButton } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import meta from './block.json';
+
+/**
+ * Edit function for the Correction Box block.
+ *
+ * @return {JSX.Element} The Correction Box block.
+ */
+export default function Edit() {
+	const [ isRefreshing, setIsRefreshing ] = useState( false );
+	const postType = useSelect( select => select( 'core/editor' ).getCurrentPostType(), [] );
+
+	/**
+	 * Placeholder when no Corrections are available.
+	 *
+	 * @return {JSX.Element} The Empty Placeholder JSX.
+	 */
+	function EmptyPlaceholder() {
+		return (
+			<Placeholder
+				label={ __( 'Corrections', 'newspack-block-theme' ) }
+				instructions={ __(
+					'This block will display corrections and clarifications. Please add the block to a post or page.',
+					'newspack-block-theme'
+				) }
+			/>
+		);
+	}
+
+	/**
+	 * Toggle Refresh state.
+	 */
+	const toggleRefresh = () => {
+		setIsRefreshing( ! isRefreshing );
+	};
+
+	return 'wp_template' === postType ? (
+		<Placeholder
+			label={ __( 'Corrections', 'newspack-block-theme' ) }
+			instructions={ __(
+				'This is the Corrections block, it will display all the corrections and clarifications',
+				'newspack-block-theme'
+			) }
+		/>
+	) : (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						icon={ update }
+						label={ __( 'Refresh', 'newspack-block-theme' ) }
+						onClick={ toggleRefresh }
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			<ServerSideRender
+				block={ meta.name }
+				EmptyResponsePlaceholder={ EmptyPlaceholder }
+				refresh={ isRefreshing }
+			/>
+		</>
+	);
+}

includes/blocks/correction-box-block/index.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { Path, SVG } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import blockData from './block.json';
+import Edit from './edit';
+
+export const title = __( 'Corrections', 'newspack-blocks' );
+
+export const icon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<Path d="M4 14.5H20V16H4V14.5ZM4 20H13V18.5H4V20ZM12 5.9L10.1 4L4.7 9.4L4.1 12L6.7 11.4L12.1 6L12 5.9Z" />
+	</SVG>
+);
+
+blockData = {
+	title,
+	icon: {
+		src: icon,
+		foreground: '#406ebc',
+	},
+	keywords: [ __( 'clarifications', 'newspack-blocks' ), __( 'updates', 'newspack-blocks' ) ],
+	description: __(
+		'Display all corrections and clarifications made to a post.',
+		'newspack-blocks'
+	),
+	usesContext: [ 'postId' ],
+	edit: Edit,
+	...blockData,
+};
+
+registerBlockType( blockData.name, blockData );

includes/blocks/correction-box-block/site-editor.js

@@ -0,0 +1,48 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { Path, SVG, Placeholder } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import blockData from './block.json';
+
+export const title = __( 'Corrections', 'newspack-block-theme' );
+
+export const icon = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+		<Path d="M4 14.5H20V16H4V14.5ZM4 20H13V18.5H4V20ZM12 5.9L10.1 4L4.7 9.4L4.1 12L6.7 11.4L12.1 6L12 5.9Z" />
+	</SVG>
+);
+
+const EditComponent = () => {
+	return (
+		<Placeholder
+			label={ __( 'Corrections', 'newspack-block-theme' ) }
+			instructions={ __(
+				'This is the Corrections block, it will display all the corrections and clarifications',
+				'newspack-block-theme'
+			) }
+		/>
+	);
+};
+
+const siteEditorBlockData = {
+	title,
+	icon: {
+		src: icon,
+		foreground: '#406ebc',
+	},
+	keywords: [ __( 'clarifications', 'newspack-blocks' ), __( 'updates', 'newspack-blocks' ) ],
+	description: __(
+		'Display all corrections and clarifications made to a post.',
+		'newspack-blocks'
+	),
+	...blockData,
+	edit: EditComponent,
+};
+
+registerBlockType( blockData.name, siteEditorBlockData );

includes/blocks/correction-item-block/block.json

@@ -0,0 +1,44 @@
+{
+	"name": "newspack-block-theme/correction-item",
+	"category": "newspack",
+	"attributes": {},
+	"supports": {
+		"html": false,
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		},
+		"color": {
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"shadow": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"textAlign": true,
+			"__experimentalFontFamily": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalFontStyle": true,
+			"__experimentalFontWeight": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalTextTransform": true,
+			"__experimentalWritingMode": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	},
+	"parent": [ "core/post-template" ],
+	"usesContext": [ "postId", "postType" ],
+	"textdomain": "newspack-block-theme"
+}