Site icon Hip-Hop Website Design and Development

How to create Gutenberg patterns and patterns categories based on CPT posts and CPT terms?

I’ve created custom post type called ml_patterns and assigned custom post taxonomy called ml_patternsCustomTaxonomy.

What I want to do is create custom Gutenberg patterns and custom Gutenberg’s patterns categories based on CPT from above. So: pattern is ml_patterns POST, and pattern category is ml_patternsCustomTaxonomy TERM.

Code for patterns:

$args = array(  
    'post_type' => 'ml_patterns',
    'post_status' => 'publish',
    'posts_per_page' => 9999, 
    'orderby' => 'title', 
    'order' => 'ASC', 
);

$loop = new WP_Query( $args ); 

add_action( 'init', function() use ( $loop ) {
    while ( $loop->have_posts() ) : $loop->the_post();
        $title = __( get_the_title(), 'ml_patterns' ); // post's name is the title of the pattern (label)
        $titleSlug = 'ml_patterns/ml_pattern_'.get_the_ID(); // post's slug is the name of the pattern
        $patternContent = get_the_content(); // the post content as pattern content
        $patternsCategories = wp_get_post_terms($post->ID,'ml_patternsCustomTaxonomy',['fields'=>'slugs']);

        register_block_pattern(
            $titleSlug,
            array(
                'title'       => $title,    
                'content'     => trim($patternContent),
                'categories'  => $patternsCategories
            )
        );
    endwhile;
    wp_reset_postdata();
});

Code for patterns categories:

$patternsTerms = get_terms('ml_patternsCustomTaxonomy', array('hide_empty' => 0, 'parent' =>0));

foreach($patternsTerms as $patternTerm):

  $slug = $patternTerm->slug;
  $name = __( 'ML custom: ', $textdomain ).$patternTerm->name;

  register_block_pattern_category(
    $slug,
        array(
          'label' => $name,
      )
    );

endforeach;

Case:

Instead of several patterns categories based on terms, there is only one pattern category Uncategorised which event does not exist in ml_patternsCustomTaxonomy as term. This pattern category displays all pattern, even if they have different terms.

I’ve created two patterns and three terms:

and how it look like:


For check what’s the problem I’ve use code snippets from above on single page, and here’s the results:

Code for patterns:

echo 'Pattern title: '.$title;
echo '<br>';
echo 'Pattern slug: '.$titleSlug;
echo '<br>';
echo 'Categories array: ';
print_r( $patternsCategories );
echo '<hr>';

first post:
Pattern title: Another custom pattern
Pattern slug: ml_patterns/ml_pattern_14849
Categories array: Array ( [0] => pattern-category-1 [1] => pattern-category-3 )

second post:
Pattern title: Custom Pattern
Pattern slug: ml_patterns/ml_pattern_14846
Categories array: Array ( [0] => pattern-category-2 )

for patterns categories:

echo 'Category slug: '.$slug;
echo '<br>';
echo 'Category name: '.$name;
echo '<hr>';

first category:
Category slug: pattern-category-1
Category name: ML custom: Pattern category 1

second category:
Category slug: pattern-category-2
Category name: ML custom: Pattern category 2

third category:
Category slug: pattern-category-3
Category name: ML custom: Pattern category 3

so all looks good and if I create separately pattern and category, with hand-coded titles, slugs, categories etc, all works fine.

So, is this can be done in the way that I imagined?