Edit posts and postmeta in the Customizer. Stop editing your posts/postmeta blind!

Contributors: xwp, westonruter, valendesigns
Tags: customizer, customize, posts, preview, featured-image, page-template
Requires at least: 4.5
Tested up to: 4.6-alpha
Stable tag: 0.6.1
License: GPLv2 or later

This is a feature plugin intended to implement #34923: Introduce basic content authorship in the Customizer.

The goal for this plugin is to be able to expose the editing of posts and pages in the Customizer, allowing you to edit post data and postmeta for any number of posts, and preview the changes before saving them for others to see. This plugin was birthed out of the Widget Customizer feature-as-plugin project which was merged into WordPress Core: as widgets (in 3.9) and nav menus (4.3) can now be managed in the Customizer, so too should posts and pages be editable in the Customizer as well.

Did you know that changing the featured image actually makes the change live even before you save the post? This is very surprising/unexpected behavior. The only way to truly preview a change to a featured image is to use something like Customize Posts.

Likewise, did you know that changing a page template cannot be previewed from the post editor? When you change the selected page template, the change will not show up when you preview the page (see #11049). However, in Customize Posts you can preview changes to the page template just by changing the dropdown selection, and then you can see what your page would look like with the new template after the preview refreshes.

Most other changes to metaboxes containing data that gets saved to custom fields (postmeta) also get written when clicking the Preview button. The Customize Posts plugin provides a framework to edit postmeta in the Customizer with a live preview of the changes. (Fixing this underlying issue of incorrectly persisting postmeta when doing a preview is captured in #20299.)

As much as possible, the previewing of changes in Customize Posts utilizes the selective refresh capabilities introduced in WordPress 4.5. Not only does this mean it is faster to preview changes to posts and postmeta, but it also allows you to shift-click on an element to focus on the corresponding control in the Customizer pane. For example you can shift-click on the post title in the preview to focus on the post title control's input field, or shift-click on a featured image to focus on the control's button to open the media library.

Development of this plugin is done on GitHub. Pull requests welcome. Please see issues reported there before going to the plugin forum.

(This Customize Posts plugin is not to be confused with 10up's Post Customizer.)

The following are listed in reverse chronological order. The first, more recent videos, show more polish.

[2016-04-28] New features in 0.5.0.

[2016-03-28] Previewing post from Post Edit screen.

[2016-03-05] Opening a draft post in the Customizer to preview title wrapping.

[2016-03-04] Demo featuring the WP visual rich text editor (TinyMCE), including the insertion of images from the media library. Post content can be edited in the Customizer and previewed in multiple contexts. For example, this allows you to preview how a Read More tag will appear when the post appears on a post list page, and you can navigate to the single post to continue previewing subsequent paragraphs. You can expand the editor into a full-screen mode to focus on writing and then quickly preview the changes on the site by toggling the editor. You can make changes to as many posts as you want, but none of the changes will go live until you hit Save & Publish: everything is previewed so there is no “save and surprise”.

[2016-03-03] Demonstration of integration with Customize Setting Validation (#34893) to gracefully handle failures to save due to post locking and concurrent user editing:

[2016-03-01] Demonstration of hooking into edit post links so that they actually work in the Customizer and expand the section to edit the given post (as opposed to the link doing nothing at all when clicked), as well as shift-clicking on the title and content (needs better discovery UI, see #27403):

• Send values to JS via js_value() and use the settings json method if available.
• Move comments_open and pings_open filters to the WP_Customize_Posts_Preview::add_preview_filters method.
• Fix purgeTrash to ensure trashed post sections do not appear in the Customizer root panel after publishing changes.
• Ensure the modified date is not changed when transitioning to customize-draft.
• Make sure the customize-draft status is always available to Customize Snapshots & wp-admin
• Fix PHP notice generated when a post type is registered without map_meta_cap
• Delete auto-draft and customize-draft status posts when saving the trash post_status
• Use a post type's edit_posts capability for sections
• Defer embedding a sections contents until expanded
• Implement focusControl support for deferred-embedded post section controls
• Add support for focusing on controls for setting properties when those properties are invalid
• Prevent customized-posts messages sent via selective-refresh from effecting post-navigation state
• Improve feature detection for including customize-controls patched for trac-36521
• Included plugin-support and theme-support PHP files that were inadvertantly omitted from the 0.6.0 build.

See full commit log: 0.6.0...0.6.1

Issues in milestone: milestone:0.6.1

Props: Weston Ruter (@westonruter), Derek Herman (@valendesigns)

Added:

• Add the ability to create new posts and pages in the Customizer. Created posts get auto-draft status in the DB so they will be garbage-collected if the Customizer is never saved. A new view link appears in the post section allowing a newly-created post to be navigated to easily without having to find the created post linked to in the preview. (Issues #48, #50, PR #134)
• Add post status control and preview, with trash status support (Issues #40, #137, PR #152)
• Add support for setting validation in WordPress 4.6-alpha, showing notifications if attempting to save when a post is locked or a conflicting update was previously made. (Issue #142, PR #150)
• Add the ability to vertically resize the post editor (Issue #136, PR #149)
• Add post slug control, wherein changes do not cause the preview to refresh by default since there is nothing to see (Issue #63, PR #148)
• Posts data as saved will now be synced back into the Customizer interface, ensuring that if a post slug gets the infamous -2 added, you’ll see that in the Control. Likewise, if a wp_insert_post_data filter or content_save_pre changes your data in some way, these will be shown in the post’s Customizer controls upon saving.
• Add extendable theme & plugin compatibility classes that can configure partial rendering. All Core themes & Jetpack are currently supported. (Issues #82, #103, PR #123)
• Use plugins_url() for each asset URL so that the plugin can be installed as a submodule without SCRIPT_DEBUG (Issue #133)

Fixed:

• Add all postmeta settings for registered types not just the ones actually referenced (Issues #141, #145)
• Export all registered post types to client, but only register panels if show_in_customizer (PR #130)
• Ensure that control pane expand button is visible when editor is open and the Customizer pane is collapsed (Issue #44, PR #126)
• Improve compatibility with the Customize Snapshots plugin.
• Improve compatibility with the WP REST API plugin.
• Supply a default (no title) placeholder to the post title control for new posts.
• Filter post and page links in the Customizer to return the preview URL.

See full commit log: 0.5.0...0.6.0

Issues in milestone: milestone:0.6

Props: Weston Ruter (@westonruter), Derek Herman (@valendesigns), Philip Ingram (@pingram3541), Daniel Bachhuber (@danielbachhuber), Stuart Shields (@stuartshields)

Added:

• Support for postmeta, including a framework for registering postmeta types. (Issues #1, PR #89)
• Page template control and preview, with sync from Customizer post preview back to post edit screen. (Issue #85, PR #89)
• Featured image control, with sync from Customizer post preview back to post edit screen. Changes to the featured image can now be previewed, where normally this is not possible in WordPress. Improved featured image selection on edit post screen to not update featured image in place, instead waiting until the post is Saved until updating the featured image postmeta. The featured image can be set from the post edit screen and then previewed in the Customizer via the post Preview Changes button: the featured image can be further changed in the Customizer post preview, with changes synced back to the post edit screen when the Customizer post preview is exited. (Issue #57, PR #102)
• Author control and preview, with sync from Customizer post preview back to post edit screen (Issue #62, PRs #89 #92)
• Excerpt control and preview, with sync from Customizer post preview back to post edit screen (Issue #60, PR #91)
• Comment status control and preview, with sync from Customizer post preview back to post edit screen (Issues #61, PR #100)
• Ping status control and preview, with sync from Customizer post preview back to post edit screen (Issue #64, PR #100)
• Improve PHPUnit test coverage to 98%.
• Note: Selective refresh support was specifically tested with Twenty Fifteen and Twenty Sixteen. See #103 for a way for themes to configure how they represent the various post fields in template parts.

Fixed:

• Improve editor styles in mobile and in fullscreen mode. (Issue #45, PR #107)
• Modals, toolbars, and tooltips and are no longer hidden (Issue #80, PRs #81, #101).
• Improve compatibility with Customize Widgets Plus (PR #83). See also xwp/wp-customize-widgets-plus#46 for a fix in the Customizer post preview.
• Export post/postmeta settings during selective refresh requests so that new posts added will appear in the panel, such as when adding the number of posts to show in the Recent Posts widget. (Issue #97, PR #99)
• Improve compatibility with Customize Snapshots (PR #95)

See v0.5 release post on Make XWP.

See full commit log: 0.4.2...0.5.0

Issues in milestone: milestone:0.5

Props: Weston Ruter (@westonruter), Derek Herman (@valendesigns), Luke Carbis (@lukecarbis), Mike Crantea (@mehigh), Stuart Shields (@stuartshields)

Restore stylesheet erroneously deleted during grunt deploy.

• Restore editability of pages in the Customizer (remove default condition that a post type have publicly_queryable as true).
• Log errors in customize-posts message receiver instead of throwing them.

• Open Customizer to preview and make additional changes when clicking Preview from post edit admin screen (see video).
• Introduce show_in_customizer arg for register_post_type(), and let override condition on show_ui and publicly_queryable being both true.
• Fix modals and inline toolbars in TinyMCE editor displayed in Customizer.
• Fix initialization when TinyMCE does not default to Visual.
• Complete support for Jetpack Infinite Scroll, ensuring posts are listed in Customizer in order of appearance.
• Remove dependency on widgets component being loaded.
• Allow auto-draft posts to be previewed.
• Add Grunt, contributing.

• Complete rewrite of plugin.
• Added: Selective refresh is now used to preview changes to the title and content.
• Added: A TinyMCE editor is now used to edit content, including initial support for Shortcake.
• Added: Each post type has a separate panel. Each post is represented by a section within those panels.
• Added: Edit post links in Customizer preview now open post section.
• Added: Integration with Customize Setting Validation to show show error message when post locking or version conflict happens.
• Removed: Postmeta fields (custom fields, page template, featured image) were removed for rewrite but will be re-introduced.

Remove shim that implemented the customize_save_response filter which was introduced in 4.2. The shim used a slightly different filter name and broke insertion of nav menu items in the Customizer.

Change method for registering scripts/styles to fix conflict w/ Jetpack. PR #26

Add compatibility with WordPress 4.1 now that the Customizer has a proper JS API.

Supply missing selected attribute on post_status dropdown.

Initial release on WordPress.org. Key new features:

• Postmeta can now be added, modified, and deleted—all of actions which are fully previewable.
• Grant customize capability to authors and editors who normally can't access the Customizer, so they can edit posts there.
• Move the “Customize” admin bar link to the top level, and add one for editors and authors.
• Allow the Page Template and Featured Image to be modified and previewed.