Issue #2957Opened August 13, 2020by jayeshmotwani0 reactions

BUG: Unable to add <table> tag for custom block

Question

Hi, I am trying to create a custom countdown timer block. The code is as follows:

block_manager.add('custom-countdown', {
        label: `My Label`,
        category: 'Category',
        attributes: {
            title: 'Countdown Timer',
            class: 'custom-timer',
        },
        content: ` <div class="countdown">
                        <table>
                            <tr>
                                <td>
                                    <div id="days" style="border-radius: 50%; border: 2px solid #2f2f2f; padding: 10px; margin:2px; font-size: 28px">00</div>
                                    <br/>
                                    <div style="font-size: 12px; color: #616161; text-align: center;">DAYS</div>
                                </td>
                                <td>
                                    <div id="hours" style="border-radius: 50%; border: 2px solid #2f2f2f; padding: 10px; margin:2px; font-size: 28px">00</div>
                                    <br/>
                                    <div style="font-size: 12px; color: #616161; text-align: center;">HRS</div>
                                </td>
                                <td>
                                    <div id="minutes" style="border-radius: 50%; border: 2px solid #2f2f2f; padding: 10px; margin:2px; font-size: 28px">00</div>
                                    <br/>
                                    <div style="font-size: 12px; color: #616161; text-align: center;">MIN</div>
                                </td>
                                <td>
                                    <div id="seconds" style="border-radius: 50%; border: 2px solid #2f2f2f; padding: 10px; margin:2px; font-size: 28px">00</div>
                                    <br/>
                                    <div style="font-size: 12px; color: #616161; text-align: center;">SEC</div>
                                </td>
                            </tr>

                        </table>
                    </div>`,
    });

I am adding content inside 'table' tag. The moment I drag and drop the block I get an error - Uncaught TypeError: t.get is not a function. Please refer the below screenshot:

image

But, It works again If I make any changes on editor. Refer the video: https://drive.google.com/file/d/1CNoXJihVnqj_3wzQybT6k0JqVCH7ESx2/view

Thanks for your help.

Answers (1)

artfAugust 27, 20200 reactions

As you can see the error is triggered from grapesjs-plugin-social, so not related to the core. One only thing I can suggest is to use tbody tag inside your table

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.