Support » Developing with WordPress » text columns blocks

  • hello,
    I am quite new at WP
    I try to paste a text into a 2 columns block, but it seems that the text cannot flow automatically from 1st column to the 2nd aside : is that true ?
    do I have to manage it “manually” or is teher a way to do it properly (plugin, …?)
    thanks a lot !

Viewing 3 replies - 1 through 3 (of 3 total)
  • The column block is for making your own columns “manually”.
    If you want text in columns, you need different CSS, which is usually not part of the core styles, although it might be in your theme.
    If you really want this (you might not, since it is not always easy to read), you can define the CSS in the Customizer, and then add that class name to your content. You would probably need to use a Group block to get all the text you want and use the Advanced field to add the class name to the Group block.

    My theme uses CSS like this:

    .news-columns {
    	columns: 4 20em;
    	column-gap: 1.6em;
    	orphans: 2;
    }
    .news-columns:not(p) {
    	margin-bottom: 1em;
    }

    This makes up to four columns with a max of 20 ems, and it adjusts for window widths. See https://developer.mozilla.org/en-US/docs/Web/CSS/columns for all the details. You can add a line between columns using column-rule. https://developer.mozilla.org/en-US/docs/Web/CSS/column-rule

    Thread Starter raf58

    (@raf58)

    thanks a lot for this reply !
    I did create the CSS, but I do not know how to make it available
    I pasted your code in “appearance/customize/Additional CSS”
    if this is correct, where do I find the related “class name” ?
    should I create in the page 1st a Group block and then …

    I installed plugin “Blocks CSS: CSS Editor for Gutenberg Blocks” but does not help much.
    🙁

    • This reply was modified 1 month, 1 week ago by raf58.
    Joy

    (@joyously)

    Yes, the CSS goes in the Customizer > Additional CSS unless you’d rather use that plugin.
    The selector in that CSS is the class news-columns (the leading dot indicates a class name). When you are in the editor, select the block you want to affect and look at the sidebar for Advanced. Open that section and there is a place to add the class name (don’t put the dot, that’s for CSS only, and the editor deals with HTML). If you want to affect several paragraphs with the same columns, you need to select them all and choose Group from the toolbar. Then with the Group block selected, go to Advanced and put the class name. That would make the paragraphs go into columns, instead of each paragraphs having separate columns.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.