Teft Cards

Description

Teft Cards is a Gutenberg module that adds the a simple card grid to client projects.

Theme block styles

The theme block includes two “Block Styles” - Light and Dark. You can switch between them by clicking “Change block type or style” up in the top left corner.

If you don’t want all included styles you can unregister them by using JavaScript:

wp.blocks.unregisterBlockStyle( 'teft/cards-theme', 'light' );
wp.blocks.unregisterBlockStyle( 'teft/cards-theme', 'dark' );

The same way you can unregister styles you can add you own:

wp.blocks.registerBlockStyle( 'teft/cards-theme', {
	name: 'fancy',
	label: 'Fancy'
} );

See block style variations documentation for more info.

Change default card type

If you want to run a different default card you have the option to change this.

add_filter( 'teft/cards/default_card_type', function() {
	return 'my-custom-default-card';
} );

Shadow

Shadow on cards can be disabled with the filter render_card_shadow.

add_filter( 'render_card_shadow', '__return_false' );

Post selector post types

Select what post types to show in the post selector.

add_filter( 'teft/cards/post_selector/post_types', function() {
	return [ 'post', 'page' ];
} );

Post selector multisite search

Enable the multisite search (extended search query) – you still need to use the hook below, teft/cards/extend_post_selector_results as well (or similar) to implement the multisite search logic.

add_filter( 'teft/cards/post_selector/multisite_search', '__return_true' );

Extending the post selector results with secondary queries

If you want to extend the results returned by the post selector – for example, if you also want the user to have access to tagged posts from another blog on the multisite – you can use the following filter:

add_filter( 'teft/cards/extend_post_selector_results', function( array $posts, array $query_args, string $class_name ) {
	$main_site_id = get_main_site_id(); // we want the template part from the main site.
	if ( get_current_blog_id() === $main_site_id ) {
		return $posts; // we don't want to re-add posts for the main site, so we just return the original result set.
	}
	switch_to_blog( $main_site_id );
	// if you need to modify the query, ie. to search for specific tagged posts, do that here.
	$main_site_posts = ( new \WP_Query( $query_args ) )->posts;
	if ( ! empty( $main_site_posts ) ) {
		foreach ( $main_site_posts as $main_site_post ) {
			$main_site_post->blog_id = $main_site_id;
			$posts[]                 = $main_site_post;
		}
	}
	restore_current_blog();
	return $posts;
}, 10, 3 );

Variations

The theme block includes three “Variations” (Heading with text and grid, Heading with grid, Grid only).

You can register more (or deregister the default ones) using the variations API.

Adding custom blocks to the Cards Grid

You can create custom blocks to insert into the grid. To add them to the allowed blocks list use the filter teft/cards/grid/allowed_blocks.

add_filter( 'teft/cards/grid/allowed_blocks', function() {
	return [ 'my-awesome/block' ];
} );

The custom blocks are responsible to set number of columns/rows.

Change allowed grid sizes

wp.hooks.addFilter( 'teft.cards.allowedSizes', 'myTheme', function() {
	return [ 3, 4, 6 ];
} );

Add rows controls

To add the rows controls the theme need to define what column sizes the row options should be allowed on.

add_filter( 'teft/cards/allow_rows_on_columns', function() {
	// Allow to define rows on 8 columns (66%).
	return [ 8 ];
} );

Remove meta field

wp.plugins.unregisterPlugin( 'teft-cards-meta-image' );
wp.plugins.unregisterPlugin( 'teft-cards-meta-title' );
wp.plugins.unregisterPlugin( 'teft-cards-meta-excerpt' );

Register fields in Cards sidebar panel

import { registerPlugin } from '@wordpress/plugins';
import { Fill } from '@wordpress/components';

registerPlugin( 'my-cards-meta-plugin-name', {
	render() {
		return (
			<Fill name="teft-cards-meta">
				My field
			</Fill>
		);
	},
} );

Modify the blocks (templates) displayed when creating a custom card

wp.hooks.addFilter( 'teft.customCards.allowedBlocks', 'myTheme', function(allowedCustomCardBlocks) {
	allowedCustomCardBlocks.push('my-new-block');
	return allowedCustomCardBlocks;
}, 1 );

Adding custom block templates

1. If you have not already, enable custom cards by adding this in your theme.

   // Enable custom cards functionality.
   define( 'TEFT_CARDS_CUSTOM', true );
   

2. Create your new gutenberg block as normal.
3. In mu-plugins/dekode/blocks/blocks.php or similar, add this PHP filter to make custom cards recognize your new block.

   function filter_allowed_custom_card_blocks( array $blocks ) : array {
    $new_blocks = [
        'teft-cards-custom-cards/my-new-block',
    ];
   
    return array_merge( $new_blocks, $blocks );
   }
   

4. In mu-plugins/dekode/blocks/src/index.js use the teft-custom-cards-allowed-blocks filter to add your block name to the array (or replace if needed.)

   const modifyAllowedCustomCardBlocks = ( allowedCustomCardBlocks ) => {
     allowedCustomCardBlocks.push('teft-cards-custom-cards/my-new-block');
     return allowedCustomCardBlocks;
   };
   wp.hooks.addFilter(
     'teft-custom-cards-allowed-blocks',
     'dekode/filter-custom-card-block',
     modifyAllowedCustomCardBlocks
   );