Not seeing option to customize border and radius in column block

  • viarachma · Member ·

    Hello!

    I’m trying to edit this page: https://viarachma.wordpress.com/genre/

    I want to make it so the columns have borders around it and maybe make the list text to be more in the center / not so close to the left border, but I can’t see the option at the block settings or anywhere else.

    I’ve tried reading the tutorial page regarding Columns Block, and apparently it’s part of individual column setting, but I still can’t find the border/radius setting even after I select any of the individual column.

    For additional information, when I select an individual column and goes to the block settings, I only see ‘Column settings’ that can change column width size, ‘Color’ to change text and background colors, ‘Typography’ to change text appearances etc, and ‘Advanced’ for HTML anchor and additional CSS.

    WP.com: Yes
    Correct account: Yes

    The blog I need help with is: (visible only to moderators and staff)

  • staff-heroponriki · Staff ·

    Thanks for reaching out!

    Looking into this, it looks like the volunteers that work on the open-source WordPress software opted to temporarily remove the border/border-radius support due to some issues with content clipping. You can see the comment on GitHub (where they work on the software) here:

    https://github.com/WordPress/gutenberg/issues/41345#issuecomment-1266422698

    Since it’s no longer an option, we’ll get our documentation for that block updated ASAP.

    Thanks again for letting us know!

  • delfrag · Member ·

    Hi there,
    Have you tried adding tables inside your columns?
    I think it will look more like what you are going for. If you want different colour columns you should add a 1 col table in each one of your columns.
    Hope this helps!

  • viarachma · Member ·

    @staff-heroponriki : I see… I hope the issues can be fixed soon!


    @delfrag     : I’d like to try your method, but I can’t find a way to move the list block into the table. Or are you suggesting that I turn the lists into single-column tables?

  • delfrag · Member ·

    Yes, I was suggesting that you create 3 single column tables and then you copy-paste your lists into these tables. This way you can customize every column with different background colours, like the ones you have. But can also have borders and centered headings and lists.

  • viarachma · Member ·

    @delfrag : I’ve tried turning the list into single-column table… but I don’t see option to customize the borders in the block settings either, even though the support page says it has the option for it… maybe it gets removed and the page haven’t get updated, just like with the Column Block?

    I want the borders to be transparent. Since the option isn’t available, do I have to use CSS to achieve this? Can you help me with more detailed explanation?

  • supernovia · Staff ·

    I haven’t worked with tables and blocks as much, but I like @delfrag’s idea. What about right-clicking on your list and choosing to group it? You’ll have borders that way.

    Then use List View to move your block where you want it:
    https://wordpress.com/support/wordpress-editor/use-list-view/

    I want the borders to be transparent. Since the option isn’t available, do I have to use CSS to achieve this?

    Completely transparent? If so, maybe padding or margins would be better. For partial transparency, no problem; just pick a color and go for it. Here’s a sample:

    <!-- wp:columns {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}}} -->
<div class="wp-block-columns" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}},"border":{"top":{"width":"0px","style":"none"},"right":{"color":"#0000008f"},"bottom":{"width":"0px","style":"none"},"left":{"width":"0px","style":"none"}}}} -->
<div class="wp-block-column" style="border-top-style:none;border-top-width:0px;border-right-color:#0000008f;border-bottom-style:none;border-bottom-width:0px;border-left-style:none;border-left-width:0px;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"border":{"radius":"33px","color":"#ffffff85","width":"11px","style":"dotted"}},"backgroundColor":"pale-cyan-blue","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-pale-cyan-blue-background-color has-background" style="border-color:#ffffff85;border-style:dotted;border-width:11px;border-radius:33px"><!-- wp:list -->
<ul><!-- wp:list-item -->
<li>something</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>another thing</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group --></div>
<!-- /wp:column -->

<!-- wp:column {"style":{"spacing":{"padding":{"top":"var:preset|spacing|30","right":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|30"}}}} -->
<div class="wp-block-column" style="padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--30);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--30)"><!-- wp:group {"style":{"border":{"radius":"33px","color":"#ffffff85","style":"dashed","width":"11px"}},"backgroundColor":"pale-pink","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-pale-pink-background-color has-background" style="border-color:#ffffff85;border-style:dashed;border-width:11px;border-radius:33px"><!-- wp:list -->
<ul><!-- wp:list-item -->
<li>something else</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>none of those things</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
  • viarachma · Member ·

    @supernovia : I decided to use your code, thank you! But I still have a little problem: how can I change the column’s color?

    I do realize that the code has “backgroundColor”:”pale-cyan-blue” “backgroundColor”:”pale-pink” and a few more that indicate different colors, but when I try to change it to other colors, it’s not reflected in the page. Maybe it’s because I don’t know the code for the colors I want. But in that case, how do I find out the codes for other colors?

  • supernovia · Staff ·

    Hi! Hah, sorry for the kinda wild settings — I always get a little funky when I’m experimenting with pushing the limits of our tools.

    So, if you copy the code, you should be able to just paste it while using the non-code view. Then use List View to navigate to the part you want to change:
    https://wordpress.com/support/wordpress-editor/use-list-view/

    And you’ll have all of the colors, border settings, etc to work with as you’d like. Mine looks like this. The settings are applied at the group level:

    screenshot of the settings for changing colors

    Does that help?

  • viarachma · Member ·

    @supernovia : My block setting doesn’t look like yours (it doesn’t have option to change Link color, no Dimensions options, etc), but well, I managed to change the colors!

    Thank you very much, and thank you to other users who have replied as well. I’ll update this topic as resolved.

  • The topic ‘Not seeing option to customize border and radius in column block’ is closed to new replies.