README

A WordPress plugin for enhancing the editorial experience, including some common customizations for the Gutenberg editor.

Table of Contents

• What This Plugin Does
  • Blocks
  • Editor Plugins
  • Core Enhancements
• Theme Configuration
• Theme API
• Troubleshooting
• Local Development
• Resources

What This Plugin Does

The purpose of this plugin is to tailor the Gutenberg editor experience to be better suited to editors using their WordPress theme and to add functionality common to many websites. Features added as a part of this plugin fall into three categories: block modifications, editor plugins, and core enhancements. This plugin also exposes some global functions that can be used in theme templates.

Blocks

Extended Blocks

The following blocks are extended typically at the registration hook (blocks.registerBlockType) to limit the number of available options for an editor. Some blocks also hook into the edit lifecycle (via the editor.BlockEdit hook) to add additional classes and structure to the editor markup so as to be able to control certain aspects of the block's settings with css.

• Cover
• File
• Gallery
• Image Layout
• Related Articles
• Table
• Video

Note that you can continue to extend core block functionality in your theme by using WordPress's blocks.registerBlockType and editor.BlockEdit filters.

Editor Plugins

Our main Gutenberg "plugin" adds two panels to the main sidebar of posts: the Article Topper & Authors panels.

Article Topper Panel

The article topper panel controls article post metadata concerned with the article topper. This includes:

• Topper type: The look and feel of the topper, be it text-only or a site-width featured image
• Navigation theme: When paired with dark background image toppers, an already dark-themed nav can appear invisible. This option allows for lighter navigation themes
• Overline: Choose a primary category for your article to allow for better recirculation amongst common themes

Authors Panel

The Authors panel allows editors to assign multiple authors to the author byline. This process starts with the Authors section under Posts, where you can create author profiles.

These authors also serve as taxonomies for your articles, so archive pages full of an author's own content are auto-generated on your behalf.

Core Enhancements

• Adds a Credit field to attachment posts.

Template functions

This plugin exposes a few functions that can be used to retrieve relevant values handled by the plugin. See the Theme API section for information about the available functions.

Theme configuration

By default, all features of this plugin are enabled once the plugin is activated. However, you are able to configure the plugin's functionality (including disabling certain features) via a configuration file that can be added to your theme.

To set up a configuration file, add a ups-editorial.php file to your theme's root that returns an array containing the relevant configuration options:

<?php
/**
 * Configuration for the ups-editorial plugin.
 */

return array(
  'author_panel'         => true,
  'article_topper_panel' => true,
  'attachment_credit'    => true,
  'extended_blocks'      => array(
		'cover',
		'file',
		'gallery',
		'image-layout',
		'related-articles',
		'table',
		'video',
	),
  'enable_block_styles'  => array(),
);

Configuration

author_panel

Allowed types: boolean

Default value: true

Enable or disable the plugin's Author taxonomy, as well as the Gutenberg editor panel containing the mechanism to add and manage authors for an individual post.

article_topper_panel

Allowed types: boolean

Default value: true

Enable or disable the registration of fields for article toppers and the Gutenberg panel that controls those fields.

attachment_credit

Allowed types: boolean

Default value: true

Enable or disable the registration of a credit field for attachments.

extended_blocks

Allowed types: array

Default value:

array(
  'cover',
  'file',
  'gallery',
  'image-layout',
  'related-articles',
  'table',
  'video',
)

A list of blocks that are extended by the plugin. To disable the extension of a certain block, exclude it from this array.

enable_block_styles

Allowed types: array

Default value: array()

WordPress core includes style options for some core blocks. This plugin removes those style options by default, but this parameter can be used to re-enable the core style options for specific blocks. The following blocks have core styles that can be re-enabled via this parameter: button, image, quote, separator, table.

Theme API

There are a few globally-available functions that can be used by your theme to retrieve data defined by this plugin's functionality. These functions are defined in the Template.php file at the root of the plugin directory, and exist under the Upstatement\Editorial namespace.

It is recommended that your theme implement these functions wrapped by a function_exists check to prevent undefined errors in the case that the plugin is disabled. For example:

if ( function_exists( 'Upstatement\Editorial\get_post_authors' ) ) {
  $authors = \Upstatement\Editorial\get_post_authors();
  ...

get_post_authors

get_post_authors( WP_Post $post = null, string $field = null) : array | null

Retrieve a list of authors for a post.

Parameters

post

    Post to retrieve authors for. Leave blank to use the current global post.

field

    The field to return for each author. This can be any property from a WP_Term object. Leave blank to return the entire WP_Term object.

Return

Returns an array consisting of author data. If field is blank, this will be an array of WP_Term objects. If a field is specific, this will be an array of values for that field.

get_post_overline

get_post_overline( WP_Post $post = null ) : WP_Term | null

Retrieve the overline category for a post.

Parameters

post

    Post to retrieve the overline for. Leave blank to use the current global post.

Return

Returns the WP_Term object of the category term identified as the overline, or null if none is set.

Troubleshooting

"I've updated the content in the Editorial sidebar, but it's not appearing in the preview."

This is a known issue with Wordpress Gutenberg where post meta doesn't save until the Update button is pressed. We're currently tracking the main issue at WordPress/gutenberg#14900, but until then you can try one of the following steps:

• After updating the sidebar content, press the Update button and then the Preview button.

• Press the Preview button twice. Sometimes the meta is only available for every-other preview.

• Attempt a hard refresh in the preview window (command+shift+R in Google Chrome).

Block validation and recovery

When changing the saved markup of existing or new components, you are likely to come across an issue with block validation.

This error occurs when the markup of a block on last save doesn't match the markup of the block when it loads within the editor.

If this error was intentional, the easiest way to bypass the issue is:

1. In the top right corner of the block, press the three dots.

2. Select the Attempt block recovery option. This will re-render the block markup according to the latest version of the save function.

3. Update the post to save the latest block markup.

If the error was unintentional, your console will be the best place to identify what went wrong. That may look something like this:

Block validation: Block validation failed for `ups/image` Content generated by `save` function:

<figure class="wp-block-image">
  <img src="/good-image.png" alt="A good image" />
  <figcaption>This is the caption</figcaption>
  <cite>This is a new citation</cite>
</figure>

Content retrieved from post body:

<figure class="wp-block-image">
  <img src="/good-image.png" alt="A good image" />
  <figcaption>This is the caption</figcaption>
</figure>

In the case above, there was a new cite element added to the markup after the block was already saved to the post. At this point you can either (1) choose the Attempt block recovery option to update the markup, (2) remove and recreate the block, or (3) revert the save function to remove the cite element.

Local Development

To make changes to this plugin, you can download this repository and add it to the plugins/ directory of any running WordPress instance. You'll also need to perform some setup steps to ensure that you have all the built dependencies:

To start working locally, you'll need the following things on your machine:

• nvm to manage the Node version this project is running on.
• composer to manage PHP dependencies and autoloading.

Once the above are installed, you can get set up with the following steps:

1. Ensure you're running the expected version of Node:

   nvm install

2. Install Node dependencies:

   npm install

3. Install composer dependencies and generate autoloaders:

   composer install

4. Watch the plugin files for changes:

   npm run start

You can build the static front-end assets at any time with the following script:

npm run build

Resources

During the development of this plugin, we found the following resources to be useful:

• Block editor overview
• List of core blocks
• Block design best practices
• Block editor developer tutorials
• Block editor components
• Gutenberg developer documentation
• Gutenberg GitHub repository