How do I make inline blocks? - ThisIs... Full Site Editing

header

Question: There’s an inline image. How do I make other blocks inline?

Answer: Try setting display: flex on a group block.

Meta data with labels

Here’s the post-meta-inline template part that we want to display inline.

Meta data as an inline block

Here’s some inline CSS which targets the template part copied from above, where the template part has an HTML element of <aside> and additional CSS class(es) of flex.

Inline CSS prototyping use of display:flex.

aside.flex p, aside.flex div, aside.flex.div a { display: flex; flex-wrap:wrap; align-content: center; justify-content: space-between; }

It’s nearly OK, but the spacing around the vertical bar between each of the tags has been lost.

Observations:

Horizontal menus and buttons display blocks inline using CSS flex.

It may also be possible to use display: grid, but that might be better suited to displaying tabular output.

References

Allow post meta to be arranged inline https://github.com/WordPress/gutenberg/issues/26899