Gutenberg: How to float core table block in front-end of site?

  • Hi.

    In the editor, the core table block has a parent div, so it’s easy to float the table to the left or right. In the front-end of the site, this block doesn’t have a parent div, how can it be floated to the left & right in the front-end, please?

    In the editor there is a parent div and then the figure.

    .editor-styles-wrapper .wp-block[data-align=right] {
    position: relative;
}
.editor-styles-wrapper .wp-block {
    max-width: 1000px;
}
.wp-block[data-align=right]>* {
    float: right;
    margin-left: 2em 
}
      Editor code:
    <div class="wp-block" data-align="right">
  <figure id="block-f0"  data-type="core/table" data-title="Table" class="block-editor-block-list__block wp-block-table">

    In the front-end the core table block doesn’t output a parent div, so how can it be floated to the left or right, please?

    .entry-content > * {
  margin: 40px auto;
  max-width: 1000px;
  padding-left: 5px;
  padding-right: 5px;
}

<div class="entry-content">
 <figure class="wp-block-table alignright is-style-stripes">
    • This topic was modified 3 years, 5 months ago by Matthew Pollard.
    • This topic was modified 3 years, 5 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic
Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    If you give the table a class, it’s easier to manipulate:

    For example,

    figure.wp-block-table.floater {
    width: 80%;
    float: right;
    text-align: center;
}

    at https://bertha.sterndata.com/2021/10/07/the-table-block/

    Update: well, close but no cigar. Fixed on the “bertha” page, above. To get around needing to add a class to the succeeding paragraph to clear the float, it might make more sense to put that single table in a group block (thus providing a container).

    Thread Starter Matthew Pollard

    (@matthewpolld)

    Hi Steve,

    Thank-you for replying to my question, I really appreciate it.

    I think this approach would be quite confusing for my client? If my client floats a table block without putting it into a group block, the table will float in the editor, as it has a parent div there. If they look at the front-end of the site, the table block won’t be floated there, as the front-end doesn’t have a parent div.

    I think the editor & front-end should display the same? If the client has to float a table block in a group block for it to look the same in the editor & front-end, I think that is confusing for the client?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    Yes, I guess. If you’d like to see if this could be an enhancement, post an issue where the block editor devs hang out: https://github.com/WordPress/gutenberg

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Gutenberg: How to float core table block in front-end of site?’ is closed to new replies.

Tags