Theme: Add blocks and block binding for pledge details

See #276

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()
+	);
+}

themes/wporg-5ftf-2024/src/pledge-edit-button/style.scss

@@ -0,0 +1,59 @@
+.edit-pledge-wrapper .wp-block-button__link[aria-expanded="true"] {
+	background-color: var(--wp--preset--color--charcoal-1) !important;
+	color: var(--wp--preset--color--white) !important;
+}
+
+.pledge-dialog {
+	position: absolute;
+	z-index: 100;
+	width: 25rem;
+	margin-top: var(--wp--preset--spacing--10);
+	padding: var(--wp--preset--spacing--20);
+	background: #fff;
+	border: 1px solid var(--wp--preset--color--light-grey-1);
+
+	&[hidden] {
+		display: none;
+	}
+
+	.pledge-dialog__close {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: var(--wp--preset--spacing--10);
+		text-decoration: none;
+		background: none;
+		border: none;
+	}
+}
+
+.pledge-dialog__background {
+	position: fixed;
+	z-index: 99;
+	top: 0;
+	left: 0;
+	bottom: 0;
+	right: 0;
+
+	&[hidden] {
+		display: none;
+	}
+}
+
+.pledge-email-form {
+	label {
+		display: inline-block;
+		margin-bottom: 4px;
+	}
+
+	input[type="email"] {
+		display: block;
+		width: 100%;
+		margin: 0 0 var(--wp--preset--spacing--10) 0;
+		box-shadow: none;
+	}
+
+	.message {
+		margin: 0 0 var(--wp--preset--spacing--10) 0;
+	}
+}