Jeremy

Ok. It should to be really quick to implement and will improve SEO for a lot of people.
I really hope it will be included in the near future.

SEO is a priority for the site I’m working on, and I will have to use remove MetaSlider plugin, even though I really appreciate it.

So, could you please keep me updated on this ? I’m really looking forward to using MetaSlider again !

Thanks !
Jeremy

So sorry if I haven’t been clear enough, I wanted to be concise, but obviously too much.

WP Grid Builder (WPGB) is displaying a list of “WPGB Cards” into a “WPGB Grid” that is filtered with some “WPGB Facets”. It provides some Gutenberg blocks and shortcodes. If you display a “WPGB Grid” block, it will automatically display the recipes “WPGB Cards” (so I don’t need to loop through all the posts to display them).

When you click on a filter, it dynamically change the URL without reloading the page, and displays the results accordingly. For example, if you select chocolate from a taxonomy called ingredients : website.com/recipes/?_ingredients=chocolate.
That way, if I type this URL in my browser, I’m landing on the page already filtered with chocolate recipes.
With the second solution I tried (using GenerateBlocks Element), the URL in my browser is not changing, and if I try to type the filtered URL, results are not filtered.

The other approach I tried was to create a custom archive-recipe.php, remove the post loop (because “WPGB Grid” will automatically display all the “WPGB Cards”), and display the content of a page (by getting the_post and apply the_content). That way, I don’t have to write the PHP file, and I can design everything with Gutenberg.

For the record, here is my archive-recipe.php:

<?php
/**
 * The template for displaying Archive pages.
 *
 * @package GeneratePress
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

get_header(); ?>

	<div id="primary" <?php generate_do_element_classes( 'content' ); ?>>
		<main id="main" <?php generate_do_element_classes( 'main' ); ?>>
			<?php
			/**
			 * generate_before_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_before_main_content' );

			if ( generate_has_default_loop() ) {
				if ( have_posts() ) :

					/**
					 * generate_archive_title hook.
					 *
					 * @since 0.1
					 *
					 * @hooked generate_archive_title - 10
					 */
					do_action( 'generate_archive_title' );

                    /* Retrieve ID of the page to render */
                    $id = intval( get_option( 'page_for_recipes' ) ); 
                    $post = get_post($id); 
                    $content = apply_filters('the_content', $post->post_content); 
                    echo $content;

				else :

					generate_do_template_part( 'none' );

				endif;
			}

			/**
			 * generate_after_main_content hook.
			 *
			 * @since 0.1
			 */
			do_action( 'generate_after_main_content' );
			?>
		</main>
	</div>

	<?php
	/**
	 * generate_after_primary_content_area hook.
	 *
	 * @since 2.0
	 */
	do_action( 'generate_after_primary_content_area' );

	generate_construct_sidebars();

	get_footer();

I can design the page on the backend, with Gutenberg and GB, without adding any custom CSS classes to my blocks : everything is rendered fine.
But when I go to my archive page on the frontend, GB items are broken. For example, GenerateBlocks buttons are rendered as text. If I check the HTML, I can see that gb-button and gb-button-wrapper classes are there, but that GB CSS classes are not loaded. That’s why it is broken.

I hope what I want to do and what I’m facing is clearer.
It’s hard for me to provide a link to the page I’m designing. But if you really need it, just let me know, and I make the configuration you want.

Thanks for your help.

Yes I have. But actually, I think I tried to isolate the problem too much, and I’ve hidden the issue… my bad.

My ultimate goal is to display a table of content (that’s why I’ve first added anchors on headings). So for this, I’m using a shortcode that is calling a function.
I think the problem is that, at the beginning of my function, I get the content like so :

global $post;
$original_content = $post->post_content;

Is there anything I do wrong ?
It is obviously something wrong in my code, but my table of content works fine for content outside of the WPRM Recipe block.

Just in case, here is the page I need help with, and here is the complete code in functions.php:

function replace_ca($matches){
  return '<h'.$matches[1].$matches[2].' id="'.sanitize_title($matches[3]).'">'.$matches[3].'</h'.$matches[4].'>';
}
 
add_filter('the_content', 'add_anchor_to_title', 99);
function add_anchor_to_title($content){   
  if(is_singular('post')){
    global $post;
    $pattern = "/<h([2-4])(.*?)>(.*?)<\/h([2-4])>/i";
    
    $content = preg_replace_callback($pattern, 'replace_ca', $content);
    return $content;
  }else{
    return $content;
  }
}

function generate_toc(){
  global $post;
  $obj = '<div class="php-toc"><h2>Table des matières</h2><nav>';
  $original_content = $post->post_content;
  
  $patt = "/<h([2-4])(.*?)>(.*?)<\/h([2-4])>/i";
  preg_match_all($patt, $original_content, $results);

  $lvl1 = 0;
  $lvl2 = 0;
  $lvl3 = 0;

  foreach ($results[3] as $k=> $r) {
    switch($results[1][$k]){
      case 2:
        $lvl1++;
        $niveau = '<span class="title_lvl">'.$lvl1.'/ </span>';
        $lvl2 = 0;
        $lvl3 = 0;
        break;

      case 3:
        $lvl2++;
        $niveau = '<span class="title_lvl">'.base_convert(($lvl2+9),10,36).'. </span>';
		if ($lvl3 != 0)
			$obj .= '</ul>';
        $lvl3 = 0;
        break;

      case 4:
        $lvl3++;
		if ($lvl3 == 1)
			$obj .= '<ul>';
        $niveau = '';
        break;
    }

	if ($lvl3 != 0)  
		$obj .= '<li>';
	  
    $obj .= '<a href="#'.sanitize_title($r).'" class="title_lvl'.$results[1][$k].'">'.$niveau.$r.'</a></br>';
	
	if ($lvl3 != 0)  
		$obj .= '</li>';
  }

  $obj .= '</nav></div>';
  return $obj;
}

add_shortcode('table-of-content','generate_toc');

You’ll want to use an !important flag to override

Obviously … Thanks

I can look into a more elegant solution to build into the template editor.

That would be really great and useful for lot of people I guess since buttons almost always have hover effects.

Meanwhile, for people who would like to do the same, here’s how I did it (maybe not the prettiest way, I’m still a beginner):

HTML:
<span class="wprm-pv-button">[the shortcode you want to use]</span>

CSS :

.wprm-pv-button a,
.wprm-pv-button a path,
.wprm-pv-button .wprm-recipe-servings-change {
	transition: .2s background-color ease-in-out, 
    			.2s color ease-in-out, 
    			.2s border-color ease-in-out, 
                .2s opacity ease-in-out, 
                .2s box-shadow ease-in-out,
                .2S fill ease-in-out;
}
.wprm-pv-button a:hover,
.wprm-pv-button a:hover path,
.wprm-pv-button .wprm-recipe-servings-change:hover {
	background-color: #7ccbb0 !important;
    color: #44444B !important;
    fill: #44444B !important;
}

I agree that the transition would overload the UI.

However, I think two more color fields for hover would not make it too complex, but would be used by most people because almost every button on the web has some hover styling.