Block binding api

Implementation

  • Requires registering meta as belows
function register_movie_meta() {

    register_post_meta( 'movie', 'rating', [
        'show_in_rest' => true,
        'single' => true,
        'type' => 'number',
    ] );

    register_post_meta( 'movie', 'director', [
        'show_in_rest' => true,
        'single' => true,
        'type' => 'string',
    ] );

}
add_action( 'init', 'register_movie_meta' );
  • then block binding api is used to register source of data
add_action( 'init', function() {

    register_block_bindings_source(
        'my-plugin/movie-meta',
        [
            'label' => 'Movie Meta',
            'get_value_callback' => function( $source_args ) {

                $post_id = get_the_ID();

                if ( ! $post_id ) {
                    return '';
                }

                $key = $source_args['key'] ?? '';

                if ( ! $key ) {
                    return '';
                }

                return get_post_meta( $post_id, $key, true );
            },
        ]
    );

});

theme json

The order of this hierarchy from lowest to highest is:

  • WordPress theme.json: WordPress has its own theme.json file that defines the default settings and styles.
  • Theme theme.json: Anything you define in your theme’s theme.json file overrides the WordPress defaults.
  • Child theme theme.json: If active, a child theme’s theme.json takes priority over the main or “parent” theme.
  • User configuration: Users can further customize how their site works under Appearance > Editor in the WordPress admin, and the JSON data is saved in their site’s database. Their choice takes priority over all other levels in the hierarchy.

page fetch order

Request
  ↓
wp-blog-header.php
  ↓
template-loader.php
  ↓
get_single_template()
  ↓
get_query_template().  ->locate_template() on classic themes

  ↓
locate_block_template()
  ↓
resolve_block_template()
  ↓
template-canvas.php
  ↓
get_the_block_template_html()
  ↓
Final HTML output

Theme json

It controls:

  • What users can do (settings)
  • How things look (styles)
  • Structure defaults (layout, spacing, etc.)
{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {},
	"styles": {},
	"customTemplates": {},
	"templateParts": {},
	"patterns": []
}

{
  "settings": {
    "color": {
      "palette": [
        { "name": "Primary", "slug": "primary", "color": "#0073aa" },
        { "name": "Secondary", "slug": "secondary", "color": "#005177" }
      ],
      "gradients": [],
      "duotone": [],
      "custom": false
    }
  }
}

{
  "settings": {
    "typography": {
      "fontFamilies": [
        {
          "fontFamily": "Arial, sans-serif",
          "name": "Arial",
          "slug": "arial"
        }
      ]
    }
  }
}

{
  "typography": {
    "fontSizes": [
      { "name": "Small", "slug": "small", "size": "12px" },
      { "name": "Large", "slug": "large", "size": "32px" }
    ]
  }
}

{
  "typography": {
    "lineHeight": true,
    "fontWeight": true,
    "textDecoration": true
  }
}

{
  "settings": {
    "shadow": {
      "presets": [
        {
          "name": "Soft",
          "slug": "soft",
          "shadow": "0 2px 10px rgba(0,0,0,0.1)"
        }
      ]
    }
  }
}

{
  "styles": {
    "elements": {
      "link": {
        ":hover": {
          "color": {
            "text": "#ff0000"
          }
        }
      }
    }
  }
}

{
  "styles": {
    "blocks": {
      "core/heading": {
        "typography": {
          "fontWeight": "700"
        }
      }
    }
  }
}


{
  "styles": {
    "css": ".my-class { color: red; }"
  }
}