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
.
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