Skip to content
This repository has been archived by the owner on Dec 16, 2022. It is now read-only.

[WIP] Post editor enhancements #222

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

[WIP] Post editor enhancements #222

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
989cc6d
Allow button text to be changed by params
mohdsayed Aug 18, 2016
e4a33eb
Move editor control related methods to its own class
mohdsayed Aug 18, 2016
e4cd75d
Remove unused class-wp-customize-editor-control
mohdsayed Aug 18, 2016
7173100
Move editor related exports to its own class
mohdsayed Aug 18, 2016
2757e06
Resolve conflict with develop
mohdsayed Aug 19, 2016
49c6ed5
Give option to disable editor buttons
mohdsayed Aug 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions css/customize-posts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
78 changes: 74 additions & 4 deletions js/customize-post-editor-control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,42 @@
/* global jQuery, wp, _, tinyMCE */
/* global jQuery, wp, _, tinyMCE, _wpCustomizePostsEditorExports */
/* eslint consistent-this: [ "error", "control" ], no-magic-numbers: [ "error", { "ignore": [1] } ] */

(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.
*
Expand All @@ -17,6 +50,17 @@
initialize: function initialize( id, options ) {
var control = this, args;

control.data = {
l10n: {
openEditor: '',
closeEditor: ''
}
};

if ( 'undefined' !== typeof _wpCustomizePostsEditorExports ) {
_.extend( control.data, _wpCustomizePostsEditorExports );
}

_.bindAll(
control,
'handleRemoval',
Expand All @@ -39,7 +83,12 @@
label: api.Posts.data.l10n.fieldContentLabel,
active: true,
setting_property: null,
input_attrs: {}
input_attrs: {},
button_labels: {
open_editor: control.data.l10n.openEditor,
close_editor: control.data.l10n.closeEditor
},
editor_settings: editorDefaultSettings
},
options.params || {}
);
Expand Down Expand Up @@ -151,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' );
Expand All @@ -173,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.
*
Expand Down Expand Up @@ -421,8 +492,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 );
},

/**
Expand Down
67 changes: 0 additions & 67 deletions php/class-wp-customize-editor-control.php
View file
Open in desktop

This file was deleted.

88 changes: 88 additions & 0 deletions php/class-wp-customize-post-editor-control.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,94 @@ 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() {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@sayedwp Actually, maybe you should switch back to using the non-static enqueue() method, but then have a static class variable to capture whether the enqueue has been called:

static protected $enqueued = false;

public function enqueue() {
    if ( self::$enqueued ) {
        return;
    }
    self::$enqueued = true;
    // ...
}

Then you can avoid WP_Customize_Posts from having direct awareness of this class's methods and so could remove:

add_action( 'customize_controls_enqueue_scripts', array( 'WP_Customize_Post_Editor_Control', 'enqueue_scripts' ) );

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@westonruter enqueue method never executes until we add control using add_control. So currently enqueue is just sitting there and not doing anything, we are enqueueing the script as a dependency from register_scripts in Customize_Posts_Plugin

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

OK, good point. I'd consider this a deficiency in the WP_Customize_Manager::register_control_type() that it doesn't call the enqueue method.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that's because when we register the control type, it just renders the template
https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-customize-manager.php#L1517-L1543

However the actual enqueue method is called when we use add_control of WP_Customize_Manager
https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-customize-manager.php#L1633-L1636
https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-customize-manager.php#L1471-L1479

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also we should be able to use customize_controls_enqueue_scripts from inside the WP_Customize_Post_Editor_Control construct but we cannot do that because render_control_template is hooked into customize_controls_print_footer_scripts which is at the footer and customize_controls_enqueue_scripts is in the header, so already late.

https://github.com/WordPress/WordPress/blob/master/wp-includes/class-wp-customize-manager.php#L301
https://github.com/WordPress/WordPress/blob/master/wp-admin/customize.php#L63-L185

However if we use add_control I think then it should be working because its hooked into customize_register.

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 ) ) );
}

/**
* 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() {
?>
<div id="customize-posts-content-editor-pane">
<div id="customize-posts-content-editor-dragbar">
<span class="screen-reader-text"><?php esc_html_e( 'Resize Editor', 'customize-posts' ); ?></span>
</div>
<h2 id="customize-posts-content-editor-title"></h2>

<?php
// The settings passed in here are derived from those used in edit-form-advanced.php.
wp_editor( '', 'customize-posts-content', array(
'_content_editor_dfw' => 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,
),
) );
?>

</div>
<?php
}

/**
* Do the admin_print_footer_scripts actions if not done already.
*
* Another possibility here is to opt-in selectively to the desired widgets
* via:
* Shortcode_UI::get_instance()->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.
*
Expand Down
Loading