Enlighter disappeared within Attire tab after upgrade

check your page html source if the Enlighter code still appears, also check the browser console for js error.

generally you should contact the authors of the tab plugin since the Enlighter plugin doesn’t changed anything in the last few weeks.

Wow – what a fast response! Thank you!

I can put Enlighter code outside of a tab on the same page and it shows fine. There are no console messages, and view source reveals what I would expect. I will also raise this with Attire Blocks.

Here is a page with the issue: https://pointw.com/sending-an-email/ (if you get a chance to peek and see if there’s something obvious I’m missing)

the highlighted code is there but “hidden” by the tab plugin – it’s not an Enlighter issues, sry!

easy solution: use Enlighter codegroups to display the tab

Cool! TIL about codegroups. Well, I learned they exist but…

The only example I found in the docs is using shortcodes, right under the warning “never ever use shortcodes” in the Visual Editor ?? I see the codegroup widget in the menu, but it is not clear to me how to do what I am trying to. Can you link to a doc/tutorial/example that can help?

Thanks again for all your help!!

https://github.com/EnlighterJS/documentation/blob/master/editing/TinyMCE.md#codegroups

Sorry to press…

I’m using WordPress 5.6.2. I create posts with the out-of-the-box block editor (Gutenberg). When I add a Enlighter block, there is a Codegroups widget in the settings panel. Setting its Title and Group Identifier, it created a tab with the Title. So far so good. But how do I add a second Codegroup? If I create a separate block, it creates a separate tab, not side by side as in the animated gif you linked to.

If instead of the above, I add a Classic block, then it looks closer to the gif (but not exactly). I add both code snippets, assign one codegroup to one snippet, and a second to the other. But now the two groups are stacked on top of each other – not side by side as in the animated gif.

I tried installing Advanced TinyMCE and the end result was identical to the Classic block.

This is almost certainly not a Enlighter problem – it’s the fact that I’m new to WordPress and am wrapping my head around Gutenberg vs TinyMCE… I feel tantalizingly close here – what am I missing?

I should note, I also tried copy/pasting the following example into a shortcodes block – without success:

[codegroup]
  [js tab="""""Javascript"""" language=""""Message"""""]
  window.addEvent('domready', function(){
    // display string on console
    console.info('Hello Enlighter');
    
    // show element
    $('#myelement').show();
  });	
  [/js]
  
  [html]
  <div id="myelement">
  INITIALIZATION START
  </div>
  [/html]
  
  [css tab="""""Styling"""""]
  #myelement{
    color: #cc2222;
    padding: 15px;
    font-size: 20px;
    text-align: center;		
  }		
  [/css]	
[/codegroup]

(this forum is transforming the code sample. What I copy/pasted is from one of the examples in the docs)

• This reply was modified 4 years ago by biscuit314.
• This reply was modified 4 years ago by biscuit314.

the grouping is done by the name, just add regular Enlighter codeblocks using the same group name.

Okay. I got it now.

What wasn’t clear before is each tab is in its own block, and Enlighter pulls it all together by group name. I thought each tab was a codegroup requiring its own name and title. I can be taught… thank you for your time, amazingly fast responsiveness, and patience.