• Resolved Huan

    (@daodaotw)


    Have you tested the plugin with any block theme?

    No horizontal scrolling in both frontend and backend after checking “Enable horizontal scrolling…”.

    I used Chrome dev tool to inspect .dataTables_scroll and found no related styles. I suspect the block theme doesn’t load TablePress’s stylesheet.

    “TablePress table” block’s Wide width and Full width setting has no effect. Again I used dev tool to inspect .dataTables_wrapper and found no related styles.

    Generally, any style setting in a block theme doesn’t effect TablePress, frontend and backend.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Huan

    (@daodaotw)

    When I deactivated the plugin, the feedback field limits user’s input to one or two sentences. You don’t get detailed feedback from one or two sentences…

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi!

    Thanks for your post and sorry for the trouble!

    I’m not sure why the horizontal scrolling is not working for you, but very likely it’s not related to the block theme (very many TablePress users use these already). Can you please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

    As for the alignment: This needs small trick at the moment: Please wrap the “TablePress table” block in a “Group” block, and change the alignment for the Group block, and then also change the “Inner blocks use content width” setting for that block.

    Regards,
    Tobias

    Thread Starter Huan

    (@daodaotw)

    Thanks Tobias for your fast response. I tried your trick.

    This time I deactivated all plugins except TP, switched to Twenty Twenty-Four theme, and put TP block inside a Group block (both set to Wide width), all issues persisted unfortunately.

    (This time I imported a second WooCommerce Product CSV from another source into TP. My two TP table creation were through CSV import.)

    I’m in rapid development of my staging site (runs on PHP 8.1) so by the time you visit that page, plugins and theme may change…

    • This reply was modified 1 year ago by Huan.
    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    I’m not sure what to say here, but I can only make the offer ?? If you could post a link to the page with the table, I’ll be happy to take a look.

    I just created a test page at https://pinktoes.s4-tastewp.com/tablepress-test/, with Twenty Twenty-Four, a table which I placed inside a Group with “Wide” alignment, and for which I turned on Horizontal Scrolling, and that is working fine for me.

    Regards,
    Tobias

    Thread Starter Huan

    (@daodaotw)

    Thanks for your test page. It helped me locate the problem. Your Group block output different classes than mine.

    Your Group block:

    <div class="wp-block-group alignwide is-layout-flow wp-block-group-is-layout-flow">
    
    <!-- TP block -->
    
    <div id="tablepress-1_wrapper" class="dataTables_wrapper">
    
    <!-- the rest of TP -->
    
    </div>
    
    </div>

    My Group block:

    <div class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained">
        <!-- TP block -->
    	<div id="tablepress-1_wrapper" class="dataTables_wrapper">
            <!-- the rest of TP -->
        </div>
    
    </div>

    Therefore my .dataTables_wrapper is impacted by .is-layout-constrained , whereas its sibling is not (I put many WP core blocks right next to WP block, in the same Group block, for comparison):

    body .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: var(--wp--style--global--content-size);
        margin-left: auto !important;
        margin-right: auto !important;
    }

    Other WP core blocks comply with Group block’s alignment settings, whereas TP block doesn’t!

    Regarding horizontal scrolling, I changed to a different computer and I can see that overflow-x:auto; effect, whereas on my original computer it didn’t appear across my 3 browsers. I haven’t restarted the original computer for a while due to so many tabs are in use. My fault!

    • This reply was modified 1 year ago by Huan.
    • This reply was modified 1 year ago by Huan.
    Thread Starter Huan

    (@daodaotw)

    I just used WordPress Playground (2024 theme) to add a Group block. Here are the classes it output:

    class="wp-block-group alignwide has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"

    Your testing site’s Group block outputs the wrong classes, which can lead you to incorrectly configure TP…

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    just to be sure, did you turn OFF the setting “Inner blocks use content width” for the Group block that contains the table block? This setting is what influences these CSS classes (and it has nothing to do with TablePress itself).

    Best wishes,
    Tobias

    Thread Starter Huan

    (@daodaotw)

    Thanks Tobias, finally I got it right by wrapping TP block with a Group block, turning off Group block’s “Inner blocks use content width”, and setting alignment for Group block.

    Users (like me) may attempt to set alignment for TP block, which doesn’t work. Thank you again and hopefully there will be no Group block workaround in the future.

    • This reply was modified 1 year ago by Huan.
    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    yes, that’s exactly what I meant ?? Good to hear that it’s working now!

    I also hope to be able to allow making this setting directly on the table block, but it turns out this is a bit tricky, also due to backward compatibility reasons.

    Best wishes,
    Tobias

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘TablePress isn’t compatible with block theme yet’ is closed to new replies.