WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 8 months ago

Last modified 8 months ago

#37960 closed enhancement (wontfix)

Support for selecting radio buttons in media views

Reported by: Enchiridion Owned by: joemcgill
Milestone: Priority: normal
Severity: normal Version:
Component: Gallery Keywords: has-patch
Focuses: javascript, administration Cc:
PR Number:

Description

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 3 years ago.
37960.2.patch (1.2 KB) - added by joemcgill 3 years ago.
37960.css.patch (1.2 KB) - added by Enchiridion 3 years ago.

Download all attachments as: .zip

Change History (10)

@Enchiridion
3 years ago

#1 @Enchiridion
3 years 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
3 years ago

  • Component changed from Gallery to Media
  • Version trunk deleted

@joemcgill
3 years ago

#3 follow-up: @joemcgill
3 years 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
3 years 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:

<?php
// Output custom media templates
add_action( 'print_media_templates', function () {
  ?>
  <script type="text/html" id="tmpl-vi-custom-gallery-settings">
    <div class="setting">
      <fieldset>
        <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>
      </fieldset>
    </div>
  </script>
  <?php
} );

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

#5 follow-up: @desrosj
8 months ago

  • Component changed from Media to Gallery
  • Keywords reporter-feedback removed
  • Milestone Awaiting Review deleted
  • Resolution set to wontfix
  • Status changed from reviewing to closed

@Enchiridion I am sorry that this ticket was neglected for so long.

A lot has changed in 3 years! There are a few newer developments that I think allow this to be closed out.

First, with the introduction of the new block editor, the Classic Editor experience is now in a holding pattern and no new enhancements are being added. I tested this in the new block editor and because the gallery modal is different, the radio buttons will no longer show up in the modal with your code snippet.

And secondly, the new recommended way to add a setting like this is to register a custom panel for the block with your settings. This would show your setting in the sidebar when a Gallery block is selected.

#6 in reply to: ↑ 5 @Enchiridion
8 months ago

@desrosj Thanks for taking a look at it. I'm starting to move to guten-blocks so this is no longer needed (I was monkey patching the fix in before to get radio button support).

#7 @desrosj
8 months ago

Thanks for the follow up, @Enchiridion! Much appreciated.

Note: See TracTickets for help on using tickets.