Global Styles

Global styles will save you a lot of time.

Admittedly, the Photo Block's settings can initially be intense and challenging to configure. But once you've found a photo style you really like, you can save it as a global style and reuse it across numerous other photos. For example, you can have a global style for each intro image for a post and another global style for any pictures within the post.

Let's review global styles and learn how to save, set, edit, and remove them.

Saving a Global Style

You can save a photo as a global style once you have a photo configured.

Global styles can only be saved and edited by users with the Editor role or above. Regular users can still apply saved global styles.

Find the Global Styles panel in the block sidebar options. It'll be the last option before the Advanced panel.

Global Style Options in the Sidebar

When you open the panel for the first time, you'll see a "Save" option and a "Reset" option. The "Reset" option is useful if you need to clear out any block-level styles. For now, we'll concentrate on the "Save" option.

Save Global Styles Option

When you click "Save New Global Style," you'll be shown a modal to enter the global style name.

Setting Global Style Names

Global style CSS classes are public, so please take care when naming your global styles and prefix the CSS class when necessary.

You can select the Toggle for "Apply this global style" and have it automatically apply the global style to the selected photo block.

Apply Toggle

When you "apply" a global style to a block, it saves the style and also selects the style for the block. Uncheck the "apply" option to keep editing the photo without a global style being attached.

Uncheck this option if you want to save the global style without affecting the photo.

Once saved, you'll be presented with an Edit and Refresh option in the global style section.

Global Styles Option in the Block Sidebar

You'll also see a new "Global Styles" panel at the top of the block sidebar options.

Available Global Styles in the Block Sidebar Options

Once a global style is applied, most settings will be hidden as they are configured globally.

With global styles applied, you can still:

• Add or remove a caption

• Set the link target

• Set the image size

Editing a Global Style

The available global styles are displayed when you click "Edit Global Styles" in the "Global Styles" panel.

Edit Option in the Block Sidebar Options for Global Styles

Once in "Edit Mode," you'll see the available global styles you can edit or delete.

Available Global Styles for Editing

Clicking the edit icon, you'll be presented with a modal that allows you to edit the name and CSS class of the global style.

Editing a Global Style

Overwriting a Global Style

To save over or overwrite a global style, you'll first need to remove the global style from the photo. You can see any available global styles under "Available Global Styles" in the sidebar options.

A Global Style is Set for The Photo

Click on the circular remove icon to remove the global style from the photo.

Removing a Global Style Allows You to Edit the Photo Further

You can now edit the photo and make any changes you like, as the global styles are still present but no longer forced.

Once you have finished updating the photo's settings, you can return to the "Global Styles" panel and save it.

Global Style Options in the Block Sidebar Settings

You'll be presented with a modal to override a global style.

Override a Global Style Using the Save Modal

Click on "Override Global Style." You'll be presented with a list of available global styles to override.

Existing Global Styles to Override

Click on the global style you want to override, and click "Save Global Style."

Overriding a Global Style Using the Save Dialogue

You have now overwritten a global style.

Removing a Global Style From a Photo

You can quickly remove a global style from a photo by clicking the minus button next to its selected global style.

Click the Minus Button to Remove the Global Style from the Photo

To remove all styles once a global style has been removed, go to the "Global Styles" panel and find the "Clear Block Styles" option.

Clear Block Styles Option

Clicking on "Clear Block Styles" will remove any existing block styles and reset the photo to the way it was when you first inserted it.

Demonstration of Clearing Block Styles

There is no confirmation modal when clearing block styles. Be extra careful with this option. Undo works in most cases after clearing the styles.

Refreshing Global Styles

If you need to refresh the global styles and regenerate the global styles stylesheet (often for caching purposes), find the "Refresh Global Styles" option in the "Global Styles" panel in the block editor sidebar.

Clicking on Refresh Global Styles Will Regenerate the Global CSS File

Deleting Global Styles

If you delete a global style, you can do so in the "Global Styles" panel. Go into Edit mode, find the style you want to remove, and confirm the deletion.

Edit a Global Style to Delete It

Once in Edit mode, you'll see the trash icon, which you can click to delete the global style.

Trash Icons Assist in Deleting Global Styles

You'll be presented with a confirmation modal once you click the Trash icon for deletion.

Deletion Confirmation for Global Styles

Deletion is permanent. If you accidentally delete a global style, you can recover it by selecting a photo with the global style previously and saving it with the same name as the deleted global style.

Choosing a Global Style

Once the global styles have been configured and saved, you can use them throughout your site.

Available Global Styles Ready for Selection

The roles author and above can select from any previously saved global styles.

The user clicks on the global style to apply it to the photo.

Applying a Global Style

Once a global style is applied, most settings will be hidden as they are configured globally. With global styles applied, you can still:

• Add or remove a caption

• Set the link target

• Set the image size

Exporting and Importing Global Styles

Global styles are simply a post type, so they can be imported and exported like regular post content.

Head to "Tools->Export" and export the global styles created by Photo Block.

Global Styles Export Option

To import, install the WordPress Importer plugin and import the global styles export file.

WordPress ImporterWordPress.org

From there, you may need to refresh the global styles, which you can do from any Photo Block.

Refreshing a Global Style After Import