diff --git a/plugins/wporg-5ftf/assets/js/dialog.js b/plugins/wporg-5ftf/assets/js/dialog.js index 747008f7..68e27126 100644 --- a/plugins/wporg-5ftf/assets/js/dialog.js +++ b/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 ) { diff --git a/plugins/wporg-5ftf/views/button-request-manage-link.php b/plugins/wporg-5ftf/views/button-request-manage-link.php index d5467645..25cdc512 100644 --- a/plugins/wporg-5ftf/views/button-request-manage-link.php +++ b/plugins/wporg-5ftf/views/button-request-manage-link.php @@ -6,7 +6,7 @@ ?>
- diff --git a/plugins/wporg-5ftf/views/form-request-manage-link.php b/plugins/wporg-5ftf/views/form-request-manage-link.php index d32478f6..8e9d3c56 100644 --- a/plugins/wporg-5ftf/views/form-request-manage-link.php +++ b/plugins/wporg-5ftf/views/form-request-manage-link.php @@ -25,10 +25,12 @@
- +
+ +
diff --git a/themes/wporg-5ftf-2024/functions.php b/themes/wporg-5ftf-2024/functions.php index 4abef1cf..7b60fb90 100644 --- a/themes/wporg-5ftf-2024/functions.php +++ b/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; +} diff --git a/themes/wporg-5ftf-2024/inc/block-bindings.php b/themes/wporg-5ftf-2024/inc/block-bindings.php new file mode 100644 index 00000000..ce8256fd --- /dev/null +++ b/themes/wporg-5ftf-2024/inc/block-bindings.php @@ -0,0 +1,63 @@ + '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( + '%s', + 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 %3$s hours per week across %4$d teams.', 'wporg-5ftf' ), + get_the_title( $block->context['postId'] ), + sprintf( + _n( '%d contributor', '%d contributors', $contribution_data['contributors'], 'wporg-5ftf' ), + number_format_i18n( absint( $contribution_data['contributors'] ) ) + ), + number_format_i18n( absint( $contribution_data['hours'] ) ), + count( $contribution_data['teams'] ) + ); + } +} diff --git a/themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php b/themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php new file mode 100644 index 00000000..103e343d --- /dev/null +++ b/themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php @@ -0,0 +1,93 @@ + + +
+ +
+ +
+ + + +
+ + + +
+ +

https://url.com

+ + + + + + + +

+ +
+ +
+ +
+ + + +
+ +
+ + + +
+ + + +
+ +
+ +
+ + + +
+ +
+ + + +
+ +

Contributions

+ + + +

+ + + +

{Team list}

+ +
+ +
+ + + +
+ +

Contributors

+ + + +

{Avatar list}

+ +
+ diff --git a/themes/wporg-5ftf-2024/src/pledge-edit-button/block.json b/themes/wporg-5ftf-2024/src/pledge-edit-button/block.json new file mode 100644 index 00000000..cb3effc3 --- /dev/null +++ b/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" +} diff --git a/themes/wporg-5ftf-2024/src/pledge-edit-button/index.js b/themes/wporg-5ftf-2024/src/pledge-edit-button/index.js new file mode 100644 index 00000000..08c9264c --- /dev/null +++ b/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 ( +
+ +
+ ); +}; + +registerBlockType( metadata.name, { + edit: Edit, + save: () => null, +} ); diff --git a/themes/wporg-5ftf-2024/src/pledge-edit-button/index.php b/themes/wporg-5ftf-2024/src/pledge-edit-button/index.php new file mode 100644 index 00000000..4f2d2fb6 --- /dev/null +++ b/themes/wporg-5ftf-2024/src/pledge-edit-button/index.php @@ -0,0 +1,53 @@ + __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( + '
%s
', + $wrapper_attributes, + $html->get_updated_html() + ); +} diff --git a/themes/wporg-5ftf-2024/src/pledge-edit-button/style.scss b/themes/wporg-5ftf-2024/src/pledge-edit-button/style.scss new file mode 100644 index 00000000..a82cc5e4 --- /dev/null +++ b/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; + } +} diff --git a/themes/wporg-5ftf-2024/templates/single-5ftf_pledge.html b/themes/wporg-5ftf-2024/templates/single-5ftf_pledge.html index 66dd1618..586135f7 100644 --- a/themes/wporg-5ftf-2024/templates/single-5ftf_pledge.html +++ b/themes/wporg-5ftf-2024/templates/single-5ftf_pledge.html @@ -1,14 +1,9 @@ - -
- -
- -
- + +
- +