Theme: Add blocks and block binding for pledge details

See #276

plugins/wporg-5ftf/assets/js/dialog.js

@@ -43,6 +43,8 @@ jQuery( document ).ready( function( $ ) {
 			}
 		}
 
+		button.setAttribute( 'aria-expanded', true );
+
 		modal.removeAttribute( 'hidden' );
 		modalBg.removeAttribute( 'hidden' );
 		modal.style.top = position.top + 'px';
@@ -66,6 +68,8 @@ jQuery( document ).ready( function( $ ) {
 		modal.hidden = true;
 		modalBg.hidden = true;
 
+		button.setAttribute( 'aria-expanded', false );
+
 		// Wait a tick before setting focus. See https://github.com/WICG/inert#performance-and-gotchas
 		setTimeout( function() {
 			if ( button ) {

plugins/wporg-5ftf/views/button-request-manage-link.php

@@ -6,7 +6,7 @@
 
 ?>
 <div class="edit-pledge-wrapper">
-	<button id="toggle-management-link-form" class="button button-link">
+	<button id="toggle-management-link-form" class="button button-link" aria-expanded="false" aria-controls="send-link-dialog">
 		<span class="dashicons dashicons-edit" aria-hidden="true"></span>
 		<?php esc_html_e( 'Edit Pledge', 'wporg-5ftf' ); ?>
 	</button>

plugins/wporg-5ftf/views/form-request-manage-link.php

@@ -25,10 +25,12 @@
 
 	<div class="message"></div>
 
-	<input
-		type="submit"
-		class="button"
-		name="get_manage_pledge_link"
-		value="<?php esc_attr_e( 'Submit', 'wporg-5ftf' ); ?>"
-	/>
+	<div class="wp-block-button is-small">
+		<input
+			type="submit"
+			class="button wp-block-button__link"
+			name="get_manage_pledge_link"
+			value="<?php esc_attr_e( 'Submit', 'wporg-5ftf' ); ?>"
+		/>
+	</div>
 </form>

themes/wporg-5ftf-2024/functions.php

@@ -2,12 +2,20 @@
 
 namespace WordPressDotOrg\Theme\FiveForTheFuture_2024;
 
+use function WordPressDotOrg\FiveForTheFuture\PledgeMeta\get_pledge_meta;
+use const WordPressDotOrg\FiveForTheFuture\Pledge\CPT_ID as PLEDGE_POST_TYPE;
+
 require_once __DIR__ . '/inc/block-config.php';
+require_once __DIR__ . '/inc/block-bindings.php';
+
+// Block files.
+require_once __DIR__ . '/src/pledge-edit-button/index.php';
 
 /**
  * Actions and filters.
  */
 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_assets' );
+add_filter( 'the_content', __NAMESPACE__ . '\inject_pledge_content' );
 
 /**
  * Enqueue scripts and styles.
@@ -30,3 +38,22 @@ function enqueue_assets() {
 		$metadata['version']
 	);
 }
+
+/**
+ * Replace the post content with the pledge description.
+ *
+ * @param string $content Content of the current post.
+ *
+ * @return string Updated content.
+ */
+function inject_pledge_content( $content ) {
+	if ( PLEDGE_POST_TYPE !== get_post_type() ) {
+		return $content;
+	}
+
+	remove_filter( 'the_content', __NAMESPACE__ . '\inject_pledge_content' );
+
+	$data = get_pledge_meta( get_the_ID() );
+	$content = apply_filters( 'the_content', $data['org-description'] );
+	return $content;
+}

themes/wporg-5ftf-2024/inc/block-bindings.php

@@ -0,0 +1,63 @@
+<?php
+/**
+ * Set up custom block bindings.
+ */
+
+namespace WordPressdotorg\Theme\FiveForTheFuture_2024\Block_Bindings;
+
+use function WordPressDotOrg\FiveForTheFuture\PledgeMeta\get_pledge_meta;
+use function WordPressDotOrg\FiveForTheFuture\XProfile\get_aggregate_contributor_data_for_pledge;
+
+add_action( 'init', __NAMESPACE__ . '\register_block_bindings' );
+
+/**
+ * Register block bindings.
+ *
+ * This registers some sources which can be used to dynamically inject content
+ * into block text or attributes.
+ */
+function register_block_bindings() {
+	register_block_bindings_source(
+		'wporg-5ftf/pledge-meta',
+		array(
+			'label' => 'Pledge meta',
+			'uses_context' => [ 'postId' ],
+			'get_value_callback' => __NAMESPACE__ . '\get_meta_binding_value',
+		)
+	);
+}
+
+/**
+ * Callback to provide the binding value.
+ */
+function get_meta_binding_value( $args, $block ) {
+	if ( ! isset( $args['key'] ) ) {
+		return '';
+	}
+
+	$data = get_pledge_meta( $block->context['postId'] );
+	if ( empty( $data ) ) {
+		return '';
+	}
+
+	switch ( $args['key'] ) {
+		case 'org-url-link':
+			return sprintf(
+				'<a href="%s" rel="nofollow">%s</a>',
+				esc_url( $data['org-url'] ),
+				esc_html( $data['org-domain'] )
+			);
+		case 'org-contribution-details':
+			$contribution_data = get_aggregate_contributor_data_for_pledge( $block->context['postId'] );
+			return sprintf(
+				__( '%1$s sponsors %2$s for a total of <strong>%3$s hours</strong> per week across <strong>%4$d teams</strong>.', 'wporg-5ftf' ),
+				get_the_title( $block->context['postId'] ),
+				sprintf(
+					_n( '<strong>%d contributor</strong>', '<strong>%d contributors</strong>', $contribution_data['contributors'], 'wporg-5ftf' ),
+					number_format_i18n( absint( $contribution_data['contributors'] ) )
+				),
+				number_format_i18n( absint( $contribution_data['hours'] ) ),
+				count( $contribution_data['teams'] )
+			);
+	}
+}

themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php

@@ -0,0 +1,93 @@
+<?php
+/**
+ * Title: Pledge Detail
+ * Slug: wporg-5ftf-2024/single-5ftf-pledge
+ * Inserter: no
+ */
+
+?>
+<!-- wp:group {"align":"wide","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|40"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+<div class="wp-block-group alignwide" style="margin-bottom:var(--wp--preset--spacing--40)">
+	<!-- wp:group {"style":{"border":{"style":"solid","width":"1px","color":"#d9d9d9","radius":"2px"}},"backgroundColor":"light-grey-2","layout":{"type":"constrained"}} -->
+	<div class="wp-block-group has-border-color has-light-grey-2-background-color has-background" style="border-color:#d9d9d9;border-style:solid;border-width:1px;border-radius:2px">
+		<!-- wp:post-featured-image {"aspectRatio":"1","width":"110px","scale":"contain"} /-->
+	</div>
+	<!-- /wp:group -->
+
+	<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical"}} -->
+	<div class="wp-block-group">
+		<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"top":"0"}}}} /-->
+
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"wporg-5ftf/pledge-meta","args":{"key":"org-url-link"}}}}} -->
+			<p>https://url.com</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph {"style":{"elements":{"link":{"color":{"text":"var:preset|color|charcoal-5"}}}},"textColor":"charcoal-5","fontSize":"extra-small"} -->
+			<p class="has-charcoal-5-color has-text-color has-link-color has-extra-small-font-size">•</p>
+			<!-- /wp:paragraph -->
+
+			<!-- wp:paragraph -->
+			<p><?php esc_html_e( 'This organization contributes 5% of their resources to the WordPress project.', 'wporg-5ftf' ); ?></p>
+			<!-- /wp:paragraph -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
+
+<!-- wp:columns {"align":"wide","style":{"spacing":{"blockGap":{"left":"var:preset|spacing|60"}}}} -->
+<div class="wp-block-columns alignwide">
+	<!-- wp:column {"width":"60%"} -->
+	<div class="wp-block-column" style="flex-basis:60%">
+		<!-- wp:post-content /-->
+
+		<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|20"}}},"backgroundColor":"black-opacity-15"} -->
+		<hr class="wp-block-separator has-text-color has-black-opacity-15-color has-alpha-channel-opacity has-black-opacity-15-background-color has-background is-style-wide" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--20)"/>
+		<!-- /wp:separator -->
+
+		<!-- wp:buttons {"style":{"spacing":{"blockGap":"5px"}}} -->
+		<div class="wp-block-buttons">
+			<!-- wp:button -->
+			<div class="wp-block-button is-style-text is-destructive is-small">
+				<a class="wp-block-button__link wp-element-button" href="<?php echo esc_url( home_url( '/report/' ) ); ?>"><?php esc_html_e( 'Report a problem', 'wporg-5ftf' ); ?></a>
+			</div>
+			<!-- /wp:button -->
+
+			<!-- wp:wporg/pledge-edit-button /-->
+		</div>
+		<!-- /wp:buttons -->
+	</div>
+	<!-- /wp:column -->
+
+	<!-- wp:column {"width":"40%"} -->
+	<div class="wp-block-column" style="flex-basis:40%">
+		<!-- wp:heading {"style":{"spacing":{"margin":{"top":"0"}},"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"heading-5","fontFamily":"inter"} -->
+		<h2 class="wp-block-heading has-inter-font-family has-heading-5-font-size" style="margin-top:0;font-style:normal;font-weight:600">Contributions</h2>
+		<!-- /wp:heading -->
+
+		<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"wporg-5ftf/pledge-meta","args":{"key":"org-contribution-details"}}}}} -->
+		<p></p>
+		<!-- /wp:paragraph -->
+
+		<!-- wp:paragraph -->
+		<p>{Team list}</p>
+		<!-- /wp:paragraph -->
+	</div>
+	<!-- /wp:column -->
+</div>
+<!-- /wp:columns -->
+
+<!-- wp:group {"align":"wide","layout":{"type":"default"}} -->
+<div class="wp-block-group alignwide">
+	<!-- wp:heading -->
+	<h2 class="wp-block-heading">Contributors</h2>
+	<!-- /wp:heading -->
+
+	<!-- wp:paragraph -->
+	<p>{Avatar list}</p>
+	<!-- /wp:paragraph -->
+</div>
+<!-- /wp:group -->

themes/wporg-5ftf-2024/src/pledge-edit-button/block.json

@@ -0,0 +1,17 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"name": "wporg/pledge-edit-button",
+	"version": "0.1.0",
+	"title": "Edit pledge button",
+	"category": "design",
+	"icon": "",
+	"description": "Render the pledge edit button and form.",
+	"textdomain": "wporg",
+	"supports": {
+		"html": false
+	},
+	"usesContext": [ "postId", "postType" ],
+	"editorScript": "file:./index.js",
+	"style": "file:./style-index.css"
+}

themes/wporg-5ftf-2024/src/pledge-edit-button/index.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { registerBlockType } from '@wordpress/blocks';
+import { useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import './style.scss';
+
+const Edit = () => {
+	const blockProps = useBlockProps();
+	return (
+		<div { ...blockProps }>
+			<button>
+				<span className="dashicons dashicons-edit" aria-hidden="true"></span>
+				Edit Pledge
+			</button>
+		</div>
+	);
+};
+
+registerBlockType( metadata.name, {
+	edit: Edit,
+	save: () => null,
+} );

themes/wporg-5ftf-2024/src/pledge-edit-button/index.php

@@ -0,0 +1,53 @@
+<?php
+/**
+ * Block Name: Edit pledge button
+ * Description: Render the pledge edit button and form.
+ *
+ * @package wporg
+ */
+
+namespace WordPressdotorg\Theme\FiveForTheFuture_2024\Pledge_Edit_Button_Block;
+
+use WP_HTML_Tag_Processor;
+
+defined( 'WPINC' ) || die();
+
+add_action( 'init', __NAMESPACE__ . '\init' );
+
+/**
+ * Register the block.
+ */
+function init() {
+	register_block_type(
+		dirname( dirname( __DIR__ ) ) . '/build/pledge-edit-button',
+		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 ) {
+	ob_start();
+	do_action( 'pledge_footer' );
+	$content = ob_get_clean();
+
+	$html = new WP_HTML_Tag_Processor( $content );
+	$html->next_tag( 'button' );
+	$html->add_class( 'wp-block-button__link' );
+
+	$wrapper_attributes = get_block_wrapper_attributes( [ 'class' => 'wp-block-button is-style-text is-small' ]);
+	return sprintf(
+		'<div %s>%s</div>',
+		$wrapper_attributes,
+		$html->get_updated_html()
+	);
+}