In this tutorial, we are going to talk about the Good Bad Block. This block lets you quickly summarize the good and the bad points of a product, and helps customers make decisions quickly. This is a simple example of a Good Bad Block.
You can add this block to any post or page by adding if from the block menu, or by typing “/ab” and selecting it from the list.
Since the Good Bad Block is a Gutenberg block, all the settings for it we available in the WordPress block menu on the right side. Here is an image that shows all the settings available for the Good Bad Block.
Let us explore each of the settings and understand how they can be used to customize the block.
Here are all the settings in the General Settings section.
The settings are pretty straightforward and easy to understand. Here is a quick overview.
Pros Title: Lets you change the title of the positive section
Cons Title: Lets you change the title of the negative section
Title Typography: Lets you change the typography of the Title
Progress Typography: Lets you change the typography of the text above the progress bar
Sub Title Typography: Lets you change the typography of the Sub Title
List Typography: Lets you change the typography of the List
Main Title Color: Changes the font color of the main title
Main Title Background Color: Changes the background color of the main title
Box-Shadow: Lets you enable and customize the box-shadow for the block
Here is an image that will explain the relationship better.
The Pro Settings are easy to follow. Here is an image showing all the settings.
Here is what each of the settings does.
Pros Icon: Lets you choose the icon next to the list
Pros Text Color: Lets you choose the color of heading
Pros Icon Color: Lets you choose the color of the icon
Pros List Color: Lets you choose the color of the text used for the list
The Con Settings are similar to the Pro Settings. Here are all the settings.
Here is what each of the settings does.
Cons Icon: Lets you choose the icon next to the list
Cons Text Color: Lets you choose the color of heading
Cons Icon Color: Lets you choose the color of the icon
Cons List Color: Lets you choose the color of the text used for the list
The button settings have a lot of settings. Here is an image showing all of them.
We will divide them up so you can follow along better.
This option lets you pick an icon that will show alongside the button copy. You can also choose to place the icon before or after the text.
Button Text and URL
The button text field lets you set the text that appears on the button, and the URL is where you enter a fully-qualified URL of where the button should point to.
Open In New Window
Enable this option if you want your button to open in a new window.
Enable this option if you want your button to be rounded.
Button Size and Width
You can control the size and the width of the button with these settings.
Click the wrench icon to open the typography options.
These are all the options you can configure for the button typography. You can choose the font, weight, spacing, and many other features to create the perfect typography combination.
These options let you choose the color of the button copy, the background color, and the border color. You can configure them separately for the button’s regular state and the hover state.
Button Padding, Margins, Borders, Width, etc.
These options let you configure the padding, margins, etc. for the button. You can customize them for desktops, tablets, and mobiles separately.
Here are all the settings in the Ratings settings.
The settings are self-explanatory, but here is an image showing what settings affect which element.
The Image Settings have just a few options.
Here is what the settings do.
Custom Image Width: Helps you set the image width. You cannot set a width that breaks the block layout
Image Padding: Helps you change the padding around the image
Remember, both these settings can be customized for different device types and also by using the many CSS size selectors.
Here you can enter the name of CSS classes that you want to add to the CBB. This feature is useful to customize something that is not available in the settings directly.