Block Styles Changelog = 2.2.0 = = 2.1.0 = = 2.0.0 = = 1.4.0 = = 1.3.2 = = 1.3.1 = = 1.2.2 = = 1.2.1 = = 1.2.0 =

Block Styles Plugin Installation Requirements PHP Recommendations We recommend using PHP 5.6 at the very least to use our products. This is because any version before 5.6 does not have the security updates to keep your site safe. WordPress currently recommends using version 7.4 or greater. MySQL and Server Recommendations MySQL: It is recommended to run MySQL version…

How do you style a block that does not fully support block styles? If you can use Block Styles on a certain block, you can always wrap the desired block in a group, column, or row to style around the block you want to target.

We have only tested a handful of blocks so far. Below is the full list of blocks we have tested and how to add your blocks to the lost. Supported 3rd Party Block Brands *= Some blocks have Limited support. Not Currently Supported The following are plugins we tested but did not meet the minimum…

Global Hooks JavaScript Filters ea.getAllowedBlocks ea.stylePanel.title ea.getAttributes ea.getAttributes.editor ea.saveStyleContents ea.getSettingsPanel ea.getStylesToAttributesObject JavaScript Actions ea.afterReset ea.styleCopied ea.styleApplied ea.beforeSaveAttributes ea.beforeSaveAttributes.editor PHP Filters ea_block_style_page_top_icon ea_block_style_site_url ea_block_style_welcome_wrapper_class ea_add_settings_nav_item ea_custom_fonts_menu_title ea_custom_fonts_cpt_args ea_custom_fonts PHP Actions ea_block_style_welcome_page_header_title ea_block_style_header_right_section ea_block_style_settings_nav_menu ea_block_style_settings_menu_$current_slug_action ea_block_style_settings_page_contents_content_before ea_block_style_settings_page_contents_content ea_block_style_settings_page_contents_content_after ea_block_style_settings_page_right_sidebar_before ea_block_style_settings_page_right_sidebar_content ea_block_style_settings_page_right_sidebar_after Hooks By Panel Psuedo Panel JavaScript Filters ea.getPseudoContents ea.getPseudoClasses ea.getPseudoAttributesBeforeRender.editor JavaScript Actions ea.beforePseudoRender.editor Layout Panel JavaScript…

Are you looking to customize your Gutenberg blocks to your exact specifications? No problem! Block Styles allows you to customize any content block with your own CSS. Custom CSS Rather write your CSS by hand? Want to do something more advanced? Tip:To make things easier, add your own class and/or id to the Settings Tab…

Create unique effects to bring your WordPress website to life! Our Block Styles plugin offers fun animation and transition effects to engage your website visitors with your content. Animations Step 1: Select an animation name from the drop-down menu. Step 2: Set a duration for how long you’d like your animation to run. Default duration…

Block Styles gives you several options when it comes to typography. Font customization, text alignment, height, and size are all interchangeable. Full Google font support and even the ability to embed your own font. Font Family Default Step 1: Select the Default font tab Step 2: Select the font you wish to use from the…

Select border styles including dotted, hidden, inset, and more. Full radius controls and box-shadow options let you decide exactly how you want your borders to look on your site. Border Style Step 1: Select a border style from the drop-down menu. Step 2: Select your border width. Click the link icon to unlink the border…

Customize the background of every Gutenberg block with any color you wish. Utilize several gradient options, including linear and radial settings. Want a block background to be an image? Select any image you like to serve as a background to any WordPress block. Color Gradient Images Alpha Transparencies Background Color To select a background color…

Control the layout of WordPress blocks with advanced dimension and display settings. Display Want to create a flex column, inline block, or another display option? Block styles has you covered. Dimensions Control the height and width without the hassle and guesswork. Spacing With Block Styles spacing options, there’s no need for the Spacer Block. Visibility…

Device Ensure your web pages look great on all devices including desktop, mobile, and tablets. Easily toggle between devices to customize blocks and take advantage of our hover control for an alternative page editing experience. Desktop Table Mobile To toggle between devices, click on the Block Styles icon in the upper-right corner of the page.…

General Block styles settings live under the Appearance menu in the WordPress admin. Fonts Google Fonts API Add your Google Fonts API key to unlock the use of Google Fonts on your site. You will need a Google account to register for your font key. If you have a Google account the whole process should…