WP_DEBUG

Notes about WordPress Gutenberg themes development.

.htaccess (1) ACF (7) admin (1) ajax (2) api (1) API interactivity (1) block (20) block_style (2) colors (2) constante (1) context (1) conventions (2) cron (1) css (5) custom post type (1) data (1) debug (2) define (1) file_API (1) functions.php (6) git (4) hook (7) i18n (2) js (2) layout (1) loop (1) media (1) media library (1) menu (2) navigation (1) patterns (1) performance (2) post (1) query (3) readmore (1) responsive (1) rest api (1) scss (1) security (7) spacing (1) sql (1) svg (1) taxonomy (1) theme (1) theme.json (11) typo (2) URL (1) wp-config.php (6) wp cli (3) wp function (7)

  • ACF field filter query

    # ,
    Read more

    Order by ACF field

    $the_query = new WP_Query(array(
    'post_type'         => 'event',
    'posts_per_page'    => -1,
    'meta_key'          => 'featured',
    'orderby'           => 'meta_value',
    'order'             => 'DESC'
));

    Filter by ACF field

    $posts = get_posts(array(
    'posts_per_page'    => -1,
    'post_type'     => 'post',
    'meta_query'    => array(
        'relation'      => 'AND',
        array(
            'key'       => 'color',
            'value'     => array('red', 'orange'),
            'compare'   => 'IN',
        ),
        array(
            'key'       => 'featured',
            'value'     => '1',
            'compare'   => '=',
        ),
    ),
));

    Sources:

    • https://www.advancedcustomfields.com/resources/query-posts-custom-fields/
    • https://www.advancedcustomfields.com/resources/order-posts-by-custom-fields/

  • Adding an option page

    #
    Read more

    With ACF:

    add_action( 'acf/init', 'dev__option_page' );

function dev__option_page(){

	acf_add_options_page( array(
		'page_title' 	=> 'Transfert Ressources',
		'menu_title'	=> 'Transfert de Ressources',
		'icon_url'		=> 'dashicons-update',
		'menu_slug' 	=> 'ator',
		'capability'	=> 'edit_posts',
		'redirect'		=> false
	));

}

    See: https://www.advancedcustomfields.com/resources/acf_add_options_page/

    Without ACF: https://codex.wordpress.org/Creating_Options_Pages

  • block supports properties

    # ,
    Read more

    To use the supports properties, first enable them in the block.json.

    {
	"$schema": "https://schemas.wp.org/trunk/block.json",
	"apiVersion": 3,
	
 ...

	"supports": {
		"color": {
			"text": true,
			"background": true
		}
	},
	"acf": {
		"mode": "preview",
		"renderTemplate": "./render.php"
	}
}

    Then in render.php :

    <?php

$classes = array();

if ( ! empty( $block['textColor'] ) ) {
//	$classes = array_merge( $classes, explode( ' ', $block['className'] ) );
	$classes[] = 'has-text-color';
	$classes[] = 'has-' . $block['textColor'] . '-color';
}

echo '<div class="' . esc_attr( join( ' ', $classes ) ) . '"></div>';

    Or simply use the function get_block_wrapper_attributes( string[] $extra_attributes = array() ): string for e.g. to get the classes :

    preg_match( '/class="(.*?)"/', get_block_wrapper_attributes(), $matches);
classes = $matches[1];

    Sources:

  • update_field

    #
    Read more

    Prototype: update_field($selector, $value, [$post_id]);

    Note: to update a date field, the data has to be formatted first (even in case of copying the data from a date field).

    $date_from = get_field( 'old_field', $old_post_id );
$date = DateTime::createFromFormat( 'd/m/Y', $date_from);
$date = $date->format( 'Ymd' );

update_field('new_field', $date, $new_post_id);

    Source : https://www.advancedcustomfields.com/resources/update_field/

  • InnerBlock

    # ,
    Read more

    Interesting attributes : allowedBlocks, template, InnerBlocks.

    Example of a devblock/render.php

    <?php

$classes_container = array( 'block__container' );
$classes_innerblock = array( 'block__innerblock' );

if ( !empty( $block['className'] ) ){
	$classes_root = array_merge( $classes_root, explode( ' ', $block['className'] ) );
}

$allowed_blocks = array( 'namespace/blockname' );

$template = array(
	array(
		'namespace/blockname',
		array(
			'className'		=> 'some-class'
		)
	)
);

?>

<div class="<?php echo join( ' ', $classes_container ); ?>">
	<InnerBlocks
		class="<?php echo join( ' ', $classes_innerblock ); ?>"
		allowedBlocks="<?php echo esc_attr( wp_json_encode( $allowed_blocks ) ); ?>"
		template="<?php echo esc_attr( wp_json_encode( $template ) ); ?>" />

</div>

  • Creating a block with ACF

    # ,
    Read more

    Prototype:register_block_type( string|WP_Block_Type $block_type, array $args = array() ): WP_Block_Type|false

    add_action( 'init', 'dev__register_blocks', 5 );

function dev__register_blocks() {
	register_block_type( __DIR__ . '/some_block_dir' );
}

    The block.json file : 

    {
    "$schema": "https://schemas.wp.org/trunk/block.json",
    "apiVersion": 3,
    "name": "namespace/blockname",
    "title": "Notice",
    "category": "text",
    "parent": [ "core/group" ],
    "icon": "star",
    "description": "Shows warning, error or success notices...",
    "keywords": [ "alert", "message" ],
    "version": "1.0.3",
    "textdomain": "my-plugin",
    "editorScript": "file:./index.js",
    "script": "file:./script.js",
    "viewScript": [ "file:./view.js", "example-shared-view-script" ],
    "editorStyle": "file:./index.css",
    "style": [ "file:./style.css", "example-shared-style" ],
    "render": "file:./render.php",
	"supports": {
		"className": true,
		"customClassName": true,
		"jsx": true			// to use innerBlocks,
		"inserter": true	// will be accessible only programatically
	},

	// ACF options: 
	"acf": {
		"mode": "preview",
		"renderTemplate": "render.php"
	},

	"example": { "attributes": { "mode": "preview" } }


}

    Sources: