Configuring Gutenberg for Brands

Every brand has a directory located in the src/config/brands directory which support one of the following configuration types. These used to live in the individual theme plugin configurations, but have been consolidated here inside the pmc-gutenberg plugin to aid in efforts of centralization and deduplication.

PMC Brand vs PMC Nova

The pmc-brand directory is all pre-Nova brand defaults. Any brands that support the Nova design system would utilize the defaults set in the pmc-nova brand directory otherwise the values in pmc-brand would be used.

We expect these to be consolidated in the near future.

Theme (theme.json)

PMC brands do not take advantage of the core theme.json (opens in a new tab) feature as it is slightly duplicative and more restrictive than our custom theme.json feature. The theme.json is a PMC-flavored extension of the core system. All of the configuration options available in that theme.json are available in PMC's theme.json configuration.

The PMC-flavored theme.json has a few additional benefits. Our theme.json does not need to exist in the theme, but can instead be centralized in the Gutenberg plugin. Our configs (with the exception of the config.json) can have different configurations based on the post type which is not something that WordPress supports out of the box. This allows us to potentially provide differnt color palettes, differnt block configurations, and different controls based on the post type.

The syntax and supported features of the core theme.json still applies but we add two additional features:

1. The ability to define globally-utilized defaults for all brands in php. See the filter definition.
2. The ability to define configuration by brand and by post-type.

This allows us to potentially provide differnt color palettes, differnt block configurations, and different controls based on the post type. Although we offer that filter in PHP with the ability to filter the theme.json output, it's recommended that updated me made directly to the theme.json.

Configuration

All brand configurations live in the src/config/brands directory. Each brand will have a theme.json that will define a default config used if a post type is not defined, and a post-type specific configuration for those specific configurations.

{
	"$schema": "../../schema/block.json",
	"default": {},
	"PMC\\Hub\\Post_Type::POST_TYPE": {
		"settings": {
			"typography": {
				"fontFamilies": [
					{
						"fontFamily": "Ivar Headline, serif",
						"name": "Ivar Headline",
						"slug": "ivar-headline"
					},
					{
						"fontFamily": "Anton, sans-serif",
						"name": "Anton",
						"slug": "anton"
					},
					{
						"fontFamily": "Libre Franklin, sans-serif",
						"name": "Libre Franklin",
						"slug": "libre-franklin"
					}
				]
			}
		}
	}
}

In the above example the pmc-hub post type would enable fontFamilies for the post type on supported blocks, but the post post type (or any other post type) would not enable any new features.

The default set of theme.json options defined by the brand type (pmc-brand or pmc-nova) would be used to fill in the gaps or if no post-type specific values are defined.

Brand configs (config.json)

The config.json file defines all of the supported blocks, filters, sidebars, navbars, and pluginSidebars supported by the brand.. This replaces the PHP filter values defined in pmc_gutenberg_enable_block_editor, but the format is the same.

See the legacy example config for comparison.

{
	"$schema": "../../schema/config.json",
	"any": {
		"enabled": [
			"bottom-block",
			"breadcrumbs",
			"buy-now",
			"buy-now-button",
			"post-date",
			"top-block",
			"connatix-block"
		],
		"disabled": [ "jw-player" ],
		"filters": [ "supports-connatix" ]
	},
	"PMC\\Hub\\Post_Type::POST_TYPE": {
		"enabled": [ "one-off", "story-influencers" ]
	},
	"page": [],
	"post": {
		"enabled": [ "preview-auto-injected-content" ],
		"navbars": [ "preview-auto-injected-content-btn" ]
	},
	"pmc_list": [],
	"pmc_list_item": [],
	"profile-landing-page": {
		"enabled": [ "profile-landing-page" ]
	},
	"top200": {
		"enabled": [ "top200" ]
	}
}

Post Type Template Configs (template.json)

All template configs are housed in the src/config/brands directory as the template.json file. Like the above configs templates are separated by post type(s). Defines what core blocks are present when the post loads.

This replaces the PHP filter values defined in pmc_gutenberg_default_template.

{
	"$schema": "../../schema/block.json",
	"default": [],
	"top200|profile-landing-page": [
		[ "pmc/top-block" ],
		[ "core/paragraph" ],
		[ "pmc/bottom-block" ]
	]
}

Block Configs (blocks/block-name.json)

All brands have a subdirectory called blocks which would house blocks by block type. For example, Top Block and Bottom Blocks each have configs called top-block.json and bottom-block.json respectively.

Like the theme.json, the configs are separated by default and then by post type that it might support. If multiple post types are supported, to avoid duplication, the key can contain multiple post types. For example:

{
	"pmc_top_video|pmc-nfp": [
		[ "pmc/post-title" ],
		[ "pmc/post-date" ],
		[
			"pmc/byline",
			{
				"isOpen": false,
				"metaKey": "authors",
				"variant": "bylines"
			}
		],
		[ "pmc/featured-media" ]
	]
}

Where the pmc_top_video and pmc-nfp post types support the same config.

Static variables and methods are supported also for when dynamic post types may be needed. For example:

{
	"post|PMC\\Hub\\Post_Type::POST_TYPE": [
		[ "pmc/post-title" ],
		[ "pmc/post-date" ],
		[
			"pmc/byline",
			{
				"isOpen": false,
				"metaKey": "authors",
				"variant": "bylines"
			}
		],
		[ "pmc/featured-media" ]
	]
}

Where out output would be (by default) post and pmc-hub.

Additional Resources

Legacy configuration details can be found in the Legacy Tech.