[Resolved] Inline dynamic data

[Gabriel]

How can I inline dynamic data into a sentence in a query template for either an archive content layout or GB query loop? The Headline block will replace all content with dynamic data. The acf shortcode seems to only work for single posts, not in loops.

Example: When? [date] Where? [location]

[Ying]

Hi there,

GB headline block has this inline width option built in, can you give it a try?
https://docs.generateblocks.com/article/headline-overview/#spacing

[Gabriel]

A step in the right direction but whitespace is added between the headline blocks on the same line. The whitespace is visible in the preview, not in the editor.

[Fernando]

Hi Gabriel,

Can you check if there’s a left or right margin/padding set for your Headline Blocks? If there is, try removing them.

[Gabriel]

There’s no padding or margin. The inline width headlines get the style display: inline-block;. Since there’s whitespace between the divs in the HTML the whitespace being rendered is kind of expected.

Added more details in private information.

[Fernando]

I see. How are you specifically getting the 60 min value?

[Gabriel]

It is dynamic data from a custom field mapped to a headline block.

[Ying]

It is dynamic data from a custom field mapped to a headline block.

The dynamic feature just pulls the data from the custom field, can you make sure there’s no extra space in the custom filed’s value?

[Gabriel]

There is no extra space in the custom field’s value. The extra space is only added in headline blocks. The acf shortcode adds no extra space, but sadly does not work in loops.

[Ying]

I inspected the HTML, there’s no space added:
https://www.screencast.com/t/M7MLcLEO0

If you want the 3 headline blocks to be closer visually, add -0.2em margin left and margin right to the headline block which represent the 60.

[Gabriel]

Your screencast is the HTML formatted in a tree structure, white whitespace between tags removed. If you use “View page source” instead you can see that there is whitespace between the tags. Elements with display: inline-block; will have whitespace between tags rendered, same as with display: inline;.

[Fernando]

Would adding a add-parenthesis to the class list of the Headline Blocks, and then adding this CSS work?:

.add-parenthesis:before {
    content:"(";
}

.add-parenthesis:after {
    content:")";
}

[Gabriel]

That could work but is a ugly workaround for this particular case only. If there is text on the same line it cannot be edited or translated by editors since it is hardcoded in the CSS.

Is the whitespace between tags when using inline width on headline blocks a bug or a feature?

[Fernando]

That’s the default behavior of inline-blocks in HTML. It’s not a bug in GP.

The other more common fix if you want inline-blocks to stick to one another is to set the font-size of the Container Block to 0. Then, set a font-size value to the Headline Blocks. This should work as well.

[Gabriel]

That workaround allows for editing at least but I lose my default typography settings since I set font-size to 0 on the parent.

I understand there is not intuitive solution to inline dynamic data in the middle of a sentence at this time. Consider this a feature request.

[Author]

Posts