TinyMCE - Add class to OL - selector doesn't seem to get parent OL,UL, just LI's (4.6.3)

Question

TLDR: I'm trying to add a class to an <ol>, and can't seem to do it without creating a nested list. Here's what I want:

<ol class="bold-numbers">
  <li>Item 1</li>
</ol>

Here's what I seem to be getting with all of these approaches below:

<ol>
  <li>
    <ol class="bold-numbers">
      <li>Item 1</li>
    </ol>
  </li>
</ol>

Custom Styles Approach

I followed this approach first, like in this question. These are the settings I'm using for the custom style. The style formats dropdown has also been added to the menu.

function bb_mce_before_init_insert_formats( $init_array ) {  
  $style_formats = array(  
    array(  
      'title' => 'Bold Numbers',
      'block' => 'ol',
      'classes' => 'bold-numbers',
      'wrapper' => true,
    )
  );
  $init_array['style_formats'] = json_encode( $style_formats );
  return $init_array;  
} 
add_filter( 'tiny_mce_before_init', 'bb_mce_before_init_insert_formats' );  

I then:

1. Create a numbered list.
2. Select all the list items
3. Select the custom style from the dropdown

This leaves me with markup like so:

<ol>
  <li style="list-style-type: none">
    <ol class="bold-numbers">
      <li>Lets try this again.</li>
      <li>With a new list, created from the first.</li>
      <li>Seems the spacing might be different between each line?</li>
    </ol>
  </li>
</ol>

So, yes, the class is being added, but how can I prevent the extra ol from being added?

Operation: Make Own Button

I then tried to just make my own button that tries to capture the selection, parse the HTML, add the class, then return it with a class added.

(function () {
  tinymce.create('tinymce.plugins.boldOL', {
    init: function (editor, url) {
      editor.addButton('boldOL', {
        title: 'Add ordered list with bold numbers',
        text: 'Bold Number List',
        icon: '',
        onclick: function () {
          var content = jQuery(editor.selection.getContent())[0];
          var wrap = document.createElement('div');
          content.classList.add('bold-numbers');
          wrap.appendChild(content);
          editor.selection.setContent( wrap.innerHTML );
        }
      });
    },
    createControl: function (n, cm) {
      return null;
    },
  });
  tinymce.PluginManager.add('boldOL', tinymce.plugins.boldOL);
})();

This was interesting because when I consoled out my selection, it was using ul instead of ol. But still just inserted it into a list item:

<ol>
  <li>
    <ul class="bold-numbers">
      <li>item here</li>
    <ul>
  </li>
</ol>

Shortcode??

As a last resort, I tried to create a button that would just add a shortcode div wrapper with the class. The 'button' ended up leaving me with the same problem, where the selection that tinymce captures is still contained within the parent ol and ul.

So for this I had:

<ol>
  [shortcode inserted here]
  <li>Items</li>
  [/shortcode]
<ol>

Any clues for how to make this happen?

Answer 1

I figured this out! I ended up running across this page today searching for something else and thought, THIS IS IT.

I needed this property 'selector', because it seems like that guides what the selection should be targeting so I changed 'block' => ol to 'selector' => 'ol'.

function bb_mce_before_init_insert_formats( $init_array ) {  
  $style_formats = array(  
    array(  
      'title' => 'Bold Numbers',
      'selector' => 'ol',
      'classes' => 'bold-numbers',
      'wrapper' => true,
    )
  );
  $init_array['style_formats'] = json_encode( $style_formats );
  return $init_array;  
} 
add_filter( 'tiny_mce_before_init', 'bb_mce_before_init_insert_formats' );