Skip to content

Commit

Permalink
Add pattern report modal
Browse files Browse the repository at this point in the history
  • Loading branch information
ryelle committed Mar 5, 2024
1 parent fa2f05f commit f410135
Show file tree
Hide file tree
Showing 10 changed files with 386 additions and 6 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@

use function WordPressdotorg\Pattern_Directory\Favorite\{get_favorites, get_favorite_count};
use const WordPressdotorg\Pattern_Directory\Pattern_Post_Type\POST_TYPE;
use const WordPressdotorg\Pattern_Directory\Pattern_Flag_Post_Type\POST_TYPE as FLAG_POST_TYPE;
use const WordPressdotorg\Pattern_Directory\Pattern_Flag_Post_Type\PENDING_STATUS;

// Block files
require_once( __DIR__ . '/src/blocks/copy-button/index.php' );
Expand All @@ -12,6 +14,7 @@
require_once( __DIR__ . '/src/blocks/pattern-preview/index.php' );
require_once( __DIR__ . '/src/blocks/pattern-thumbnail/index.php' );
require_once( __DIR__ . '/src/blocks/post-status/index.php' );
require_once( __DIR__ . '/src/blocks/report-pattern/index.php' );
require_once( __DIR__ . '/src/blocks/status-notice/index.php' );

require_once( __DIR__ . '/inc/block-config.php' );
Expand Down Expand Up @@ -64,8 +67,8 @@ function do_pattern_actions() {
return;
}

$action = isset( $_GET['action'] ) ? $_GET['action'] : false;
$nonce = isset( $_GET['_wpnonce'] ) ? $_GET['_wpnonce'] : false;
$action = isset( $_REQUEST['action'] ) ? $_REQUEST['action'] : false;
$nonce = isset( $_REQUEST['_wpnonce'] ) ? $_REQUEST['_wpnonce'] : false;
$post_id = get_the_ID();

if ( 'draft' === $action ) {
Expand All @@ -91,6 +94,35 @@ function do_pattern_actions() {
wp_safe_redirect( $url );
}
}
} else if ( 'report' === $action ) {
if ( wp_verify_nonce( $nonce, 'report-' . $post_id ) && current_user_can( 'read' ) ) {
$success = wp_insert_post(
array(
'post_type' => FLAG_POST_TYPE,
'post_parent' => $post_id,
'post_excerpt' => sanitize_text_field( $_POST['report-details'] ),
'post_status' => PENDING_STATUS,
'tax_input' => array(
'wporg-pattern-flag-reason' => intval( $_POST['report-reason'] ),
),
)
);
if ( $success ) {
$args = array(
'success' => 'reported'
);
} else {
$args = array(
'error' => 'report-failed'
);
}
} else {
$args = array(
'error' => 'logged-out'
);
}

wp_safe_redirect( add_query_arg( $args, get_the_permalink() ) );
}
}

Expand Down Expand Up @@ -360,3 +392,21 @@ function get_patterns_count() {
}
return $count;
}

/**
* Checks whether the user has a pending flag for a specific pattern.
*
* @return bool
*/
function user_has_flagged_pattern() {
$args = array(
'author' => get_current_user_id(),
'post_parent' => get_the_ID(),
'post_type' => FLAG_POST_TYPE,
'post_status' => PENDING_STATUS,
);

$items = new \WP_Query( $args );

return $items->have_posts();
}
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@
"author": "WordPress.org",
"license": "GPL-2.0-or-later",
"private": true,
"dependencies": {},
"dependencies": {
"a11y-dialog": "^8.0.4"
},
"devDependencies": {
"@wordpress/scripts": "27.2.0"
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,35 @@
* Inserter: no
*/

$error = isset( $_GET['error'] ) ? $_GET['error'] : false;
$success = isset( $_GET['success'] ) ? $_GET['success'] : false;
$notice = '';
$notice_type = 'warning';
if ( ! $success ) {
if ( 'report-failed' === $error ) {
$notice = __( 'Your pattern report could not be saved. Please try again.', 'wporg-patterns' );
} else if ( 'logged-out' === $error ) {
$notice = __( 'You must be logged in to report a pattern.', 'wporg-patterns' );
}
} else if ( 'reported' === $success ) {
$notice_type = 'info';
$notice = __( 'Your report has been submitted.', 'wporg-patterns' );
}

?>
<!-- wp:group {"layout":{"type":"default"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}},"align":"wide"} -->
<div class="wp-block-group alignwide" style="padding-top:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--50);">
<?php if ( $notice ) : ?>
<!-- wp:wporg/notice {"type":"<?php echo $notice_type; ?>","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}}} -->
<div class="wp-block-wporg-notice is-<?php echo $notice_type; ?>-notice" style="margin-bottom:var(--wp--preset--spacing--30);">
<div class="wp-block-wporg-notice__icon"></div>
<div class="wp-block-wporg-notice__content">
<p><?php echo esc_html( $notice ) ?></p>
</div>
</div>
<!-- /wp:wporg/notice -->
<?php endif; ?>

<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"},"align":"wide"} -->
<div class="wp-block-group alignwide">
<!-- wp:post-title {"style":{"typography":{"fontWeight":"700"}},"fontSize":"heading-3","fontFamily":"inter"} /-->
Expand All @@ -34,9 +60,7 @@

<!-- wp:group {"align":"wide"} -->
<div class="wp-block-group alignwide">
<!-- wp:paragraph {"fontSize":"small"} -->
<p class="has-small-font-size">Report this pattern</p>
<!-- /wp:paragraph -->
<!-- wp:wporg/report-pattern /-->
</div>
<!-- /wp:group -->
</div>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 2,
"name": "wporg/report-pattern",
"version": "0.1.0",
"title": "Report Pattern",
"category": "design",
"icon": "",
"description": "A button to trigger the report flow, including report modal.",
"textdomain": "wporg",
"attributes": {},
"supports": {
"html": false
},
"usesContext": [ "postId", "postType" ],
"editorScript": "file:./index.js",
"style": "file:./style-index.css",
"viewScript": "file:./view.js",
"render": "file:./render.php"
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/**
* WordPress dependencies
*/
import { registerBlockType } from '@wordpress/blocks';

/**
* Internal dependencies
*/
import Edit from '../../utils/dynamic-edit';
import metadata from './block.json';
import './style.scss';

registerBlockType( metadata.name, {
edit: Edit,
save: () => null,
} );
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<?php
/**
* Block Name: Report Pattern
* Description: A button to trigger the report flow, including report modal.
*
* @package wporg
*/

namespace WordPressdotorg\Theme\Pattern_Directory_2024\Report_Pattern_Block;

add_action( 'init', __NAMESPACE__ . '\init' );

function init() {
register_block_type( __DIR__ . '/../../../build/blocks/report-pattern' );
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
<?php

use function WordPressdotorg\Theme\Pattern_Directory_2024\user_has_flagged_pattern;
use const WordPressdotorg\Pattern_Directory\Pattern_Flag_Post_Type\TAX_TYPE as FLAG_REASON;

// Move to footer so that HTML exists on page already.
if ( ! empty( $block->block_type->view_script ) ) {
wp_enqueue_script( $block->block_type->view_script );
// Move to footer.
wp_script_add_data( $block->block_type->view_script, 'group', 1 );
}

$post_id = $block->context['postId'];
if ( ! $post_id ) {
return;
}

if ( ! current_user_can( 'read' ) ) {
return;
}

// If this pattern has been reported by this user, it can't be reported again.
if ( user_has_flagged_pattern() ) {
printf(
'<div %s>%s</div>',
get_block_wrapper_attributes(),
__( 'You&#8217;ve reported this pattern.', 'wporg-patterns' )
);
return;
}

$reasons = get_terms( [ 'taxonomy' => FLAG_REASON, 'hide_empty' => false, 'orderby' => 'slug' ] );

?>
<div <?php echo get_block_wrapper_attributes(); // phpcs:ignore ?>>
<div class="wp-block-button is-small is-style-text">
<button
class="wp-block-button__link wp-element-button"
disabled="disabled"
data-a11y-dialog-show="report-dialog"
>
<?php echo esc_html_e( 'Report this pattern', 'wporg-patterns' ); ?>
</button>
</div>
<div
id="report-dialog"
data-a11y-dialog="report-dialog"
aria-labelledby="report-pattern-dialog-title"
aria-hidden="true"
class="wporg-report-pattern__dialog-container"
>
<div data-a11y-dialog-hide class="wporg-report-pattern__dialog-overlay"></div>
<div role="document" class="wporg-report-pattern__dialog-content">
<div class="wporg-report-pattern__dialog-header">
<h1 id="report-pattern-dialog-title">
<?php echo esc_html_e( 'Report this pattern', 'wporg-patterns' ); ?>
</h1>
<button type="button" data-a11y-dialog-hide aria-label="<?php echo esc_attr_e( 'Close dialog', 'wporg-patterns' ); ?>"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>
</div>
<form method="POST" action="<?php echo esc_url( get_the_permalink( $post_id ) ); ?>">
<div class="wporg-report-pattern__dialog-body">
<fieldset class="wporg-report-pattern__dialog-field">
<legend><?php echo esc_html_e( 'Please choose a reason:', 'wporg-patterns' ); ?></legend>
<?php foreach ( $reasons as $reason ) : ?>
<div>
<input
type="radio"
name="report-reason"
id="report-reason-<?php echo esc_attr( $reason->term_id ); ?>"
value="<?php echo esc_attr( $reason->term_id ); ?>"
required
/>
<label
for="report-reason-<?php echo esc_attr( $reason->term_id ); ?>"
>
<?php echo esc_attr( $reason->name ); ?>
</label>
<div>
<?php endforeach; ?>
</fieldset>
<div class="wporg-report-pattern__dialog-field">
<label
for="report-details"
><?php echo esc_html_e( 'Please provide details (required)', 'wporg-patterns' ); ?></label>
<textarea
id="report-details"
rows="4"
required
name="report-details"
></textarea>
</div>
<input type="hidden" name="action" value="report" />
<input type="hidden" name="_wpnonce" value="<?php echo esc_attr( wp_create_nonce( 'report-' . $post_id ) ); ?>" />
</div>
<div class="wp-block-buttons wporg-report-pattern__dialog-footer">
<div class="wp-block-button is-small is-style-outline">
<button type="button" data-a11y-dialog-hide class="wp-block-button__link wp-element-button">
<?php echo esc_html_e( 'Cancel', 'wporg-patterns' ); ?>
</button>
</div>
<div class="wp-block-button is-small">
<button type="submit" class="wp-block-button__link wp-element-button">
<?php echo esc_html_e( 'Report', 'wporg-patterns' ); ?>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
Loading

0 comments on commit f410135

Please sign in to comment.