Make WordPress Core

Opened 22 months ago

Last modified 21 months ago

#37960 reviewing enhancement

Support for selecting radio buttons in media views

Reported by: Enchiridion Owned by: joemcgill
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords: has-patch reporter-feedback
Focuses: javascript, administration Cc:


While adding custom settings, using a set of radio buttons, to the Edit Gallery modal, I found that none of them were ever selected when the modal was opened, even though the other form fields were. Digging into the source I found there was no path for handling them.

This patch adds support for pre-selecting the appropriate radio button when a media-view is shown. Currently the function that does so only supports: selects, button-groups, text fields, and checkboxes.

Attachments (3)

37960.patch (593 bytes) - added by Enchiridion 22 months ago.
37960.2.patch (1.2 KB) - added by joemcgill 21 months ago.
37960.css.patch (1.2 KB) - added by Enchiridion 21 months ago.

Download all attachments as: .zip

Change History (7)

22 months ago

#1 @Enchiridion
22 months ago

  • Keywords has-patch added
  • Summary changed from Support for pre-selected radio buttons in media views to Support for selecting radio buttons in media views

#2 @afercia
22 months ago

  • Component changed from Gallery to Media
  • Version trunk deleted

21 months ago

#3 follow-up: @joemcgill
21 months ago

  • Keywords reporter-feedback added
  • Owner set to joemcgill
  • Status changed from new to reviewing

Hi @Enchiridion – thanks for the report and patch!

A small detail, wp-includes/js/media-views.js is built from several files in wp-includes/js/media/views/ using Browserify via the grunt browserify command. In this case, we also need to update /wp-includes/js/media/views/settings.js.

37960.2.patch applies the same change to both files.

@Enchiridion could you add a code snippet showing how you're adding the radio buttons so it's easier for others to test?

#4 in reply to: ↑ 3 @Enchiridion
21 months ago

Ah, thanks, didn't realize it was a built up file.

I've attached an additional patch to update the CSS so the radio buttons display correctly. There was a tiny amount of existing CSS for radio buttons in the modals, but I couldn't find any instances of radio buttons in actual use anywhere to make sure my changes didn't adversely affect anything.

Here are the snippets to add radio buttons to the modal for testing:

Add this to your theme/plugin:

// Output custom media templates
add_action( 'print_media_templates', function () {
  <script type="text/html" id="tmpl-vi-custom-gallery-settings">
    <div class="setting">
        <legend>Grid Layout</legend>
        <label><input type="radio" name="grid-layout" data-setting="grid-layout" value="2-up"><span>2-up</span></label>
        <label><input type="radio" name="grid-layout" data-setting="grid-layout" value="3-up"><span>3-up</span></label>
        <label><input type="radio" name="grid-layout" data-setting="grid-layout" value="masonry"><span>Masonry</span></label>
        <label><input type="radio" name="grid-layout" data-setting="grid-layout" value="full-width"><span>Full width</span></label>
} );

Run this Javascript on the admin side:

wp.media.view.Settings.Gallery = wp.media.view.Settings.Gallery.extend({
  render: function() {
    // Required for the base options to appear
    wp.media.view.Settings.prototype.render.apply( this, arguments );

    // Append the custom template after the title
    this.$el.find('> h2').after( wp.media.template( 'vi-custom-gallery-settings' ) );

    // Setup custom settings
    wp.media.gallery.defaults['grid-layout'] = '2-up';
    this.update.apply( this, ['grid-layout'] );

    return this;
Note: See TracTickets for help on using tickets.