From f7cb9fe9df32290d7ee82c125fcc821f2053073d Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Fri, 31 Aug 2018 17:18:47 -0400 Subject: [PATCH 01/16] Abstract the method by which we get the Pym.js default URL for this plugin. --- inc/shortcode.php | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/inc/shortcode.php b/inc/shortcode.php index 247502b..e4aca66 100644 --- a/inc/shortcode.php +++ b/inc/shortcode.php @@ -58,7 +58,7 @@ function pym_shortcode( $atts = array(), $content = '', $tag = '' ) { ); // What's the pymsrc for this shortcode? - $pymsrc = empty( $atts['pymsrc'] ) ? plugins_url( '/js/pym.v1.min.js', dirname( __FILE__ ) ) : $atts['pymsrc']; + $pymsrc = empty( $atts['pymsrc'] ) ? pym_pymsrc_default_url() : $atts['pymsrc']; // If this is the first Pym element on the page, output the pymsrc script tag // or if the pymsrc is set, output that. @@ -137,3 +137,23 @@ function() use ( $args ) { ); } } + +/** + * The default URL for pymsrc, as defined in plugin settings + * + * @since 1.3.2.1 + * @uses pym_pymsrc_local_url + */ +function pym_pymsrc_default_url() { + return pym_pymsrc_local_url(); +} + +/** + * The plugin-provided pymsrc url + * + * @since 1.3.2.1 + * @return string The URL for /wp-content/plugins/pym-shortcode/js/pym.v1.min.js + */ +function pym_pymsrc_local_url() { + return plugins_url( '/js/pym.v1.min.js', dirname( __FILE__ ) ); +} From 4ae27fbebf624ca1ff3e5afb34343c1a8e02d1bc Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Fri, 31 Aug 2018 18:39:21 -0400 Subject: [PATCH 02/16] Add information page, visible to all who can edit posts, under the Tools menu. --- inc/info-page.php | 54 +++++++++++++++++++++++++++++++++++++++++++++++ pym-shortcode.php | 1 + readme.txt | 1 + 3 files changed, 56 insertions(+) create mode 100644 inc/info-page.php diff --git a/inc/info-page.php b/inc/info-page.php new file mode 100644 index 0000000..5b945b3 --- /dev/null +++ b/inc/info-page.php @@ -0,0 +1,54 @@ +%1$s', + esc_html( get_admin_page_title() ) + ); + + printf( + '

%1$s

', + wp_kses_post( __( 'For information on how to use the block and shortcode provided by the Pym plugin, read the plugin\'s documentation on GitHub.', 'pym-shortcode' ) ) + ); + + printf( + '', + esc_html__( 'The URL for the copy of Pym.js hosted on this site is:', 'pym-shortcode' ) + ); + + // copying how qz.com does their share links + printf( + '', + esc_attr( pym_pymsrc_local_url() ) + ); +} diff --git a/pym-shortcode.php b/pym-shortcode.php index d89ae7f..bc7232c 100644 --- a/pym-shortcode.php +++ b/pym-shortcode.php @@ -19,6 +19,7 @@ $includes = array( '/inc/block.php', '/inc/shortcode.php', + '/inc/info-page.php', '/inc/class-pymsrc-output.php', ); foreach ( $includes as $include ) { diff --git a/readme.txt b/readme.txt index d766415..436c2b6 100644 --- a/readme.txt +++ b/readme.txt @@ -3,6 +3,7 @@ Contributors: inn_nerds Donate link: https://inn.org/donate Tags: shortcode, iframe, javascript, embeds, responsive, pym, NPR Requires at least: 3.0.1 +Requires PHP: 5.3 Tested up to: 4.9.8 Stable tag: 1.3.2 License: GPLv2 or later From bd2819cd954cb5c7678e2ef01ae13ec18cd35ae2 Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Sat, 1 Sep 2018 12:21:26 -0400 Subject: [PATCH 03/16] Direct people to the Pym Plugin Info page. --- docs/readme.md | 2 ++ inc/info-page.php | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/readme.md b/docs/readme.md index b30a09e..4f3e648 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -152,6 +152,8 @@ Assuming that you have installed this plugin via the wordpress.org plugin reposi You can check the validity of that assumption by putting a shortcode or block in a post, then viewing the post from the frontend. In the source code of the page, you should see a script tag loading `pym.v1.min.js`. +The URL can also be found on the "Pym Plugin Info" page, found under the "Tools" menu in your site's admin dashboard. + Or, you can specify the URL from which to load `Pym.js`. ### Why would I want to change the `Pym.js` source URL? diff --git a/inc/info-page.php b/inc/info-page.php index 5b945b3..ab3d24b 100644 --- a/inc/info-page.php +++ b/inc/info-page.php @@ -15,8 +15,8 @@ function register_options_page() { add_submenu_page( 'tools.php', - __( 'Pym plugin info', 'pym-shortcode' ), // title of page - __( 'Pym plugin info', 'pym-shortcode' ), // menu text + __( 'Pym Plugin Info', 'pym-shortcode' ), // title of page + __( 'Pym Plugin Info', 'pym-shortcode' ), // menu text 'edit_posts', // capability required 'pym-shortcode-info', // menu slug __NAMESPACE__ . '\options_page_callback' // callback for options page display From 2c2163cebf03cca47fd77396e52e34b0e6705083 Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Tue, 4 Sep 2018 21:03:39 -0400 Subject: [PATCH 04/16] Rename plugin info page in accordance with https://github.com/INN/pym-shortcode/pull/42 --- inc/info-page.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/inc/info-page.php b/inc/info-page.php index ab3d24b..709be1b 100644 --- a/inc/info-page.php +++ b/inc/info-page.php @@ -15,8 +15,8 @@ function register_options_page() { add_submenu_page( 'tools.php', - __( 'Pym Plugin Info', 'pym-shortcode' ), // title of page - __( 'Pym Plugin Info', 'pym-shortcode' ), // menu text + __( 'Pym.js Embeds Plugin Information', 'pym-shortcode' ), // title of page + __( 'Pym.js Embeds Info', 'pym-shortcode' ), // menu text 'edit_posts', // capability required 'pym-shortcode-info', // menu slug __NAMESPACE__ . '\options_page_callback' // callback for options page display @@ -38,7 +38,7 @@ function options_page_callback() { printf( '

%1$s

', - wp_kses_post( __( 'For information on how to use the block and shortcode provided by the Pym plugin, read the plugin\'s documentation on GitHub.', 'pym-shortcode' ) ) + wp_kses_post( __( 'For information on how to use the block and shortcode provided by the Pym.js Embeds plugin, read the plugin\'s documentation on GitHub.', 'pym-shortcode' ) ) ); printf( From 81d0cfc2a97784cc3dbb9da348b6c823db24e88e Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Wed, 5 Sep 2018 22:03:56 -0400 Subject: [PATCH 05/16] Add settings page, settings, validator, minor PHP namespacing changes - INN\PymShortcode is now INN\PymEmbeds - Adds settings page - addresses https://github.com/INN/pym-shortcode/issues/32 - helper function INN\PymEmbeds\Settings\option_group() to get the option group name - helper function INN\PymEmbeds\Settings\option_key() to get the option_key for wp_options - helper function INN\PymEmbeds\Settings\settings_section() to get the settings section ID for the settings page - helper function INN\PymEmbeds\Settings\settings_page() to get the settings page ID - option default_pymsrc to change away from that provided by pym_pymsrc_local_url(), which is run through wp_http_validate_url to address https://github.com/INN/pym-shortcode/issues/8#issuecomment-417103171 - option override_pymsrc to force use of default_pymsrc in embed output, addressing https://github.com/INN/pym-shortcode/issues/8 --- inc/info-page.php | 4 +- inc/settings-page.php | 234 ++++++++++++++++++++++++++++++++++++++++++ pym-shortcode.php | 1 + 3 files changed, 237 insertions(+), 2 deletions(-) create mode 100644 inc/settings-page.php diff --git a/inc/info-page.php b/inc/info-page.php index 709be1b..4ec534e 100644 --- a/inc/info-page.php +++ b/inc/info-page.php @@ -5,7 +5,7 @@ * This is available to everyone who can edit posts, because they'll need this info if they're creating new child pages for embed using the shortcode or plugin. */ -namespace INN\PymShortcode\Info; +namespace INN\PymEmbeds\Info; /** * Create the option page @@ -18,7 +18,7 @@ function register_options_page() { __( 'Pym.js Embeds Plugin Information', 'pym-shortcode' ), // title of page __( 'Pym.js Embeds Info', 'pym-shortcode' ), // menu text 'edit_posts', // capability required - 'pym-shortcode-info', // menu slug + 'pym-embeds-info', // menu slug __NAMESPACE__ . '\options_page_callback' // callback for options page display ); } diff --git a/inc/settings-page.php b/inc/settings-page.php new file mode 100644 index 0000000..9f669d5 --- /dev/null +++ b/inc/settings-page.php @@ -0,0 +1,234 @@ +%1$s', + esc_html( get_admin_page_title() ) + ); + + ?> +
+ +
+ __NAMESPACE__ . '\sanitize_callback', + ) + ); + + add_settings_section( + settings_section(), + __( 'Settings', 'pym-shortcode' ), + __NAMESPACE__ . '\pym_settings_section_callback', + settings_page() + ); + + add_settings_field( + 'default_pymsrc', + __( 'Default pymsrc', 'pym-shortcode' ), + __NAMESPACE__ . '\field_default_pymsrc', + settings_page(), // menu slug of this page. + settings_section(), // settings section slug. + array( + 'label_for' => 'default_pymsrc', + ) + ); + + add_settings_field( + 'override_pymsrc', + __( 'Override pymsrc', 'pym-shortcode' ), + __NAMESPACE__ . '\field_override_pymsrc', + settings_page(), // menu slug of this page. + settings_section(), // settings section slug. + array( + 'label_for' => 'override_pymsrc', + ) + ); +} +add_action( 'admin_init', __NAMESPACE__ . '\admin_init' ); + +/** + * Settings section callback + * + * Does nothing. + * + * @param Array $args Arguments passed to the section callback. + */ +function pym_settings_section_callback( $args ) { +} + +/** + * Sanitization callback for the option_value. + * + * If the default_pymsrc isn't a valid URL or is the pym_pymsrc_local_url, blank it. + * If the override_pymsrc isn't 'on' indicating it's checked, blank it. + * + * @since 1.3.2.1 + * @param Mixed $value The setting. + * @return Array The sanitized setting + * @uses pym_pymsrc_local_url + */ +function sanitize_callback( $value ) { + error_log(var_export( $value, true)); + $new_value = array(); + + $proposed_pymsrc = wp_http_validate_url( $value['default_pymsrc'] ); + if ( pym_pymsrc_local_url() === $proposed_pymsrc ) { + $proposed_pymsrc = null; + } + $new_value['default_pymsrc'] = ! empty( $proposed_pymsrc ) ? $proposed_pymsrc : null; + + $new_value['override_pymsrc'] = ( isset( $value['override_pymsrc'] ) && 'on' === $value['override_pymsrc'] ) ? 'on': null; + + return $new_value; +} + +/** + * The field for the default Pymsrc + * + * @param Array $args The arguments passed to the settings field callback. + */ +function field_default_pymsrc( $args ) { + $settings = get_option( option_key() ); + $id = isset( $args['label_for'] ) ? $args['label_for'] : 'default_pymsrc'; + $id = option_key() . '[' . $id . ']'; + + $url = isset( $settings['default_pymsrc'] ) ? $settings['default_pymsrc'] : ''; + printf( + '', + esc_attr( $id ), + esc_attr( $url ) + ); + + printf( + '', + esc_attr( $id ), + wp_kses_post( __( 'This URL is where Pym.js will be loaded from for all embeds that do not set a pymsrc in the shortcode attributes or block settings. NPR and the Pym.js Embed plugin maintainers recommend that you use the NPR-provided CDN for this purpose: https://pym.nprapps.org/pym.v1.min.js', 'pym-shortcode' ) ) + ); + printf( + '', + esc_attr( $id ), + sprintf( + // translators: %1$s is a bare URL. + wp_kses_post( __( 'If no pymsrc URL is set here, then the plugin-provided copy of Pym.js will be used as the default: %1$s', 'pym-shortcode' ) ), + esc_html( pym_pymsrc_local_url() ) + ) + ); +} + +/** + * The checkbox to force all embeds to use the default + * + * @param Array $args The arguments passed to the settings field callback. + */ +function field_override_pymsrc( $args ) { + $settings = get_option( option_key() ); + $id = isset( $args['label_for'] ) ? $args['label_for'] : 'override_pymsrc'; + $id = option_key() . '[' . $id . ']'; + + $value = isset( $settings['override_pymsrc'] ) ? $settings['override_pymsrc'] : ''; + printf( + '', + esc_attr( $id ), + checked( $value, 'on', false ) + ); + + printf( + '', + esc_attr( $id ), + esc_html__( 'Checking this box means that every Pym.js embed will use the default pymsrc URL, ignoring the pymsrc URL set in the embed\'s shortcode attributes or block settings.', 'pym-shortcode' ) + ); +} diff --git a/pym-shortcode.php b/pym-shortcode.php index bc7232c..67702a5 100644 --- a/pym-shortcode.php +++ b/pym-shortcode.php @@ -20,6 +20,7 @@ '/inc/block.php', '/inc/shortcode.php', '/inc/info-page.php', + '/inc/settings-page.php', '/inc/class-pymsrc-output.php', ); foreach ( $includes as $include ) { From bbe8ab231112b2c052b1be848e7f69c9179fc91f Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Wed, 5 Sep 2018 23:07:30 -0400 Subject: [PATCH 06/16] Make the setting section name something sensible, I guess. --- inc/settings-page.php | 17 ++++++++++------- inc/shortcode.php | 1 + 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/inc/settings-page.php b/inc/settings-page.php index 9f669d5..5c8a5e0 100644 --- a/inc/settings-page.php +++ b/inc/settings-page.php @@ -87,8 +87,7 @@ function options_page_callback() { ?>
@@ -110,8 +109,8 @@ function admin_init() { ); add_settings_section( - settings_section(), - __( 'Settings', 'pym-shortcode' ), + 'pymsrc_settings', + __( 'Pym.js Source Settings', 'pym-shortcode' ), __NAMESPACE__ . '\pym_settings_section_callback', settings_page() ); @@ -121,7 +120,7 @@ function admin_init() { __( 'Default pymsrc', 'pym-shortcode' ), __NAMESPACE__ . '\field_default_pymsrc', settings_page(), // menu slug of this page. - settings_section(), // settings section slug. + 'pymsrc_settings', array( 'label_for' => 'default_pymsrc', ) @@ -132,7 +131,7 @@ function admin_init() { __( 'Override pymsrc', 'pym-shortcode' ), __NAMESPACE__ . '\field_override_pymsrc', settings_page(), // menu slug of this page. - settings_section(), // settings section slug. + 'pymsrc_settings', array( 'label_for' => 'override_pymsrc', ) @@ -148,6 +147,10 @@ function admin_init() { * @param Array $args Arguments passed to the section callback. */ function pym_settings_section_callback( $args ) { + printf( + '

%1$s

', + __( 'The Pym.js JavaScript library can be provided from many sources. By default, shortcodes and blocks will use a copy of Pym.js hosted on your website to power embeds. For more information about changing the Pym.js source URL, referred to as \'pymsrc\', please read this plugin\'s documentation.', 'pym-shortcode' ) + ); } /** @@ -229,6 +232,6 @@ function field_override_pymsrc( $args ) { printf( '', esc_attr( $id ), - esc_html__( 'Checking this box means that every Pym.js embed will use the default pymsrc URL, ignoring the pymsrc URL set in the embed\'s shortcode attributes or block settings.', 'pym-shortcode' ) + esc_html__( 'Checking this box means that every Pym.js embed will use the default pymsrc URL, ignoring the pymsrc URL set in the embed\'s shortcode attributes or block settings. We recommend that you check this box after setting the default pymsrc URL to the CDN-provided copy of the library.', 'pym-shortcode' ) ); } diff --git a/inc/shortcode.php b/inc/shortcode.php index e4aca66..27215ad 100644 --- a/inc/shortcode.php +++ b/inc/shortcode.php @@ -145,6 +145,7 @@ function() use ( $args ) { * @uses pym_pymsrc_local_url */ function pym_pymsrc_default_url() { + $settings = get_option( option_key() ); return pym_pymsrc_local_url(); } From 9b7a31d5622b0e649dac38623730d8a196738f9b Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Wed, 5 Sep 2018 23:10:17 -0400 Subject: [PATCH 07/16] save the plugin version in the settings --- inc/settings-page.php | 3 +++ pym-shortcode.php | 11 ++++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/inc/settings-page.php b/inc/settings-page.php index 5c8a5e0..f5267c8 100644 --- a/inc/settings-page.php +++ b/inc/settings-page.php @@ -163,6 +163,7 @@ function pym_settings_section_callback( $args ) { * @param Mixed $value The setting. * @return Array The sanitized setting * @uses pym_pymsrc_local_url + * @uses pym_plugin_version */ function sanitize_callback( $value ) { error_log(var_export( $value, true)); @@ -176,6 +177,8 @@ function sanitize_callback( $value ) { $new_value['override_pymsrc'] = ( isset( $value['override_pymsrc'] ) && 'on' === $value['override_pymsrc'] ) ? 'on': null; + $new_value['version'] = pym_plugin_version(); + return $new_value; } diff --git a/pym-shortcode.php b/pym-shortcode.php index 67702a5..574d5c4 100644 --- a/pym-shortcode.php +++ b/pym-shortcode.php @@ -3,7 +3,7 @@ Plugin Name: Pym Shortcode Plugin URI: https://github.com/INN/pym-shortcode Description: Adds a [pym src=""] shortcode to simplify use of NPR's Pym.js -Version: 1.3.2 +Version: 1.3.2.1 Author: The INN Nerds Author URI: http://nerds.inn.org/ License: GPL Version 2 or later @@ -16,6 +16,15 @@ die; } +/** + * What version is this plugin? + * + * @return string The plugin version number + */ +function pym_plugin_version() { + return '1.3.2.1'; +} + $includes = array( '/inc/block.php', '/inc/shortcode.php', From 34a63bb65f5d70738edc868299156d5736775b5e Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Thu, 6 Sep 2018 00:55:16 -0400 Subject: [PATCH 08/16] Shortcode now uses settings-defined default pymsrc and respects the override setting, for #32 --- inc/shortcode.php | 38 +++++++++++++++++++++++++++++++++++--- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/inc/shortcode.php b/inc/shortcode.php index 27215ad..cf73074 100644 --- a/inc/shortcode.php +++ b/inc/shortcode.php @@ -5,6 +5,8 @@ * @package pym-shortcode */ + use INN\PymEmbeds\Settings\option_key; + /** * A shortcode to simplify the process of embedding articles using pym.js * @@ -14,6 +16,8 @@ * @param String $content the enclosed content; should be empty for this shortcode. * @param String $tag the shortcode tag. * @uses pym_shortcode_script_footer_enqueue + * @uses pym_pymsrc_default_url + * @uses \INN\PymEmbeds\Settings\option_key() * @return String the embed HTML */ function pym_shortcode( $atts = array(), $content = '', $tag = '' ) { @@ -31,7 +35,7 @@ function pym_shortcode( $atts = array(), $content = '', $tag = '' ) { $actual_id = empty( $id ) ? 'pym_' . $pym_id : $id; /** - * Filter pym_shortcode_default_class allows setting the default class on embeds + * Filter pym_shortcode_default_class allows setting the default class on embeds. * * @param String $default * @return String the default class name @@ -58,7 +62,15 @@ function pym_shortcode( $atts = array(), $content = '', $tag = '' ) { ); // What's the pymsrc for this shortcode? - $pymsrc = empty( $atts['pymsrc'] ) ? pym_pymsrc_default_url() : $atts['pymsrc']; + if ( + pym_maybe_override_pymsrc() // if the box to override has been checked... + || empty( $atts['pymsrc'] ) // if there is no specified pymsrc... + || ! wp_http_validate_url( $atts['pymsrc'] ) // if the specified pymsrc is not a safe URL... + ) { + $pymsrc = pym_pymsrc_default_url(); // use the default URL. + } else { + $pymsrc = $atts['pymsrc']; + } // If this is the first Pym element on the page, output the pymsrc script tag // or if the pymsrc is set, output that. @@ -138,6 +150,21 @@ function() use ( $args ) { } } +/** + * Whether to force use of the default pymsrc URL. + * + * @since 1.3.2.1 + * @uses \INN\PymEmbeds\Settings\option_key() + * @return bool Whether to force use of the default URL. + */ +function pym_maybe_override_pymsrc() { + $settings = get_option( \INN\PymEmbeds\Settings\option_key() ); + if ( isset( $settings['override_pymsrc'] ) && 'on' === $settings['override_pymsrc'] ) { + return true; + } + return false; +} + /** * The default URL for pymsrc, as defined in plugin settings * @@ -145,7 +172,12 @@ function() use ( $args ) { * @uses pym_pymsrc_local_url */ function pym_pymsrc_default_url() { - $settings = get_option( option_key() ); + $settings = get_option( \INN\PymEmbeds\Settings\option_key() ); + if ( isset ( $settings['default_pymsrc'] ) ) { + if ( wp_http_validate_url( $settings['default_pymsrc'] ) ) { + return $settings['default_pymsrc']; + } + } return pym_pymsrc_local_url(); } From f537cd3aab70418f06ef6a07330ead6a19684336 Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Thu, 6 Sep 2018 07:21:57 -0400 Subject: [PATCH 09/16] Unbreak settings page submission --- inc/settings-page.php | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/inc/settings-page.php b/inc/settings-page.php index f5267c8..27f53a7 100644 --- a/inc/settings-page.php +++ b/inc/settings-page.php @@ -87,7 +87,8 @@ function options_page_callback() { ?>
@@ -109,7 +110,7 @@ function admin_init() { ); add_settings_section( - 'pymsrc_settings', + settings_section(), __( 'Pym.js Source Settings', 'pym-shortcode' ), __NAMESPACE__ . '\pym_settings_section_callback', settings_page() @@ -120,7 +121,7 @@ function admin_init() { __( 'Default pymsrc', 'pym-shortcode' ), __NAMESPACE__ . '\field_default_pymsrc', settings_page(), // menu slug of this page. - 'pymsrc_settings', + settings_section(), // settings section slug. array( 'label_for' => 'default_pymsrc', ) @@ -131,7 +132,7 @@ function admin_init() { __( 'Override pymsrc', 'pym-shortcode' ), __NAMESPACE__ . '\field_override_pymsrc', settings_page(), // menu slug of this page. - 'pymsrc_settings', + settings_section(), // settings section slug. array( 'label_for' => 'override_pymsrc', ) From 66eaea52965ebcbc6f36407367da0fea00f8c1fb Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Thu, 6 Sep 2018 07:22:24 -0400 Subject: [PATCH 10/16] Move Pym.js Embeds Settings menu item to Settings, from Tools --- inc/settings-page.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/inc/settings-page.php b/inc/settings-page.php index 27f53a7..ace28e6 100644 --- a/inc/settings-page.php +++ b/inc/settings-page.php @@ -54,7 +54,7 @@ function settings_page() { */ function register_options_page() { add_submenu_page( - 'tools.php', + 'options-general.php', __( 'Pym.js Embeds Plugin Settings', 'pym-shortcode' ), // title of page __( 'Pym.js Embeds Settings', 'pym-shortcode' ), // menu text 'manage_options', // capability required From 11c45f19ab5aca93715ae5a04bd5214482e6ee76 Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Thu, 6 Sep 2018 10:02:50 -0400 Subject: [PATCH 11/16] Docs: how to use CDN version, what effect of override checkbox is, how to test your site for the upgrade checkbox. --- docs/readme.md | 41 ++++++++++++++++++++++------ docs/upgrade-testing.md | 59 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 92 insertions(+), 8 deletions(-) create mode 100644 docs/upgrade-testing.md diff --git a/docs/readme.md b/docs/readme.md index 8739db0..eb31389 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -7,13 +7,14 @@ Contents: 1. [Plugin Installation](#plugin-installation) 2. [The Pym Shortcode](#the-pym-shortcode) 3. [The Pym Block](#the-pym-block) -4. [Options](#options) - 1. [src: the only required argument](#src-the-child-url) - 2. pymsrc - 3. pymoptions - 4. class - 5. align - 6. id +4. [Embed Options](#embed-options) + 1. [src: the only required argument](#src-the-child-url-required-argument) + 2. [pymsrc](#pymsrc-the-url-for-pymjs) + 3. [pymoptions](#pymoptions-settings-for-pym) + 4. [class](#class-to-add-html-classes-to-the-pym-parent-element) + 5. [align](#align-for-wordpress-alignment-support) + 6. [id](#id-to-set-the-pym-parent-elements-id) +5. [Plugin Options](#plugin-options) 5. [Frequently Asked Questions](#frequently-asked-questions) 1. [Why would I want to use Pym in the first place?](#why-would-i-want-to-use-pym-in-the-first-place) 2. [Why is a WordPress plugin needed to use Pym.js?](#why-is-a-wordpress-plugin-needed-to-use-pymjs) @@ -53,7 +54,7 @@ Example in a post: For the block, all options available via shortcode arguments are available through the block's advanced options panel. -## Options +## Embed Options ``` [pym src="" pymsrc="" pymoptions="" class="" align="" id="" ] @@ -125,6 +126,30 @@ For example, the shortcode `[pym src="https://blog.apps.npr.org/pym.js/examples/
``` +## Plugin Options + +The Pym.js Embed Settings page can be found under WordPress' "Settings" menu. + +The settings page provides two options: the default pymsrc and the option to override all pymsrc arguments. + +We **strongly recommend** that you set the default pymsrc to `https://pym.nprapps.org/pym.v1.min.js` and check the box to enable the pymsrc override. + +### Default pymsrc + +As explained in the documentation for [the pymsrc embed option](#pymsrc-the-url-for-pymjs), the default copy of `Pym.js` used by this plugin is the copy bundled with this plugin. NPR recommends, and we recommend, that you use the copy of `Pym.js` provided by NPR's CDN. However, this plugin cannot force you to do so; the WordPress.org plugin guidelines generally [prohibit plugin use of third-party scripts without user consent](https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/#7-plugins-may-not-track-users-without-their-consent), and frown upon plugins that use CDNs by default. Therefore, we give you the option to use NPR's CDN, or your nwesroom's CDN, and ship the plugin in a state that defaults to no CDN. + +Shortcodes and blocks have the the option to specify an alternate source for `Pym.js` at a per-embed level, which allows you to opt into using the CDN version of the script on a per-embed level. This is less than optimal; every time you create a `Pym.js` embed on your site, you will need to check that the pymsrc option is set. + +To save time and effort, set the "Default pymsrc" option in the plugin settings to NPR's CDN copy of `Pym.js`: `https://pym.nprapps.org/pym.v1.min.js` + +### Override pymsrc + +Anyone who can edit a post can set the pymsrc URL on a shortcode or a block, and the pymsrc URL can be *any* resource. Browsers will try to load it as JavaScript, even if the set URL is for an image, a 404 page, or a non-`Pym.js` library. This is not good. + +We **strongly recommend** that you check this box, to force all `Pym.js` Embed shortcodes and blocks to use the plugin's default pymsrc. + +This box is not checked by default, because defaulting to overriding the pymsrc URL would potentially break existing shortcodes on sites that used this plugin before release version 1.3.2.1. If you used this plugin to create `[pym]` shortcodes before release 1.3.2.1, and wish to test your embeds before enabling the override, read [this testing advice](./upgrade-testing.md). + ## Frequently Asked Questions ### Why would I want to use Pym in the first place? diff --git a/docs/upgrade-testing.md b/docs/upgrade-testing.md new file mode 100644 index 0000000..0cef22d --- /dev/null +++ b/docs/upgrade-testing.md @@ -0,0 +1,59 @@ +# Testing advice for upgrading the plugin + +We recommend that you perform testing in a copy of your production environment, such as a staging or development server, or a local development environment. You should try to test with as complete a copy as possible, to include themes, plugins, and a copy of the database. + +If your live site uses an HTTPS certificate, your testing environment should use an HTTPS certificate. Talk to your hosting provider or consult your local development environment's docs for information about enabling HTTPS. + +## Finding posts that use the `[pym]` shortcode + +### site search + +Depending on what search engine is enabled on your site, you may be able to find pymsrc posts using the search function: `example.org/?s=pymsrc` + +### wp-cli + +If you have [wp-cli](https://wp-cli.org/) installed in your environment, you can get a list of posts using the `[pym]` shortcode by running a search using [wp post list](https://developer.wordpress.org/cli/commands/post/list/) + +``` +wp post list --s='[pym' +``` +You should see a list of posts and their IDs. + +``` ++----+------------------------------------------+-------------------+---------------------+-------------+ +| ID | post_title | post_name | post_date | post_status | ++----+------------------------------------------+-------------------+---------------------+-------------+ +| 5 | Pym Example: multiple tables and pymsrcs | pym-example-table | 2018-08-22 20:44:23 | publish | ++----+------------------------------------------+-------------------+---------------------+-------------+ +``` + +To find posts containg shortcode or blocks with a custom pymsrc set: + +``` +$ wp post list --s='pymsrc' ++----+------------------------------------------+------------------------+---------------------+-------------+ +| ID | post_title | post_name | post_date | post_status | ++----+------------------------------------------+------------------------+---------------------+-------------+ +| 5 | Pym Example: multiple tables and pymsrcs | pym-example-table | 2018-08-22 20:44:23 | publish | +| 10 | Single pym child block | single-pym-child-block | 2018-08-29 22:52:19 | publish | ++----+------------------------------------------+------------------------+---------------------+-------------+ +``` + +You can change the formatting of the list and the information it contains for each post using the arguments of [wp post list](https://developer.wordpress.org/cli/commands/post/list/). + +As an example, here's how to use `wp post list` on a Mac to open in a browser every single post containing a pymsrc setting: + +``` +wp post list --s='pymsrc' --format=ids | tr "[:space:]" "\n" | xargs -I % open http://pym-shortcode.test/?p=% +``` + +## Testing the pymsrc override + +1. Enable the override option in **Settings > Pym.js Embeds Settings > Override pymsrc** +2. Find all posts using the pymsrc option in a shortcode or block, using one of the methods above. +3. For a representative sample of posts, or for all posts if you can, open each post in a browser. + 1. Does the embed load correctly? + 2. Open the browser console. Are there any notices, warnings, or errors? + 3. + +You may want to take the time to edit your embedded pages so that they all use the NPR CDN version of `Pym.js`, or use your newsroom's CDN version of `Pym.js`. You should be using [the most-recent version of `Pym.js`](http://blog.apps.npr.org/pym.js/) in any case. From 2b4b3351a07b58314cb3d8093f054ef5bcfdedc7 Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Thu, 6 Sep 2018 10:36:46 -0400 Subject: [PATCH 12/16] Add alignment testing advice --- docs/upgrade-testing.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/docs/upgrade-testing.md b/docs/upgrade-testing.md index 0cef22d..b9c5a5a 100644 --- a/docs/upgrade-testing.md +++ b/docs/upgrade-testing.md @@ -57,3 +57,29 @@ wp post list --s='pymsrc' --format=ids | tr "[:space:]" "\n" | xargs -I % open h 3. You may want to take the time to edit your embedded pages so that they all use the NPR CDN version of `Pym.js`, or use your newsroom's CDN version of `Pym.js`. You should be using [the most-recent version of `Pym.js`](http://blog.apps.npr.org/pym.js/) in any case. + +## Testing embed alignment + +Version 1.3.2.1 of this plugin introduced [support for WordPress' alignment CSS classes](./readme.md#align-for-wordpress-alignment-support). + +For advice on styling the alignment classes, see [the Gutenberg docs](https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#wide-alignments-and-floats). + +### Shortcode testing + +Test your theme's alignment CSS classes with the following shortcodes: + +``` +[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" align=""] +[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" align="none"] +[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" align="left"] +[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" align="center"] +[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" align="right"] +[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" align="wide"] +[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" align="full"] +``` + +You'll want to check that the embeds are positioned correctly on the page in all browsers that you support and at all viewport widths. + +### Block testing + +Test your theme's alignment CSS by creating blocks with each alignment option. Your theme may need to [declare wide alignment](https://wordpress.org/gutenberg/handbook/extensibility/theme-support/#wide-alignment) in order to see the "wide" and "full" options. From 16d6bd25d7b32989fe40d986f51ae38740e0bc60 Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Thu, 6 Sep 2018 10:37:14 -0400 Subject: [PATCH 13/16] improve formatting of example showing extremely_specific_id element ID --- docs/readme.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/readme.md b/docs/readme.md index eb31389..b427467 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -123,7 +123,9 @@ In the Gutenberg editor, the alignment options are provided by the alignment con For example, the shortcode `[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" id="extremely_specific_id"]` results in the following output: ```html -
+
+... + ``` ## Plugin Options From b129223519f2f61291f6921277a340a8e92b7843 Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Thu, 6 Sep 2018 10:38:17 -0400 Subject: [PATCH 14/16] Improve formating of class name example HTML output --- docs/readme.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/readme.md b/docs/readme.md index b427467..dedbc2f 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -103,7 +103,9 @@ To do the same thing with this Pym shortcode, you would write: For example, the shortcode `[pym src="https://blog.apps.npr.org/pym.js/examples/table/child.html" class="one two three four float-left mw_50"]` results in the following output: ```html -
+
+... + ``` If you do not want the class `'pym'` output on container elements, [add a filter](https://codex.wordpress.org/Plugin_API/Filter_Reference) to the hook `pym_shortcode_default_class` that returns an empty string. From d43f3597c59155308c332ef2d725a4a875588408 Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Thu, 6 Sep 2018 11:30:02 -0400 Subject: [PATCH 15/16] Readability edits for upgrade testing --- docs/upgrade-testing.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/docs/upgrade-testing.md b/docs/upgrade-testing.md index b9c5a5a..16e2249 100644 --- a/docs/upgrade-testing.md +++ b/docs/upgrade-testing.md @@ -12,12 +12,12 @@ Depending on what search engine is enabled on your site, you may be able to find ### wp-cli -If you have [wp-cli](https://wp-cli.org/) installed in your environment, you can get a list of posts using the `[pym]` shortcode by running a search using [wp post list](https://developer.wordpress.org/cli/commands/post/list/) +If you have [wp-cli](https://wp-cli.org/) installed in your environment, you can get a list of posts using the `[pym]` shortcode by running a search using [wp post list](https://developer.wordpress.org/cli/commands/post/list/): ``` wp post list --s='[pym' ``` -You should see a list of posts and their IDs. +Your terminal should return a list of posts and their IDs: ``` +----+------------------------------------------+-------------------+---------------------+-------------+ @@ -27,7 +27,7 @@ You should see a list of posts and their IDs. +----+------------------------------------------+-------------------+---------------------+-------------+ ``` -To find posts containg shortcode or blocks with a custom pymsrc set: +To find posts containing shortcode or blocks with a custom pymsrc set: ``` $ wp post list --s='pymsrc' @@ -41,12 +41,14 @@ $ wp post list --s='pymsrc' You can change the formatting of the list and the information it contains for each post using the arguments of [wp post list](https://developer.wordpress.org/cli/commands/post/list/). -As an example, here's how to use `wp post list` on a Mac to open in a browser every single post containing a pymsrc setting: +As an example, here's how to use `wp post list`, on a [local Valet development install running on a Mac](https://github.com/INN/docs/blob/master/projects/largo/site-setup-valet.md), to open in your default web browser every single post containing a pymsrc setting: ``` wp post list --s='pymsrc' --format=ids | tr "[:space:]" "\n" | xargs -I % open http://pym-shortcode.test/?p=% ``` +This opened two tabs: one each for post `5` and `10`. Use this with caution if you have a lot of stories with `Pym.js` embeds; you might crash your web browser. + ## Testing the pymsrc override 1. Enable the override option in **Settings > Pym.js Embeds Settings > Override pymsrc** From babc0420cafcf1645700901a2968ae17ee69d887 Mon Sep 17 00:00:00 2001 From: Ben Keith Date: Thu, 6 Sep 2018 12:48:23 -0400 Subject: [PATCH 16/16] More docs and readme updates, and a more-complete changelog for #45 --- docs/{updating-pym.md => maintainer-notes.md} | 19 ++++++++++++- docs/readme.md | 2 +- readme.txt | 28 +++++++++++++++++-- 3 files changed, 44 insertions(+), 5 deletions(-) rename docs/{updating-pym.md => maintainer-notes.md} (66%) diff --git a/docs/updating-pym.md b/docs/maintainer-notes.md similarity index 66% rename from docs/updating-pym.md rename to docs/maintainer-notes.md index e5ece1c..acf736f 100644 --- a/docs/updating-pym.md +++ b/docs/maintainer-notes.md @@ -1,4 +1,6 @@ -## Notes for Plugin maintainers +# Notes for Plugin maintainers + +### Updating Pym.js `js/pym.v1.min.js` in this plugin should be kept up-to-date with the current version of https://pym.nprapps.org/pym.v1.min.js. @@ -10,3 +12,18 @@ To update: - update this plugin's version number to the `Pym.js` version number NPR Visuals Team's [stated intention](https://github.com/nprapps/pym.js/tree/master#versioning) is that versions of `Pym.js` will be backwards-compatible for `0.x` and `0.0.x` releases, so we can copy those in directly. When a `x.0.0` release comes around, we'll need to figure out a plan for that. See discussion in https://github.com/INN/pym-shortcode/issues/12 + +### Updating the plugin + +The plugin's `A.B.C` version number should match the version number of the bundled copy of `Pym.js`. We started doing this in plugin release 1.1.2. + +The plugin's [version history](https://github.com/INN/pym-shortcode/releases) looks like this: + +- 0.1: initial release +- 1.1.2 +- 1.2.0 +- 1.2.0.1: a fix in this plugin +- 1.2.0.2: a fix in this plugin +- 1.3.1 +- 1.3.2 +- 1.3.2.1: Gutenberg and settings page diff --git a/docs/readme.md b/docs/readme.md index dedbc2f..f457439 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -190,7 +190,7 @@ Or, you can specify the URL from which to load `Pym.js`. In this document, `Pym.js` is used to refer to the JavaScript library. -`pym.v1.min.js` is a specific copy of that library, hosted on your server at a given URL. It's named following [NPR's `Pym.js` versioning strategy](https://github.com/nprapps/pym.js/tree/master#versioning). It is kept up to date with the CDN version of the library by this plugin's maintainers, [following these instructions](https://github.com/INN/pym-shortcode/blob/master/docs/updating-pym.md). +`pym.v1.min.js` is a specific copy of that library, hosted on your server at a given URL. It's named following [NPR's `Pym.js` versioning strategy](https://github.com/nprapps/pym.js/tree/master#versioning). It is kept up to date with the CDN version of the library by this plugin's maintainers, [following these instructions](https://github.com/INN/pym-shortcode/blob/master/docs/maintainer-notes.md). The CDN version of `Pym.js` is at https://pym.nprapps.org/pym.v1.min.js . diff --git a/readme.txt b/readme.txt index 436c2b6..2efd317 100644 --- a/readme.txt +++ b/readme.txt @@ -19,7 +19,8 @@ Pym Shortcode will resize an iframe responsively depending on the height of its 1. In the WordPress Dashboard go to **Plugins**, then click the **Add Plugins** button and search the WordPress Plugins Directory for Pym Shortcode. Alternatively, you can download the zip file from this Github repo and upload it manually to your WordPress site. 2. Activate the plugin through the 'Plugins' screen in WordPress -3. Nothing to configure, just begin using Pym Shortcode! +3. In **Settings > Pym.js Embed Settings**, decide whether you'd like to change the plugin's behavior to use a non-default source URL for `Pym.js`, and whether you'd like to prevent post authors from setting embed-specific URLs for `Pym.js` +4. Begin embedding content! == Frequently Asked Questions == @@ -45,13 +46,34 @@ Mobile view of the WordPress post with the NPR embed using Pym Shortcode: == Changelog == -= [unreleased] = += [1.3.2.1] = + +This is a major update! + +Following the practice begun at plugin version 1.1.2 of [having the plugin version number match the version number of the bundled copy of `Pym.js`](https://github.com/INN/pym-shortcode/blob/master/docs/maintainer-notes.md), the first three numbers in this plugin's version do not change with this release because the `Pym.js` version has not changed. We've tacked a `.1` on to the end to denote this release. Please read the release notes and test your site as appropriate before upgrading in production. + +New features: * Adds a "Pym Embed" block for use in Gutenberg. [PR #34](https://github.com/INN/pym-shortcode/pull/34) for issue [#28](https://github.com/INN/pym-shortcode/issues/28). + * If a block is created using this plugin and Gutenberg, and Gutenberg is then disabled, the block will show a link to the embedded graphic. +* Through the settings page, you can now serve pym.js using your newsroom's CDN or NPR's CDN! [PR #45]() for [issue #31](https://github.com/INN/pym-shortcode/issues/31). +* Adds a settings page, available to those with the `manage_options` capability, with the following options: + * Change the default pymsrc URL. [PR #45]() for [issue #8](https://github.com/INN/pym-shortcode/issues/8). + * Override block and shortcode pymsrc URLs with the default pymsrc URL. [PR #45]() for [issue #8](https://github.com/INN/pym-shortcode/issues/8). +* Adds an informational page, available to all who can make posts, that lists the plugin's default source URL for `Pym.js`. This is to make the process of building new interactives easier. * Shortcode now gains an `align=""` parameter, so that WordPress's generated [alignment CSS classes](https://codex.wordpress.org/CSS#WordPress_Generated_Classes) can be used on embeds. By enabling this in the shortcode, the Gutenberg Block also gains support for alignment. [PR #34](https://github.com/INN/pym-shortcode/pull/34) * Script tags for embeds are no longer output by `the_content()`, instead being output during `wp_footer()` by [closures](https://secure.php.net/manual/en/functions.anonymous.php) hooked on the `'wp_footer'` action. [PR #34](https://github.com/INN/pym-shortcode/pull/34) for issues [#33](https://github.com/INN/pym-shortcode/issues/33) and [#35](https://github.com/INN/pym-shortcode/issues/35). -* The source URL for `pym.js` is no longer output by `the_content()`, instead being output during `wp_footer` by an action dedicated to the task. If different shortcodes and/or blocks on the page specify different source URLs for Pym.js, all are output (after removing duplicates), but a message is logged in the browser console. If `WP_DEBUG` is set, this message is also logged to the server log, with the post ID specified. [PR #34](https://github.com/INN/pym-shortcode/pull/34) for issues [#33](https://github.com/INN/pym-shortcode/issues/33) and [#35](https://github.com/INN/pym-shortcode/issues/35). See https://github.com/INN/pym-shortcode/tree/master/docs#ive-set-a-different-pymsrc-option-but-now-im-seeing-a-message-in-the-console * The script tag used to run `new pym.Parent` is now configurable. By replacing the [pluggable function](https://codex.wordpress.org/Pluggable_Functions) `pym_shortcode_script_footer_enqueue()` with your own function, you can now use alternate forms of embed code that may be required for PJAX sites or custom versions of Pym.js. This resolves issue [#19](https://github.com/INN/pym-shortcode/issues/19). +* Adds "Requires PHP: 5.3" metadata to the plugin's `readme.txt`, since we're now using PHP namespaces for some code. +* Adds documentation for how to test the plugin: + * tests to run before enabling the "override pymsrc" option in production + * tests to run for site compatibility with Gutenberg + +Changes: + +* The source URL for `pymjs`, known as the pymsrc URL, is now passed through [wp_http_validate_url](https://developer.wordpress.org/reference/functions/wp_http_validate_url/). [PR #45]() for [issue #8](https://github.com/INN/pym-shortcode/issues/8). +* The source URL for `pym.js` is no longer output by `the_content()`, instead being output during `wp_footer` by an action dedicated to the task. If different shortcodes and/or blocks on the page specify different source URLs for Pym.js, all are output (after removing duplicates), but a message is logged in the browser console. If `WP_DEBUG` is set, this message is also logged to the server log, with the post ID specified. [PR #34](https://github.com/INN/pym-shortcode/pull/34) for issues [#33](https://github.com/INN/pym-shortcode/issues/33) and [#35](https://github.com/INN/pym-shortcode/issues/35). See https://github.com/INN/pym-shortcode/tree/master/docs#ive-set-a-different-pymsrc-option-but-now-im-seeing-a-message-in-the-console +* `docs/updating-pym.md` becomes `docs/maintainer-notes.md` = 1.3.2 =