mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-04-16 08:33:43 +03:00
Kelly Dwan
parent
7b2525aedb
commit
cbabdbb33e
|
|
@ -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 ) {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ defined( 'WPINC' ) || die();
|
|||
|
||||
?>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -25,10 +25,12 @@ $pledge_id = ( Pledge\CPT_ID === get_post_type() ) ? get_post()->ID : absint( $_
|
|||
|
||||
<div class="message"></div>
|
||||
|
||||
<div class="wp-block-button is-small">
|
||||
<input
|
||||
type="submit"
|
||||
class="button"
|
||||
class="button wp-block-button__link"
|
||||
name="get_manage_pledge_link"
|
||||
value="<?php esc_attr_e( 'Submit', 'wporg-5ftf' ); ?>"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
63
themes/wporg-5ftf-2024/inc/block-bindings.php
Normal file
63
themes/wporg-5ftf-2024/inc/block-bindings.php
Normal file
|
|
@ -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'] )
|
||||
);
|
||||
}
|
||||
}
|
||||
93
themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php
Normal file
93
themes/wporg-5ftf-2024/patterns/single-5ftf-pledge.php
Normal file
|
|
@ -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 -->
|
||||
17
themes/wporg-5ftf-2024/src/pledge-edit-button/block.json
Normal file
17
themes/wporg-5ftf-2024/src/pledge-edit-button/block.json
Normal file
|
|
@ -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"
|
||||
}
|
||||
28
themes/wporg-5ftf-2024/src/pledge-edit-button/index.js
Normal file
28
themes/wporg-5ftf-2024/src/pledge-edit-button/index.js
Normal file
|
|
@ -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,
|
||||
} );
|
||||
53
themes/wporg-5ftf-2024/src/pledge-edit-button/index.php
Normal file
53
themes/wporg-5ftf-2024/src/pledge-edit-button/index.php
Normal file
|
|
@ -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()
|
||||
);
|
||||
}
|
||||
59
themes/wporg-5ftf-2024/src/pledge-edit-button/style.scss
Normal file
59
themes/wporg-5ftf-2024/src/pledge-edit-button/style.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,9 @@
|
|||
<!-- wp:template-part {"slug":"header","className":"has-display-contents"} /-->
|
||||
|
||||
<!-- wp:group {"tagName":"article","layout":{"inherit":true,"type":"constrained"}} -->
|
||||
<article class="wp-block-group">
|
||||
<!-- wp:group -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:post-title {"level":1,"style":{"spacing":{"margin":{"top":"0px","bottom":"var:preset|spacing|40"}}}} /-->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
<!-- wp:group {"tagName":"article","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"},"margin":{"bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
|
||||
<article class="wp-block-group" style="margin-bottom:var(--wp--preset--spacing--60);padding-right:var(--wp--preset--spacing--edge-space);padding-left:var(--wp--preset--spacing--edge-space)">
|
||||
|
||||
<!-- wp:post-content {"layout":{"type":"constrained"},"align":"full","style":{"spacing":{"padding":{"right":"var:preset|spacing|edge-space","left":"var:preset|spacing|edge-space"}}}} /-->
|
||||
<!-- wp:pattern {"slug":"wporg-5ftf-2024/single-5ftf-pledge"} /-->
|
||||
|
||||
</article>
|
||||
<!-- /wp:group -->
|
||||
|
|
|
|||
Loading…
Reference in a new issue