From 989cc6d21856fb4d3766b98eaf10de56610640a0 Mon Sep 17 00:00:00 2001 From: Sayed Taqui Date: Thu, 18 Aug 2016 14:18:46 +0530 Subject: [PATCH 1/5] Allow button text to be changed by params --- js/customize-post-editor-control.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/js/customize-post-editor-control.js b/js/customize-post-editor-control.js index 06b3d65..62da5fe 100644 --- a/js/customize-post-editor-control.js +++ b/js/customize-post-editor-control.js @@ -26,7 +26,11 @@ label: api.Posts.data.l10n.fieldContentLabel, active: true, setting_property: null, - input_attrs: {} + input_attrs: {}, + button_labels: { + open_editor: api.Posts.data.l10n.openEditor, + close_editor: api.Posts.data.l10n.closeEditor + } }, options.params || {} ); @@ -316,8 +320,7 @@ updateEditorToggleExpandButtonLabel: function updateEditorToggleExpandButtonLabel( expanded ) { var control = this; - // @todo Allow these labels to be parameters on the control. - control.editorToggleExpandButton.text( expanded ? api.Posts.data.l10n.closeEditor : api.Posts.data.l10n.openEditor ); + control.editorToggleExpandButton.text( expanded ? control.params.button_labels.close_editor : control.params.button_labels.open_editor ); }, /** From e4a33eb2757445b791f501e70ce6b042389b5a50 Mon Sep 17 00:00:00 2001 From: Sayed Taqui Date: Thu, 18 Aug 2016 22:52:01 +0530 Subject: [PATCH 2/5] Move editor control related methods to its own class --- ...class-wp-customize-post-editor-control.php | 80 ++++++++++++++++++ php/class-wp-customize-posts.php | 81 +------------------ 2 files changed, 81 insertions(+), 80 deletions(-) diff --git a/php/class-wp-customize-post-editor-control.php b/php/class-wp-customize-post-editor-control.php index e6a2ea2..afc0044 100644 --- a/php/class-wp-customize-post-editor-control.php +++ b/php/class-wp-customize-post-editor-control.php @@ -50,6 +50,86 @@ public function enqueue() { wp_enqueue_script( 'customize-post-editor-control' ); } + /** + * Hooked to `customize_controls_enqueue_scripts` from `WP_Customize_Posts` class. + */ + public static function enqueue_scripts() { + self::enqueue_editor(); + } + + /** + * Enqueue a WP Editor instance we can use for rich text editing. + */ + public static function enqueue_editor() { + add_action( 'customize_controls_print_footer_scripts', array( __CLASS__, 'render_editor' ), 0 ); + + // Note that WP_Customize_Widgets::print_footer_scripts() happens at priority 10. + add_action( 'customize_controls_print_footer_scripts', array( __CLASS__, 'maybe_do_admin_print_footer_scripts' ), 20 ); + + // @todo These should be included in _WP_Editors::editor_settings() + if ( false === has_action( 'customize_controls_print_footer_scripts', array( '_WP_Editors', 'enqueue_scripts' ) ) ) { + add_action( 'customize_controls_print_footer_scripts', array( '_WP_Editors', 'enqueue_scripts' ) ); + } + } + + /** + * Render rich text editor. + */ + public static function render_editor() { + ?> +
+
+ +
+

+ + false, + 'drag_drop_upload' => true, + 'tabfocus_elements' => 'content-html,save-post', + 'editor_height' => 200, + 'default_editor' => 'tinymce', + 'tinymce' => array( + 'resize' => false, + 'wp_autoresize_on' => false, + 'add_unload_trigger' => false, + ), + ) ); + ?> + +
+ action_admin_enqueue_scripts(); + * Shortcake_Bakery::get_instance()->action_admin_enqueue_scripts(); + * + * Note that this action is also done in WP_Customize_Widgets::print_footer_scripts() + * at priority 10, so this method runs at a later priority to ensure the action is + * not done twice. + * + * + * @codeCoverageIgnore + */ + public static function maybe_do_admin_print_footer_scripts() { + if ( ! did_action( 'admin_print_footer_scripts' ) ) { + /** This action is documented in wp-admin/admin-footer.php */ + do_action( 'admin_print_footer_scripts' ); + } + + if ( ! did_action( 'admin_footer-post.php' ) ) { + /** This action is documented in wp-admin/admin-footer.php */ + do_action( 'admin_footer-post.php' ); + } + } + /** * Render the Underscore template for this control. * diff --git a/php/class-wp-customize-posts.php b/php/class-wp-customize-posts.php index df2612d..0acc6fc 100644 --- a/php/class-wp-customize-posts.php +++ b/php/class-wp-customize-posts.php @@ -88,7 +88,7 @@ public function __construct( WP_Customize_Manager $manager ) { require_once dirname( __FILE__ ) . '/class-wp-customize-post-field-partial.php'; add_action( 'customize_controls_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); - add_action( 'customize_controls_init', array( $this, 'enqueue_editor' ) ); + add_action( 'customize_controls_enqueue_scripts', array( 'WP_Customize_Post_Editor_Control', 'enqueue_scripts' ) ); add_filter( 'customize_refresh_nonces', array( $this, 'add_customize_nonce' ) ); add_action( 'customize_register', array( $this, 'register_constructs' ), 20 ); @@ -692,85 +692,6 @@ public function format_gmt_offset( $offset ) { return $formatted_offset; } - /** - * Enqueue a WP Editor instance we can use for rich text editing. - * - * @todo Consider moving this to WP_Customize_Post_Editor_Control::enqueue_scripts(). - * @todo This can be added at the customize_controls_enqueue_scripts action. - */ - public function enqueue_editor() { - add_action( 'customize_controls_print_footer_scripts', array( $this, 'render_editor' ), 0 ); - - // Note that WP_Customize_Widgets::print_footer_scripts() happens at priority 10. - add_action( 'customize_controls_print_footer_scripts', array( $this, 'maybe_do_admin_print_footer_scripts' ), 20 ); - - // @todo These should be included in _WP_Editors::editor_settings() - if ( false === has_action( 'customize_controls_print_footer_scripts', array( '_WP_Editors', 'enqueue_scripts' ) ) ) { - add_action( 'customize_controls_print_footer_scripts', array( '_WP_Editors', 'enqueue_scripts' ) ); - } - } - - /** - * Render rich text editor. - * - * @todo Consider moving this to WP_Customize_Post_Editor_Control::enqueue_scripts(). - */ - public function render_editor() { - ?> -
-
- -
-

- - false, - 'drag_drop_upload' => true, - 'tabfocus_elements' => 'content-html,save-post', - 'editor_height' => 200, - 'default_editor' => 'tinymce', - 'tinymce' => array( - 'resize' => false, - 'wp_autoresize_on' => false, - 'add_unload_trigger' => false, - ), - ) ); - ?> - -
- action_admin_enqueue_scripts(); - * Shortcake_Bakery::get_instance()->action_admin_enqueue_scripts(); - * - * Note that this action is also done in WP_Customize_Widgets::print_footer_scripts() - * at priority 10, so this method runs at a later priority to ensure the action is - * not done twice. - * - * @todo Consider moving this to WP_Customize_Post_Editor_Control::enqueue_scripts(). - * - * @codeCoverageIgnore - */ - public function maybe_do_admin_print_footer_scripts() { - if ( ! did_action( 'admin_print_footer_scripts' ) ) { - /** This action is documented in wp-admin/admin-footer.php */ - do_action( 'admin_print_footer_scripts' ); - } - - if ( ! did_action( 'admin_footer-post.php' ) ) { - /** This action is documented in wp-admin/admin-footer.php */ - do_action( 'admin_footer-post.php' ); - } - } - /** * Sanitize a value as a post ID. * From e4cd75d7da4ea00ae6acc353cac5dedfc9b3dfbe Mon Sep 17 00:00:00 2001 From: Sayed Taqui Date: Thu, 18 Aug 2016 23:13:42 +0530 Subject: [PATCH 3/5] Remove unused class-wp-customize-editor-control --- php/class-wp-customize-editor-control.php | 67 ------------------- ...class-wp-customize-post-editor-control.php | 1 - php/class-wp-customize-posts.php | 1 - 3 files changed, 69 deletions(-) delete mode 100644 php/class-wp-customize-editor-control.php diff --git a/php/class-wp-customize-editor-control.php b/php/class-wp-customize-editor-control.php deleted file mode 100644 index c739659..0000000 --- a/php/class-wp-customize-editor-control.php +++ /dev/null @@ -1,67 +0,0 @@ -json(); - ?> - <# - _.defaults( data, ); - data.input_id = 'input-' + String( Math.random() ); - #> - - <# if ( data.description ) { #> - {{ data.description }} - <# } #> - - Date: Thu, 18 Aug 2016 23:36:13 +0530 Subject: [PATCH 4/5] Move editor related exports to its own class --- js/customize-post-editor-control.js | 17 ++++++++++++++--- php/class-wp-customize-post-editor-control.php | 9 +++++++++ php/class-wp-customize-posts.php | 3 --- 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/js/customize-post-editor-control.js b/js/customize-post-editor-control.js index 62da5fe..d7316bf 100644 --- a/js/customize-post-editor-control.js +++ b/js/customize-post-editor-control.js @@ -1,4 +1,4 @@ -/* global jQuery, wp, _, tinyMCE */ +/* global jQuery, wp, _, tinyMCE, _wpCustomizePostsEditorExports */ /* eslint consistent-this: [ "error", "control" ], no-magic-numbers: [ "error", { "ignore": [1] } ] */ (function( api, $ ) { @@ -17,6 +17,17 @@ initialize: function initialize( id, options ) { var control = this, args; + control.data = { + l10n: { + openEditor: '', + closeEditor: '' + } + }; + + if ( 'undefined' !== typeof _wpCustomizePostsEditorExports ) { + _.extend( control.data, _wpCustomizePostsEditorExports ); + } + args = {}; args.params = _.extend( { @@ -28,8 +39,8 @@ setting_property: null, input_attrs: {}, button_labels: { - open_editor: api.Posts.data.l10n.openEditor, - close_editor: api.Posts.data.l10n.closeEditor + open_editor: control.data.l10n.openEditor, + close_editor: control.data.l10n.closeEditor } }, options.params || {} diff --git a/php/class-wp-customize-post-editor-control.php b/php/class-wp-customize-post-editor-control.php index 2d08c7f..d8e1338 100644 --- a/php/class-wp-customize-post-editor-control.php +++ b/php/class-wp-customize-post-editor-control.php @@ -55,6 +55,15 @@ public function enqueue() { */ public static function enqueue_scripts() { self::enqueue_editor(); + + $exports = array( + 'l10n' => array( + 'openEditor' => __( 'Open Editor', 'customize-posts' ), + 'closeEditor' => __( 'Close Editor', 'customize-posts' ), + ), + ); + + wp_scripts()->add_data( 'customize-post-editor-control', 'data', sprintf( 'var _wpCustomizePostsEditorExports = %s;', wp_json_encode( $exports ) ) ); } /** diff --git a/php/class-wp-customize-posts.php b/php/class-wp-customize-posts.php index 30488f1..e7ba5d3 100644 --- a/php/class-wp-customize-posts.php +++ b/php/class-wp-customize-posts.php @@ -629,10 +629,7 @@ public function enqueue_scripts() { 'fieldAuthorLabel' => __( 'Author', 'customize-posts' ), 'noTitle' => __( '(no title)', 'customize-posts' ), 'theirChange' => __( 'Their change: %s', 'customize-posts' ), - 'openEditor' => __( 'Open Editor', 'customize-posts' ), // @todo Move this into editor control? - 'closeEditor' => __( 'Close Editor', 'customize-posts' ), 'invalidDateError' => __( 'Whoops, the provided date is invalid.', 'customize-posts' ), - /* translators: %s post type */ 'jumpToPostPlaceholder' => __( 'Jump to %s', 'customize-posts' ), ), From 49c6ed52660be8ca2f159b0e26923b6854112747 Mon Sep 17 00:00:00 2001 From: Sayed Taqui Date: Sat, 20 Aug 2016 00:57:40 +0530 Subject: [PATCH 5/5] Give option to disable editor buttons --- css/customize-posts.css | 4 ++ js/customize-post-editor-control.js | 58 ++++++++++++++++++++++++++++- 2 files changed, 61 insertions(+), 1 deletion(-) diff --git a/css/customize-posts.css b/css/customize-posts.css index bc8e24e..af45bc2 100644 --- a/css/customize-posts.css +++ b/css/customize-posts.css @@ -346,6 +346,10 @@ body.customize-posts-content-editor-pane-resize #customize-preview:before { margin-right: 0.25ex; } +.mce-btn.hidden{ + display: none; +} + @media screen and ( max-width: 782px ) { .customize-control-post_date select { height: 40px; diff --git a/js/customize-post-editor-control.js b/js/customize-post-editor-control.js index 5487fa2..bb8f810 100644 --- a/js/customize-post-editor-control.js +++ b/js/customize-post-editor-control.js @@ -4,6 +4,39 @@ (function( api, $ ) { 'use strict'; + var editorDefaultSettings = { + media_buttons: true, + html_editor: true, + mce_buttons: { + bold: true, + italic: true, + underline: true, + blockquote: true, + strikethrough: true, + bullist: true, + numlist: true, + alignleft: true, + aligncenter: true, + alignright: true, + undo: true, + redo: true, + link: true, + unlink: true, + fullscreen: true, + wp_more: true, + formatselect: true, + alignjustify: true, + forecolor: true, + pastetext: true, + removeformat: true, + charmap: true, + outdent: true, + indent: true, + wp_adv: true, + hr: true + } + }; + /** * An post editor control. * @@ -54,7 +87,8 @@ button_labels: { open_editor: control.data.l10n.openEditor, close_editor: control.data.l10n.closeEditor - } + }, + editor_settings: editorDefaultSettings }, options.params || {} ); @@ -166,6 +200,7 @@ } else { control.contentTextarea.val( settingValue ); } + control.updateEditorButtons(); editor.on( 'input change keyup', control.onVisualEditorChange ); control.contentTextarea.on( 'input', control.onTextEditorChange ); $( document.body ).addClass( 'customize-posts-content-editor-pane-open' ); @@ -188,6 +223,27 @@ } }, + /** + * Toggle the editor buttons. + * + * @return {void} + */ + updateEditorButtons: function() { + var control = this, button, + editor = tinyMCE.get( 'customize-posts-content' ), + mediaButton = $( '#wp-customize-posts-content-media-buttons' ), + htmlTab = $( '#customize-posts-content-html' ); + + _.each( control.params.editor_settings.mce_buttons, function( buttonState, buttonName ) { + editor.controlManager.setDisabled( buttonName, ! buttonState ); + button = $( '.mce-i-' + buttonName ).closest( '.mce-btn' ); + button.toggleClass( 'hidden', ! buttonState ); + } ); + + htmlTab.toggleClass( 'hidden', ! control.params.editor_settings.html_editor ); + mediaButton.toggleClass( 'hidden', ! control.params.editor_settings.media_buttons ); + }, + /** * Update the editor heading with the control label, showing if there is more than one editor control in the section. *