Gutenberg Columns Block … Change HTML Output

  • Resolved Andy Mercer

    (@kelderic)


    6 years, 1 month ago

    Hi there!

    I’m finally pulling the trigger and trying to update my custom theme to use Gutenberg. I implemented columns using a custom TinyMCE addition a long time ago, and the theme uses the following HTML on the front-end to output the cols:

    
<column-set>
	<column class="two-thirds">
	</column>
	<column class="one-third">
	</column>
</column-set>

    Question 1:

    I don’t see a way to specify non-consistent sizes. IE, 2/3rds and 1/3rd.

    Question 2:

    How do I filter the output? It looks like it’s outputting <divs> with “wp-block-column” as the column. I need to change the tagname and classes.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    6 years, 1 month ago

    You ought to be able to target the column element widths with CSS using :first-child and :last-child pseudo-selectors to apply different widths even if there is no other distinguishing attribute of one element or the other.

    You can still filter output through “the_content” filter. Since the block editor is JavaScript based, there may be a way to more directly alter output by overriding something in the editor code, but I could not tell you how that might be accomplished. I just know JS code in general can be overridden.

    Thread Starter Andy Mercer

    (@kelderic)

    6 years, 1 month ago

    The answer to this is that it’s not really feasible. To work around it, I’ve created my own multi-column page section block.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Gutenberg Columns Block … Change HTML Output’ is closed to new replies.