mirror of
https://github.com/WordPress/five-for-the-future.git
synced 2025-07-13 22:05:44 +03:00
My Pledges: Create template and block to list users' pledges.
This commit is contained in:
Kelly Dwan
parent
f412bc8fba
commit
284016141b
10 changed files with 424 additions and 3 deletions
17
themes/wporg-5ftf-2024/src/my-pledge-list/block.json
Normal file
17
themes/wporg-5ftf-2024/src/my-pledge-list/block.json
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
{
|
||||
"$schema": "https://schemas.wp.org/trunk/block.json",
|
||||
"apiVersion": 2,
|
||||
"name": "wporg/my-pledge-list",
|
||||
"version": "0.1.0",
|
||||
"title": "My pledges",
|
||||
"category": "design",
|
||||
"icon": "",
|
||||
"description": "List out the pledges for this user.",
|
||||
"textdomain": "wporg",
|
||||
"supports": {
|
||||
"html": false
|
||||
},
|
||||
"editorScript": "file:./index.js",
|
||||
"style": "file:./style-index.css",
|
||||
"render": "file:./render.php"
|
||||
}
|
||||
26
themes/wporg-5ftf-2024/src/my-pledge-list/index.js
Normal file
26
themes/wporg-5ftf-2024/src/my-pledge-list/index.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { registerBlockType } from '@wordpress/blocks';
|
||||
import { useBlockProps } from '@wordpress/block-editor';
|
||||
import ServerSideRender from '@wordpress/server-side-render';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import metadata from './block.json';
|
||||
import './style.scss';
|
||||
|
||||
const Edit = ( { attributes, name } ) => {
|
||||
const blockProps = useBlockProps();
|
||||
return (
|
||||
<div { ...blockProps }>
|
||||
<ServerSideRender block={ name } attributes={ attributes } skipBlockSupportAttributes />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
registerBlockType( metadata.name, {
|
||||
edit: Edit,
|
||||
save: () => null,
|
||||
} );
|
||||
135
themes/wporg-5ftf-2024/src/my-pledge-list/index.php
Normal file
135
themes/wporg-5ftf-2024/src/my-pledge-list/index.php
Normal file
|
|
@ -0,0 +1,135 @@
|
|||
<?php
|
||||
/**
|
||||
* Block Name: My pledges
|
||||
* Description: List out the pledges for this user.
|
||||
*
|
||||
* @package wporg
|
||||
*/
|
||||
|
||||
namespace WordPressdotorg\Theme\FiveForTheFuture_2024\My_Pledge_List;
|
||||
|
||||
defined( 'WPINC' ) || die();
|
||||
|
||||
add_action( 'init', __NAMESPACE__ . '\init' );
|
||||
|
||||
/**
|
||||
* Register the block.
|
||||
*/
|
||||
function init() {
|
||||
register_block_type( dirname( __DIR__, 2 ) . '/build/my-pledge-list' );
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function to render single pledges in My Pledge list.
|
||||
*/
|
||||
function render_single_pledge( $contributor_post, $has_profile_data ) {
|
||||
global $post;
|
||||
// phpcs:ignore WordPress.WP.GlobalVariablesOverride.Prohibited -- Intentionally overriding so it's available in post blocks.
|
||||
$post = get_post( $contributor_post->post_parent );
|
||||
setup_postdata( $post );
|
||||
ob_start();
|
||||
?>
|
||||
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|70"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"},"className":"my-pledges__pledge"} -->
|
||||
<div class="wp-block-group my-pledges__pledge">
|
||||
<!-- wp:group {"style":{"border":{"style":"solid","width":"1px","color":"#d9d9d9","radius":"2px"},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20","right":"var:preset|spacing|20"}}},"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;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
|
||||
<!-- wp:post-featured-image {"aspectRatio":"1","width":"275px","scale":"contain"} /-->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
|
||||
<!-- wp:group {"layout":{"type":"constrained"}} -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"constrained"}} -->
|
||||
<div class="wp-block-group">
|
||||
<!-- wp:post-title {"level":3,"isLink":true,"style":{"typography":{"fontStyle":"normal","fontWeight":"600"}},"fontSize":"heading-4","fontFamily":"inter"} /-->
|
||||
|
||||
<!-- wp:paragraph -->
|
||||
<p>
|
||||
<?php
|
||||
if ( 'publish' === $contributor_post->post_status ) {
|
||||
echo esc_html( sprintf(
|
||||
__( 'You confirmed this pledge on %s', 'wporg-5ftf' ),
|
||||
gmdate( get_option( 'date_format' ), strtotime( $contributor_post->post_date ) )
|
||||
) );
|
||||
} else {
|
||||
echo esc_html_e( 'This organization would like to pledge your time', 'wporg-5ftf' );
|
||||
}
|
||||
?>
|
||||
</p>
|
||||
<!-- /wp:paragraph -->
|
||||
|
||||
<div class="my-pledges__pledge-actions">
|
||||
<form action="" method="post">
|
||||
<input type="hidden" name="contributor_post_id" value="<?php echo esc_attr( $contributor_post->ID ); ?>" />
|
||||
|
||||
<?php if ( 'pending' === $contributor_post->post_status ) : ?>
|
||||
<?php wp_nonce_field( 'join_decline_organization_' . $contributor_post->ID ); ?>
|
||||
|
||||
<div class="wp-block-button is-small">
|
||||
<input
|
||||
type="submit"
|
||||
class="button button-default wp-block-button__link wp-element-button"
|
||||
name="join_organization"
|
||||
value="Join Organization"
|
||||
<?php if ( ! $has_profile_data ) : ?>
|
||||
disabled="disabled"
|
||||
<?php endif; ?>
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="wp-block-button is-style-outline is-small">
|
||||
<input
|
||||
type="submit"
|
||||
class="button button-danger button-link wp-block-button__link wp-element-button"
|
||||
name="decline_invitation"
|
||||
value="Decline Invitation"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<?php elseif ( 'publish' === $contributor_post->post_status ) : ?>
|
||||
<?php wp_nonce_field( 'leave_organization_' . $contributor_post->ID ); ?>
|
||||
|
||||
<div class="wp-block-button is-style-outline is-destructive is-small">
|
||||
<input
|
||||
type="submit"
|
||||
class="button button-danger wp-block-button__link wp-element-button"
|
||||
name="leave_organization"
|
||||
value="Leave Organization"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
</div>
|
||||
<!-- /wp:group -->
|
||||
<?php
|
||||
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Content escaped inline.
|
||||
echo do_blocks( ob_get_clean() );
|
||||
wp_reset_postdata();
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper function to render notices using the notice block styles.
|
||||
*
|
||||
* @param string $type Type of message to render, one of `tip`, `info`, `alert`, `warning`.
|
||||
* @param string $message The message to display.
|
||||
*/
|
||||
function render_notice( $type, $message ) {
|
||||
ob_start();
|
||||
?>
|
||||
<!-- wp:wporg/notice {"type":"<?php echo esc_attr( $type ); ?>"} -->
|
||||
<div class="wp-block-wporg-notice is-<?php echo esc_attr( $type ); ?>-notice">
|
||||
<div class="wp-block-wporg-notice__icon"></div>
|
||||
<div class="wp-block-wporg-notice__content"><p><?php echo wp_kses_data( $message ); ?></p></div>
|
||||
</div>
|
||||
<!-- /wp:wporg/notice -->
|
||||
<?php
|
||||
// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Content escaped inline.
|
||||
echo do_blocks( ob_get_clean() );
|
||||
}
|
||||
97
themes/wporg-5ftf-2024/src/my-pledge-list/render.php
Normal file
97
themes/wporg-5ftf-2024/src/my-pledge-list/render.php
Normal file
|
|
@ -0,0 +1,97 @@
|
|||
<?php
|
||||
/**
|
||||
* Render the pledge list for the current user.
|
||||
* Mostly copied from Contributor\render_my_pledges, updated markup to use blocks.
|
||||
*/
|
||||
|
||||
use WordPressDotOrg\FiveForTheFuture\{ Contributor, XProfile };
|
||||
use function WordPressdotorg\Theme\FiveForTheFuture_2024\My_Pledge_List\{render_single_pledge, render_notice};
|
||||
use const WordPressDotOrg\FiveForTheFuture\Contributor\CPT_ID as CONTRIBUTOR_POST_TYPE;
|
||||
|
||||
if ( ! is_user_logged_in() ) {
|
||||
// @todo — add error message.
|
||||
return;
|
||||
}
|
||||
|
||||
$user = wp_get_current_user();
|
||||
$profile_data = XProfile\get_contributor_user_data( $user->ID );
|
||||
$pledge_url = get_permalink( get_page_by_path( 'for-organizations' ) );
|
||||
$success_message = Contributor\process_my_pledges_form();
|
||||
|
||||
$contributor_pending_posts = get_posts( array(
|
||||
'title' => $user->user_login,
|
||||
'post_type' => CONTRIBUTOR_POST_TYPE,
|
||||
'post_status' => array( 'pending' ),
|
||||
'numberposts' => 100,
|
||||
) );
|
||||
|
||||
$contributor_publish_posts = get_posts( array(
|
||||
'title' => $user->user_login,
|
||||
'post_type' => CONTRIBUTOR_POST_TYPE,
|
||||
'post_status' => array( 'publish' ),
|
||||
'numberposts' => 100,
|
||||
) );
|
||||
|
||||
$has_contributions = $contributor_pending_posts || $contributor_publish_posts;
|
||||
$has_profile_data = $profile_data['hours_per_week'] && $profile_data['team_names'];
|
||||
|
||||
?>
|
||||
<div
|
||||
<?php echo get_block_wrapper_attributes(); // phpcs:ignore ?>
|
||||
>
|
||||
<?php
|
||||
if ( $success_message ) {
|
||||
render_notice( 'info', $success_message );
|
||||
echo '<div style="margin-top:var(--wp--preset--spacing--20);height:0" aria-hidden="true" class="wp-block-spacer"></div>';
|
||||
}
|
||||
?>
|
||||
|
||||
<?php if ( $has_contributions ) : ?>
|
||||
|
||||
<?php if ( $contributor_publish_posts ) : ?>
|
||||
|
||||
<div class="my-pledges__list">
|
||||
<?php
|
||||
foreach ( $contributor_publish_posts as $contributor_post ) {
|
||||
render_single_pledge( $contributor_post, $has_profile_data );
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ( $contributor_pending_posts ) : ?>
|
||||
|
||||
<div class="my-pledges__list is-pending-list">
|
||||
<h2><?php esc_html_e( 'Pending Pledges', 'wporg-5ftf' ); ?></h2>
|
||||
|
||||
<?php
|
||||
if ( ! $has_profile_data ) {
|
||||
render_notice(
|
||||
'warning',
|
||||
sprintf(
|
||||
__( 'You need to <a href="%s">update your profile</a> before joining an organization.', 'wporg-5ftf' ),
|
||||
'https://profiles.wordpress.org/me/profile/edit/group/5/'
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
foreach ( $contributor_pending_posts as $contributor_post ) {
|
||||
render_single_pledge( $contributor_post, $has_profile_data );
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
|
||||
<?php endif; ?>
|
||||
|
||||
<?php else : ?>
|
||||
|
||||
<?php echo wp_kses_data( sprintf(
|
||||
__( 'You don’t currently have any sponsorships. If your employer is sponsoring part of your time to contribute to WordPress, please ask them to <a href="%s">submit a pledge</a> and list you as a contributor.', 'wporg-5ftf' ),
|
||||
esc_url( $pledge_url )
|
||||
) ); ?>
|
||||
|
||||
<?php // todo add some resources here about how they can convince their boss to sponsor some of their time? ?>
|
||||
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
18
themes/wporg-5ftf-2024/src/my-pledge-list/style.scss
Normal file
18
themes/wporg-5ftf-2024/src/my-pledge-list/style.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
.my-pledges__list > * + * {
|
||||
margin-top: var(--wp--preset--spacing--60);
|
||||
}
|
||||
|
||||
.my-pledges__list.is-pending-list > .wp-block-wporg-notice {
|
||||
margin-top: var(--wp--preset--spacing--20);
|
||||
}
|
||||
|
||||
.my-pledges__pledge-actions {
|
||||
.wp-block-button {
|
||||
display: inline-block;
|
||||
|
||||
[disabled="disabled"] {
|
||||
--wp--custom--button--color--background: var(--wp--preset--color--blueberry-2);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -51,6 +51,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.form-field__logo-display {
|
||||
box-sizing: content-box;
|
||||
padding: var(--wp--preset--spacing--20);
|
||||
border-color: var(--wp--preset--color--light-grey-1);
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-radius: 2px;
|
||||
background-color: var(--wp--preset--color--light-grey-2);
|
||||
aspect-ratio: 1;
|
||||
width: 275px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.form-field__agree {
|
||||
display: flex;
|
||||
gap: var(--wp--preset--spacing--10);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue