Filtering the output of generatepress button

GenerateBlocks
#1

I have a CPT for modals, and what I usually do is use an ACF button and then rewrite the url so that the permalink becomes a Fancybox url

So from this:

/modal

to

/#modal

I use this code:

$parts = wp_parse_url( $url );
    
    if( is_array( $parts ) && ! empty( $parts['path'] ) ) {
        
        $path = $parts['path'];

        if ( $_post = get_page_by_path( basename( untrailingslashit( $path ) ), OBJECT, 'modal' ) ) {
            $post_id = $_post->ID;
            $slug = sanitize_title_with_dashes( get_the_title( $post_id ) );
            if( is_array( $classes ) ) {
                $classes[] = 'modal-form';
            } else {
                  $classes .= ' modal-form'; 
            }
            
            $options = [
                'src' => '#' . $slug,
                'modal' => true,
                'baseClass' => "full-screen",
                'closeExisting' => true,
                'touch' => false,
                'hash' => false,
                'backFocus' => false
            ];
            $options = sprintf( "data-options='{%s}'", _parse_data_attribute( $options, ':', ', ' ) );
            
            $link = sprintf( ' data-fancybox %s href="javascript:;"', $options );
        }  
    }

Is there a filter for the output of the button?

Thanks.

#2

Hi @kylerumble,

You can try the render_block filter.

Reference: render_block() | Function | WordPress Developer Resources

#3

Thanks @fernandoazarcon2

Do you have anything more than that?

I’m looking for some examples.

If I have to I’ll just use plain old JS. But thought it be great to filter them.

#4

Solved! In case someone else needs this.

This shows you how to filter the button and add FancyBox attributes. I have a CPT for Modals, so I output those modals to the footer of the site, and then as i add links to the buttons as a modal permalink, I want it to be changed to the correct format.

This way the client can create and add an unlimited # of custom Modals with content.

function xml_attribute($object, $attribute)
{
    if(isset($object[$attribute]))
        return (string) $object[$attribute];
}

add_filter( 'render_block', function( $block_content, $block ) {
    if ( 'generateblocks/button' === $block['blockName'] ) {

        $xml = simplexml_load_string($block_content);
        
        $href = xml_attribute( $xml, 'href' );

        if( $href ) {
            $parts = wp_parse_url( $href );
    
            if( is_array( $parts ) && ! empty( $parts['path'] ) ) {
                
                $path = $parts['path'];
        
                if ( $_post = get_page_by_path( basename( untrailingslashit( $path ) ), OBJECT, 'modal' ) ) {
                    $post_id = $_post->ID;
                    $slug = sanitize_title_with_dashes( get_the_title( $post_id ) );
                } 
    
                $replace = sprintf( '<a data-fancybox="" data-src="#%s" data-touch="false" data-auto-focus="false" data-thumbs="false"', $slug );
    
                $block_content = str_replace( '<a ', $replace, $block_content );
    
                $block_content = str_replace( $href, '',  $block_content );
            }
        }        
    }

    return $block_content;
}, 10, 2 );
#5

You may also add ! empty( $block['attrs']['className'] ) && 'your-class-name' === $block['attrs']['className'] to your conditional statement so you may add your-class-name to the specific button you wish to use as a button for your modals. :slight_smile: