From 62eb69c32686ddf103c3bac33bfb7675ac2f5ae9 Mon Sep 17 00:00:00 2001 From: Rasmy Nguyen Date: Wed, 18 Dec 2024 17:44:43 -0500 Subject: [PATCH] fix: refactor scripts and styles --- includes/corrections/class-corrections.php | 165 +++++++++++---------- src/other-scripts/corrections/index.js | 36 +++++ src/other-scripts/corrections/style.scss | 34 +++++ 3 files changed, 156 insertions(+), 79 deletions(-) create mode 100644 src/other-scripts/corrections/index.js create mode 100644 src/other-scripts/corrections/style.scss diff --git a/includes/corrections/class-corrections.php b/includes/corrections/class-corrections.php index 651eed1ff0..c9a59057e1 100644 --- a/includes/corrections/class-corrections.php +++ b/includes/corrections/class-corrections.php @@ -14,17 +14,17 @@ class Corrections { /** * Post type for corrections. */ - const POST_TYPE = 'np_correction'; + const POST_TYPE = 'newspack_correction'; /** * Meta key for storing corrections. */ - const CORRECTION_META = 'article-corrections'; + const POST_ID_META = 'newspack_correction-post-id'; /** - * Meta key for storing whether corrections are active. + * Meta key for corrections active postmeta. */ - const CORRECTION_ACTIVE_META = 'has_corrections'; + const CORRECTIONS_ACTIVE_META = 'newspack_corrections_active'; /** * Initializes the class. @@ -38,6 +38,7 @@ public static function init() { add_action( 'add_meta_boxes', [ __CLASS__, 'add_corrections_metabox' ] ); add_action( 'save_post', [ __CLASS__, 'save_corrections_metabox' ] ); add_filter( 'the_content', [ __CLASS__, 'output_corrections_on_post' ] ); + add_action( 'admin_enqueue_scripts', [ __CLASS__, 'wp_enqueue_scripts' ] ); } /** @@ -52,6 +53,29 @@ public static function is_enabled() { return defined( 'NEWSPACK_CORRECTIONS_ENABLED' ) && NEWSPACK_CORRECTIONS_ENABLED; } + + /** + * Enqueue scripts and styles. + */ + public static function wp_enqueue_scripts() { + if ( ! is_admin() || ! isset( $_GET['post'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification + return; + } + \wp_enqueue_script( + 'newspack-corrections', + Newspack::plugin_url() . '/dist/other-scripts/corrections.js', + [], + NEWSPACK_PLUGIN_VERSION, + true + ); + \wp_enqueue_style( + 'newspack-corrections', + Newspack::plugin_url() . '/dist/other-scripts/corrections.css', + [], + NEWSPACK_PLUGIN_VERSION + ); + } + /** * Registers the corrections post type. * @@ -63,6 +87,7 @@ public static function register_post_type() { 'editor', 'title', 'revisions', + 'custom-fields', ]; $labels = [ @@ -114,6 +139,48 @@ public static function register_post_type() { \register_post_type( self::POST_TYPE, $args ); } + /** + * Get corrections for post. + * + * @param int $post_id The post ID. + * + * @return array The corrections. + */ + public static function get_corrections( $post_id ) { + return get_posts( + [ + 'posts_per_page' => -1, + 'post_type' => self::POST_TYPE, + 'meta_key' => self::POST_ID_META, // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_key + 'meta_value' => $post_id, // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_value + 'orderby' => 'date', + 'order' => 'DESC', + ] + ); + } + + /** + * Save corrections for post. + * + * @param int $post_id The post ID. + * @param array $corrections The corrections. + */ + public static function save_corrections( $post_id, $corrections ) { + foreach ( $corrections as $correction ) { + $post_id = wp_insert_post( + [ + 'post_title' => 'Correction for ' . get_the_title( $post_id ), + 'post_content' => $correction, + 'post_type' => self::POST_TYPE, + 'post_status' => 'publish', + 'meta_input' => [ + self::POST_ID_META => $post_id, + ], + ] + ); + } + } + /** * Adds the corrections shortcode. */ @@ -132,7 +199,7 @@ public static function handle_corrections_shortcode() { $post_ids = get_posts( [ 'posts_per_page' => -1, - 'meta_key' => self::CORRECTION_ACTIVE_META, // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_key + 'meta_key' => self::CORRECTIONS_ACTIVE_META, // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_key 'meta_value' => 1, // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_value 'fields' => 'ids', 'orderby' => 'date', @@ -142,7 +209,7 @@ public static function handle_corrections_shortcode() { ob_start(); foreach ( $post_ids as $post_id ) : - $corrections = get_post_meta( $post_id, self::CORRECTION_META, true ); + $corrections = self::get_corrections( $post_id ); if ( empty( $corrections ) ) { continue; } @@ -195,53 +262,13 @@ public static function add_corrections_metabox( $post_type ) { * @param \WP_Post $post The post object. */ public static function render_corrections_metabox( $post ) { - $is_active = (bool) get_post_meta( $post->ID, self::CORRECTION_ACTIVE_META, true ); - $existing_corrections = get_post_meta( $post->ID, self::CORRECTION_META, true ); - if ( ! is_array( $existing_corrections ) ) { - $existing_corrections = []; - } + $is_active = (bool) get_post_meta( $post->ID, self::CORRECTIONS_ACTIVE_META, true ); + $existing_corrections = self::get_corrections( $post->ID ); ?> - -
- - /> + + /> Activate Corrections
@@ -257,28 +284,9 @@ public static function render_corrections_metabox( $post ) {
- + - - - [ + 'correction' => [ 'flags' => FILTER_REQUIRE_ARRAY, 'filter' => FILTER_SANITIZE_STRING, ], - 'reveal_correction_date' => [ + 'correction_date' => [ 'flags' => FILTER_REQUIRE_ARRAY, 'filter' => FILTER_SANITIZE_STRING, ], @@ -316,8 +323,8 @@ public static function save_corrections_metabox( $post_id ) { ]; } - update_post_meta( $post_id, self::CORRECTION_ACTIVE_META, $is_active ); - update_post_meta( $post_id, self::CORRECTION_META, $corrections ); + self::save_corrections( $post_id, $corrections ); + update_post_meta( $post_id, self::CORRECTIONS_ACTIVE_META, true ); } /** @@ -332,12 +339,12 @@ public static function output_corrections_on_post( $content ) { return $content; } - $corrections_active = get_post_meta( get_the_ID(), self::CORRECTION_ACTIVE_META, true ); + $corrections_active = get_post_meta( get_the_ID(), self::CORRECTIONS_ACTIVE_META, true ); if ( ! $corrections_active ) { return $content; } - $corrections = get_post_meta( get_the_ID(), self::CORRECTION_META ) ?? []; + $corrections = self::get_corrections( get_the_ID() ); $has_valid_correction = false; foreach ( $corrections as $correction ) { if ( ! empty( trim( $correction['correction'] ) ) ) { diff --git a/src/other-scripts/corrections/index.js b/src/other-scripts/corrections/index.js new file mode 100644 index 0000000000..dd4ac9959d --- /dev/null +++ b/src/other-scripts/corrections/index.js @@ -0,0 +1,36 @@ +/** + * External dependencies + */ +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { domReady } from '../../utils'; +import './style.scss'; + +domReady( () => { + const container = document.querySelector( '.corrections-metabox-container' ); + if ( ! container ) { + return; + } + + // Click handler for Add Correction button. + container.querySelector( 'button.add-correction' ).addEventListener( 'click', () => { + const existingCorrections = container.querySelector( '.existing-corrections' ); + const newCorrection = document.createElement( 'div' ); + newCorrection.classList.add( 'reveal-correction' ); + newCorrection.innerHTML = ` +

${ __( 'Article Correction', 'newspack-plugin' ) }

+ +
+

${ __( 'Date:', 'newspack-plugin' ) }

+ X + `; + existingCorrections.appendChild( newCorrection ); + newCorrection.querySelector( 'span.delete-correction' ).addEventListener( 'click', () => { + newCorrection.remove(); + } ); + } ); +} ); + diff --git a/src/other-scripts/corrections/style.scss b/src/other-scripts/corrections/style.scss new file mode 100644 index 0000000000..3446873b87 --- /dev/null +++ b/src/other-scripts/corrections/style.scss @@ -0,0 +1,34 @@ +.activate-corrections { + padding-top: 1em; + padding-bottom: 1em; + border-bottom: 2px solid silver; + margin-bottom: 1em; +} + +.reveal-correction { + position: relative; + border-bottom: 1px solid silver; + padding-top: 1em; + padding-bottom: 1em; +} + +.delete-correction { + position: absolute; + top: 2em; + right: 2em; + font-weight: bold; + color: silver; + border: 1px solid silver; + padding-left: 0.25em; + padding-right: 0.25em; + cursor: pointer; +} + +.delete-correction:hover { + color: red; +} + +.add-correction { + margin-top: 2em; + cursor: pointer; +}