Gutenberg table block styling

  • Resolved Jasnick

    (@jasnick)


    2 years, 8 months ago

    I needed to color the background of certain rows in a table so I used the Code Editor and replaced <tr> with <tr style=”background-color:(#12345)”> to the table.
    This worked very well and looks great. However in the Editor, there is an error message: This block contains unexpected or invalid content. Attempt block recovery just wipes out the background color.
    Is it OK to leave it as it looks fine in the Front end.Have not yet done many sites with Gutenberg so still finding my way.
    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author htmgarcia

    (@htmgarcia)

    Hi @jasnick,
    modifying the HTML is not recommended due may break the block’s logic. To add a background color to a cell, please select the cell and choose a background color https://ibb.co/0q46cGp

    Regards

    Thread Starter Jasnick

    (@jasnick)

    Thank you htmgarcia

    I tried doing what you suggested but selecting a single cell resulted in the entire table changing background color.

    What about adding the Classic Editor plugin to the site and using that just to create a table. I tried that and I can color the text wherever a special color is needed, which would do. It does not throw up an error like the other one does.

    Then I can switch back to Gutenberg and convert the table to Blocks and the color seems to be retained.

    Plugin Support Riza Maulana Ardiyanto

    (@rizaardiyanto)

    Hi @jasnick

    Are you using “Advance Table” from PublishPress Block? Because when I tried on my end, I have 2 table blocks, “Table” from default Gutenberg, and yes when I change the background color there, it change all the table. But when I’m using “Advance Table” from PublishPress Block, it changes only single cell: https://i.imgur.com/SjzTbJx.png

    However, the Classic editor way also can be a workaround. You can use that method as well. As long as it works fine on live page, you can use it.

    Hope that helps.

    Thanks,

    Thread Starter Jasnick

    (@jasnick)

    Thanks Riza – no I was just using the ordinary Gutenberg table.

    Using the Classic Editor then converting it to a block worked well.

    I will definitely have a look at the Advanced Table you mentioned.

    Plugin Support Riza Maulana Ardiyanto

    (@rizaardiyanto)

    Sure no worries.

    You can post here if you still have any issue, and I will try my best to help ??

    Best,

    Thread Starter Jasnick

    (@jasnick)

    Thank you Riza – much appreciated!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Gutenberg table block styling’ is closed to new replies.