Post Formats UI Update, 3/14

As noted in The Road to 3.6 Beta 1, we’ve got quite a bit going on for post formats. Many of the tickets are in need of testing (including unit tests) and then a commit. As always, there are a few different fronts: UIUI User interface/administration, data, and parsing. Here’s where we are with each, and what needs to get done. There’s a large variety of tasks here, and we are seeking contributors to help 🙂

UI / Administration

Main ticketticket Created for both bug reports and feature development on the bug tracker.: #19570

@melchoyce refreshed the layout wireframes and we ran them by @jenmylo for a gut check. The wireframes linked are for reference to see progression – quite a bit will be different, notably that the collapsing content editor will not actually do that and we probably won’t be able to get so adventurous with the status format. We are going to do the following and should aim for a commit addressing a good portion of this in the next several days:

  • Remove the separate metaMeta Meta is a term that refers to the inside workings of a group. For us, this is the team that works on internal WordPress sites like WordCamp Central and Make WordPress. and field display for the image and gallery formats. Though it’s nice to guide a user through via UI, the image format did not really pose any issues in the user testing, and the whole uncoupled multiple gallery shift in 3.5 makes a separate field less sensible. With good parsing, just the content area should be enough for both. Image also still has the featured imageFeatured image A featured image is the main image used on your blog archive page and is pulled when the post or page is shared on social media. The image can be used to display in widget areas on your site or in a summary list of posts. metaboxMetabox A post metabox is a draggable box shown on the post editing screen. Its purpose is to allow the user to select or enter information in addition to the main post content. This information should be related to the post in some way., which is confusing. One thing that we should try doing is having the “Add Media” button open the modal in the “Create Gallery” panel by default if in the gallery format. Knowing about galleries at all was an issue in user testing, not related to the post format.
  • @lessbloat proposed a dropdown selector, in these mockups placed by the title: Anything is better than tabs for this interaction, and I’m sorry that I used them even temporarily as they clearly became a distraction, so we are going to keep the dropdown idea, but try putting it where the screen icon is, per suggestion from Jen.
  • @melchoyce is making some changes to the icons she’s been working on: The standard post icon will be the pin, the gallery icon will become the image icon (since images are not necessarily photos), and the gallery icon should be something like the image icon with a stack behind it.
  • @lessbloat is going to experiment with what can be done to make TinyMCE less intrusive in some formats where it’s not as much of a focal point, such as quote, audio, and video. Have warned him about what it means to re-initialize TinyMCE, but teeny mode seems that it would be ideal, and perhaps hide the Add Media button / move it into the TinyMCE toolbar instead, especially for the audio/video formats, so it doesn’t confuse the user as to what they should be using for which.
  • Title should be somehow de-emphasized for some formats: aside, status, and image come to mind. A toggle to edit comes to mind, maybe like the way permalink slugs are edited. Titles need to be filled in based on content for those formats, a la P2P2 A free theme for WordPress, known for front-end posting, used by WordPress for development updates and project management. See our main development blog and other workgroup blogs.. Might be nice to try to do something smart with image, like detecting an alt or title attribute for the fill-in, but at the very least, something better than (no title) or Auto Draft. This is less important for a second commit, but needs a body.
  • Audio and video should have inline previews, whether it’s of oEmbed response, rendered HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. (sanitized per user cap, of course), or a media library item. We should hook up the media modal if possible, especially with the insert from URLURL A specific web address of a website or web page on the Internet, such as a website’s URL panel. Related: #15490 (see farther below for more details on the ticket). Needs a body or bodies.
  • Screen option: no longer sure we actually need this with the less obtrusive dropdown for format selection, but if we keep it, it should just hide the switcher.
  • No-JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors.: probably means a select dropdown (which should be the non-visible input that is changing with JS on) with a submit button next to it that saves a draft with that format, which will thereby change the screen once it loads again. Not sure what that means for a published post, though. Ideas about execution in that regard are very welcome. Needs a body or bodies.
  • AccessibilityAccessibility Accessibility (commonly shortened to a11y) refers to the design of products, devices, services, or environments for people with disabilities. The concept of accessible design ensures both “direct access” (i.e. unassisted) and “indirect access” meaning compatibility with a person’s assistive technology (for example, computer screen readers). ( need to check on ordering when tabbing through fields and make sure things like labels are done correctly. Also should make sure the switcher is accessible. Needs a body or bodies.

Other tickets and tasks:

  • #23198 – TinyMCE class. @azaozz said he will take a look and get it polished and committed. Looking for it to be there on init as well as dynamically changing with the format. Hooray for editor styles 🙂
  • #16047 – list table display/filtering. Once we have icons, we should drop those into place next to the post title, with each icon linking to filterFilter Filters are one of the two types of Hooks They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. the list table down to that format, and lose the column that was added. “Standard” (the pin) should not show.
  • #23539 – previewing. Format should be dealt with the way categoryCategory The 'category' taxonomy lets you group posts / content together that share a common bond. Categories are pre-defined and broad ranging. is (taxonomyTaxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format.; formats with meta fields are trickier to deal with given that post meta is not stored separately for revisionsRevisions The WordPress revisions system stores a record of each saved draft or published update. The revision system allows you to see what changes were made in each revision by dragging a slider (or using the Next/Previous buttons). The display indicates what has changed in each revision.. Not sure where this stands.

Bonus: @ryelle is working on a dashboard widgetWidget A WordPress Widget is a small block that performs a specific function. You can add these widgets in sidebars also known as widget-ready areas on your web page. WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. for one-click entry into writing a post in a given format, which should help with discoverability. Have suggested that work on this be done as a pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the Plugin Directory or can be cost-based plugin from a third-party for a couple reasons – so patches don’t go stale and so that if it doesn’t quite make it to coreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress. for one reason or another (whether that’s functionality or decision that it’s not for core), it’s available as something usable for those who want it and/or for user testing and data collection.


  • #23347 — Theme fallback output. We need to remove gallery and image fallbacks along with removing them as separate meta. This needs some more work regarding more/excerpts and probably pagination as well – see for more details. Seems that placement before/after needs to be different per different formats – link should default to after as it is now, but audio, video, and quote should probably be before the_content. Needs a body.
  • #23282 – HTML5 audio / video and #23673 — video / audio metadata. These need to drop in together, and we should do it soon and let it soak. We can test patches all day, but nothing beats getting it into trunktrunk A directory in Subversion containing the latest development code in preparation for the next major release cycle. If you are running "trunk", then you are on the latest revision. for a wider audience and set of environments. There are concerns about needing jQuery on the front, but in the last dev chat we decided to at least drop it in and let it soak. Needs lead dev eye and blessing for commit ASAP, please.
  • #23726 — Show Audio and Video previews on Edit Attachment screen. Pretty much comes with the above.
  • Provided that the link and quote formats continue to use a separate field for URL, they should probably be added to the pingbackPingback A pingback is a special type of comment that's created when you link to another blog post, as long as the other blog is set to accept pingbacks. Pingback allows you to notify other bloggers that you have linked to their article on your website. Although there are some minor technical differences, a trackback is basically the same thing as a pingback. URLs. See #18506.
  • Meta doesn’t delete, because it’s not passed in $_POST if empty. Likely not a particularly complicated fix.


Tracking ticket: #23725

So many thanks to @wonderboymusic for leading the charge here. These need a commit very soon so that Twenty Thirteen can move on with practical usage. The biggest use cases are going to be image and gallery formats, as well as new theme, old data. Parsing functions will be available for use by devs, and in core should be used as fallbacks in the get_post_format_meta() function.

  • #22960 — Extract images from content, attached to post, gallery, or arbitrary string. Has unit tests and patchpatch A special text file that describes changes to code, by identifying the files and lines which are added, removed, and altered. It may also be referred to as a diff. A patch can be applied to a codebase for testing.. Needs testing and a lead dev eye and blessing.
  • #23570 — Extract a URL from an arbitrary string, HTML, or the current $post. Has unit tests and patch. Needs testing and a lead dev eye and blessing.
  • #23572 — Parse Audio / Video data out of arbitrary content or a post. Has patch, needs unit tests. Needs #23282 to go in first.
  • #23625 — Parse chat as structured data. Has patch and unit tests, but needs to be scaled back and just allow for added formats (regex patterns) via plugins. Suggest that it just be split by lines, ignoring empties, with anything before the first colon becoming the label for that line (screen name, speaker, whatever you want to call it).


  • Will need screen help text, possibly/probably its own panel. If we keep the screen option for post formats, would be smart to hide the panel if toggled off.
  • Codex will need attention. I know of Seems that user documentation needs to be separated from theme dev documentation.

Otherwise related

  • #15490 – oEmbed preview for insert from URL in media modal. We found in user testing that users go back to this panel for all sorts of things, including YouTube URLs and the like. There’s a working patch from @jtsternberg that could use a little finessing. The Ajax action is probably going to be helpful with audio/video inline previews on the edit post screen.

#3-6, #post-formats