Hook into container? (add custom html to container)

hi there,

fiddling around with an idea but without finding a solution…

idea:
create a ribbon in the corner of a (main) container with text and link.

the ribbon itself is ready to go and no problem, custom CSS with pseudoelements - the point where i am struggling is to attach the link properly or to align the ribbon to the bottom of the (main) container… there seems to be no opportunity to hook some html into the container itself to apply the link to the ribbon.

culprits:
the container is set at defined height, content with blocks (headline, text, button) is set to center(*) within and padding around. so an inner html block wont work beause the ribbon wont align to the corner (naturally), due to the auto generated inside container around the content.

(* no probs if vertical alignment of container content set to bottom - but thats not possible designwise :slightly_smiling_face:)

so the question is actually:
am i overlooking something or is there no way currently to inject some html to the container itself so far?
custom css class is clear - but thats no solution for the ribbon link …

hope the intention is clear… fiddling on staging, so sadly no link at the moment :confused:

It’s definitely possible using filters. For example, this filter: generateblocks_after_container_open

However, you’d need to extend the Container block to have your own custom attributes, or else your code will be inserted into every single Container block on your site.

For example:

add_filter( 'generateblocks_after_container_open', function( $output, $attributes ) {
    if ( ! empty( $attributes['my_attribute'] ) ) {
        return '<div class="my-element"></div>' . $output;
    }

    return $output;
}, 10, 2 );

ahhhh - confusion overdose :wink:

seemingly too much php involved currently for my limited knowledge. havent dealt with cust attributes before anyway. out of the box this part generates some amount of questionmarks in my eyes… seems like one has to define those attributes first before being able to proceed.

any practical example available for this by chance?

1 Like

Hi Tom,

any further information on this would be really useful!

For example, I would like to insert some social sharing php into my opening generateblocks container on posts. As you said, using the above inserts it into each container.

Could you elaborate on your above example or possibly point me in the right direction please? I’m assuming that the GB container would be given the class “my-element”?

Thanks

Basically, the filter is there and exists in every single Container block. However, to target a specific Container block, we need something unique to check in that block.

We could use the uniqueId attribute, but sometimes that can regenerate due to how Gutenberg works.

Adding your own attribute is the best way, but definitely kind of complex.

Another way would be to check for a class. For example, if I give my Container a class of hooked-container, I could then do this:

add_filter( 'generateblocks_after_container_open', function( $output, $attributes ) {
    if ( ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'hooked-container' ) !== false ) {
        return '<div class="my-element"></div>' . $output;
    }

    return $output;
}, 10, 2 );
1 Like

thanks tom.
appreciate this second option and avoiding the attributes thing.

basically it does work. basically, as it seems this generates a dom element just before the targeted container div.
so i can give the ribbon its link, but the ribbon is placed outside of the container - not inside.
possibly some fault on my side or maybe the wrong filter?

added the filter with the ‘hooked-container’ class, placed the link and the ribbon class inside the output part, applied the ‘hooked-container’ class to the container.
this gives me the linked ribbon - but sadly outside of the container.

so wheres the error?