Add a remembers block. (#346)

source/wp-content/themes/wporg-main-2022/functions.php

@@ -13,6 +13,7 @@
 require_once __DIR__ . '/src/google-search-embed/index.php';
 require_once __DIR__ . '/src/random-heading/index.php';
 require_once __DIR__ . '/src/release-tables/index.php';
+require_once __DIR__ . '/src/remembers-list/index.php';
 
 /**
  * Actions and filters.

source/wp-content/themes/wporg-main-2022/src/remembers-list/block.json

@@ -0,0 +1,35 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/remembers-list",
+	"version": "0.1.0",
+	"title": "Remembers Contributor List",
+	"category": "design",
+	"icon": "list-view",
+	"description": "Displays a list of memorialized contributors.",
+	"textdomain": "wporg",
+	"attributes": {
+		"columns": {
+			"type": "number",
+			"default": 3
+		}
+	},
+	"supports": {
+		"align": true,
+		"color": {
+			"background": true,
+			"text": true
+		},
+		"spacing": {
+			"margin": [ "top", "bottom" ],
+			"padding": true,
+			"blockGap": false
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true
+		}
+	},
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}

source/wp-content/themes/wporg-main-2022/src/remembers-list/edit.js

@@ -0,0 +1,30 @@
+/**
+ * WordPress dependencies
+ */
+
+import { Disabled, PanelBody, RangeControl } from '@wordpress/components';
+import ServerSideRender from '@wordpress/server-side-render';
+import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+export default function Edit( { attributes, name, setAttributes } ) {
+	const { columns } = attributes;
+	return (
+		<div { ...useBlockProps() }>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings', 'wporg' ) }>
+					<RangeControl
+						label={ __( 'Columns', 'wporg' ) }
+						value={ columns }
+						onChange={ ( newNumber ) => setAttributes( { columns: parseInt( newNumber ) } ) }
+						min={ Math.max( 1, 1 ) }
+						max={ Math.max( 6, 10 ) }
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<Disabled>
+				<ServerSideRender block={ name } attributes={ attributes } />
+			</Disabled>
+		</div>
+	);
+}

source/wp-content/themes/wporg-main-2022/src/remembers-list/index.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import Edit from './edit';
+import metadata from './block.json';
+import './style.scss';
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save: () => null,
+} );

source/wp-content/themes/wporg-main-2022/src/remembers-list/index.php

@@ -0,0 +1,80 @@
+<?php
+/**
+ * Block Name: Remembers Contributor List
+ * Description: Displays a list of memorialized contributors..
+ *
+ * @package wporg
+ */
+
+namespace WordPressdotorg\Theme\Main_2022\Remembers_List_Block;
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Registers the block using the metadata loaded from the `block.json` file.
+ * Behind the scenes, it registers also all assets so they can be enqueued
+ * through the block editor in the corresponding context.
+ *
+ * @see https://developer.wordpress.org/reference/functions/register_block_type/
+ */
+function init() {
+	register_block_type(
+		dirname( dirname( __DIR__ ) ) . '/build/remembers-list',
+		array(
+			'render_callback' => __NAMESPACE__ . '\render',
+		)
+	);
+}
+
+/**
+ * Render the block content.
+ *
+ * @param array    $attributes Block attributes.
+ * @param string   $content    Block default content.
+ * @param WP_Block $block      Block instance.
+ *
+ * @return string Returns the block markup.
+ */
+function render( $attributes, $content, $block ) {
+
+	if ( ! function_exists( '\WordPressdotorg\MemorialProfiles\get_profiles' ) ) {
+		return __( 'Memorial Profiles mu-plugin is missing.', 'wporg' );
+	}
+
+	$profiles = \WordPressdotorg\MemorialProfiles\get_profiles();
+
+	$columns     = $attributes['columns'];
+	$group_count = ceil( count( $profiles ) / $columns );
+
+	$groups = array();
+	for ( $i = 0; $i < $group_count; $i++ ) {
+		$groups[] = array_slice( $profiles, $i * $columns, $columns );
+	}
+
+	$block_content = '';
+	foreach ( $groups as $group ) {
+		// Set isStackedOnMobile to false so that the columns are not stacked on mobile. We override this in CSS to stack them.
+		$block_content .= '<!-- wp:columns {"isStackedOnMobile":false} --><div class="wp-block-columns is-not-stacked-on-mobile">';
+
+		foreach ( $group as $profile ) {
+			$block_content .= '<!-- wp:column --><div class="wp-block-column">';
+			$block_content .= '<!-- wp:heading {"textAlign":"center","style":{"spacing":{"margin":{"top":"var:preset|spacing|40","right":"var:preset|spacing|default","bottom":"var:preset|spacing|40","left":"var:preset|spacing|default"}}},"fontSize":"extra-large"} -->';
+			$block_content .= '<h2 class="wp-block-heading has-text-align-center has-extra-large-font-size" style="margin-top:var(--wp--preset--spacing--40);margin-right:var(--wp--preset--spacing--default);margin-bottom:var(--wp--preset--spacing--40);margin-left:var(--wp--preset--spacing--default)">';
+			$block_content .= '<em>';
+			$block_content .= '<a href="' . esc_url( 'https://profiles.wordpress.org/' . $profile->user_nicename ) . '">' . esc_html( $profile->display_name ) . '</a>';
+			$block_content .= '</em>';
+			$block_content .= '</h2>';
+			$block_content .= '<!-- /wp:heading -->';
+			$block_content .= '</div><!-- /wp:column -->';
+		}
+
+		$block_content .= '</div><!-- /wp:columns -->';
+	}
+
+	$wrapper_attributes = get_block_wrapper_attributes();
+	return sprintf(
+		'<div %1$s>%2$s</div>',
+		$wrapper_attributes,
+		do_blocks( $block_content )
+	);
+}

source/wp-content/themes/wporg-main-2022/src/remembers-list/style.scss

@@ -0,0 +1,16 @@
+.wp-block-wporg-remembers-list a {
+	display: inline-block;
+	color: inherit;
+	text-decoration: none;
+
+	&:hover {
+		color: var(--wp--custom--link--color--text);
+		text-decoration: underline;
+	}
+}
+
+@media ( max-width: 500px) {
+	.wp-block-wporg-remembers-list .wp-block-columns {
+		flex-direction: column !important;
+	}
+}