Tabs block not being detected properly.
See original GitHub issueHi,
I am doing some tests with the Tabs block and I noticed an issue.
When I drag and drop it in the canvas, this is the code I see when I inspect it.
<div data-gjs-type="tabs" data-highlightable="1" id="ivkdl" class="gjs-comp-selected">
<ul data-gjs-type="tabs-navigation" data-highlightable="1" role="tablist" class="nav nav-tabs" id="i145a">
<li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="i5mso"><a data-gjs-type="link" data-highlightable="1" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a></li>
<li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="iv1zw"><a data-gjs-type="link" data-highlightable="1" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a></li>
<li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="ie8bw"><a data-gjs-type="link" data-highlightable="1" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a></li>
</ul>
<div data-gjs-type="tabs-panes" data-highlightable="1" class="tab-content" id="idfrp">
<div data-gjs-type="tabs-tab-pane" data-highlightable="1" id="home" role="tabpanel" aria-labelledby="home-tab" class="tab-pane fade show active"></div>
<div data-gjs-type="tabs-tab-pane" data-highlightable="1" id="profile" role="tabpanel" aria-labelledby="profile-tab" class="tab-pane fade"></div>
<div data-gjs-type="tabs-tab-pane" data-highlightable="1" id="contact" role="tabpanel" aria-labelledby="contact-tab" class="tab-pane fade"></div>
</div>
</div>
When I call editor.getHtml(), I get the following:
<div id="ivkdl">
<ul role="tablist" class="nav nav-tabs">
<li class="nav-item"><a id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a></li>
<li class="nav-item"><a id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a></li>
<li class="nav-item"><a id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a></li>
</ul>
<div class="tab-content">
<div id="home" role="tabpanel" aria-labelledby="home-tab" class="tab-pane fade show active"></div>
<div id="profile" role="tabpanel" aria-labelledby="profile-tab" class="tab-pane fade"></div>
<div id="contact" role="tabpanel" aria-labelledby="contact-tab" class="tab-pane fade"></div>
</div>
</div>
When I pass that in the value configuration on my editor and wait for it to load.
I get the following code when I inspect the canvas again:
<div data-gjs-type="div" data-highlightable="1" id="ivkdl">
<ul data-gjs-type="tabs-navigation" data-highlightable="1" role="tablist" class="nav nav-tabs" id="insrq">
<li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="iofw8"><a data-gjs-type="link" data-highlightable="1" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true" class="nav-link active">Tab 1</a></li>
<li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="il57x"><a data-gjs-type="link" data-highlightable="1" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false" class="nav-link">Tab 2</a></li>
<li data-gjs-type="tabs-tab" data-highlightable="1" class="nav-item" id="i0w4h"><a data-gjs-type="link" data-highlightable="1" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false" class="nav-link">Tab 3</a></li>
</ul>
<div data-gjs-type="div" data-highlightable="1" class="tab-content" id="iqv49">
<div data-gjs-type="div" data-highlightable="1" id="home" role="tabpanel" aria-labelledby="home-tab" class="tab-pane fade show active"></div>
<div data-gjs-type="div" data-highlightable="1" id="profile" role="tabpanel" aria-labelledby="profile-tab" class="tab-pane fade"></div>
<div data-gjs-type="div" data-highlightable="1" id="contact" role="tabpanel" aria-labelledby="contact-tab" class="tab-pane fade"></div>
</div>
</div>
As you can see upon inspection, we seem to have lost the data-gjs-type tabs and tabs-panes and tabs-tabs-panes, they all have converted to div.
This causes an issue because when I want to edit the tabs again, I can no longer click on the tab to display the content for each tab itself.
I am not sure if you can reproduce this on your end?
Issue Analytics
- State:
- Created 5 years ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
Issues for Block Tabs | Drupal.org
Title Status Priority
View Arguments not working in Block Tabs Closed (fixed) Normal
Fix phpcs (Code Sniffer) coding standards Reviewed & tested by the community...
Read more >Tabs and indents settings does not work
Go to Settings and change indentation to Tab; Go back to file and press Enter so it creates new line (e.g. after opening...
Read more >Various issues in the gutenberg editor and the CSS of the ...
The Tab Block is very buggy and even after your update, it still doesnt fucntion properly. We have a lot of content made...
Read more >Tabs, panels, or other controls are missing from the ribbon in ...
One or more tabs, panels, or other controls do not show on the ribbon in AutoCAD.
Read more >Block or allow pop-ups in Chrome - Computer - Google Support
By default, Google Chrome blocks pop-ups from automatically showing up on your screen. When a pop-up is blocked, the address bar will be...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I saw your post in GrapesJS, hopefully we will get an answer.
Here is my post in regards to the ID changing, I was able to patch mine, but I hope they will give a better way to handle it.
https://github.com/artf/grapesjs/issues/1875
Hey! Let me check that out, I was going to resolve some tab issues today anyway.