Global Styles
Global styles will save you a lot of time.
Last updated
Global styles will save you a lot of time.
Last updated
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.
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.
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.
When you click "Save New Global Style," you'll be shown a modal to enter the global style name.
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.
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.
You'll also see a new "Global Styles" panel at the top of 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
The available global styles are displayed when you click "Edit Global Styles" in the "Global Styles" panel.
Once in "Edit Mode," you'll see the available global styles you can edit or delete.
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.
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.
Click on the circular remove icon to remove the global style from the photo.
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.
You'll be presented with a modal to override a global style.
Click on "Override Global Style." You'll be presented with a list of available global styles to override.
Click on the global style you want to override, and click "Save Global Style."
You have now overwritten a global style.
You can quickly remove a global style from a photo by clicking the minus button next to its selected global style.
To remove all styles once a global style has been removed, go to the "Global Styles" panel and find the "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.
There is no confirmation modal when clearing block styles. Be extra careful with this option. Undo works in most cases after clearing the 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.
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.
Once in Edit mode, you'll see the trash icon, which you can click to delete the global style.
You'll be presented with a confirmation modal once you click the Trash icon for deletion.
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.
Once the global styles have been configured and saved, you can use them throughout your site.
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.
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
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.
To import, install the WordPress Importer plugin and import the global styles export file.
From there, you may need to refresh the global styles, which you can do from any Photo Block.
