WordPress Blocks Plugin

Posted on

This plugin contains 5 blocks.

All of them are highly customizable and translation-ready. Nearly all of them offers support for:

The alignment is controlled by adding BlockControls like this:

<BlockControls>
<AlignmentToolbar
value={contentAlignment}
onChange={(val) => setAttributes({ contentAlignment: val })}
/>
</BlockControls>

Support for width is added in block.json by:

"supports": {
"align": ["full", "wide"]
},

Author Bio

Author Block

This block allows the user to change background color, text color. This is achieved by using the InspectorControls component:

<InspectorControls>
<PanelBody title={__("Background Settings", "copywriter-blocks")}>
<div className="components-base-control">
<div className="components-base-control__field">
<label className="components-base-control__label">
{__("Background Color", "copywriter-blocks")}
</label>
<ColorPalette
value={backgroundColor}
onChange={(val) => setAttributes({ backgroundColor: val })}
/>
</div>
</div>
<div className="components-base-control">
<div className="components-base-control__field">
<label className="components-base-control__label">
{__("Text Color", "copywriter-blocks")}
</label>
<ColorPalette
value={textColor}
onChange={(val) => setAttributes({ textColor: val })}
/>
</div>
</div>
</PanelBody>
</InspectorControls>

Brand Logos

Brand Logos Block This block displays 3 brand logos. Their customization options include:

In this block, I used a RangeControl component which controls the opacity for these images:

Opacity options for images of brand logos block

<RangeControl
label={__("Images opacity", "copywriter-blocks")}
value={opacity}
onChange={(val) => setAttributes({ opacity: val })}
min={0}
max={100}
step={10}
/>

Call To Action

Call to Action Block This block is a simple block that displays a title and a button. It offers the user to customize background color and button colors.

The unique feature I added in this block is support for changing button size and button rounding options.

Button size and shape options for call to action block

I did this by first adding button options:

const buttonSizeOptions = [
{ value: "cw-button-size-small", label: __("Small") },
{ value: "cw-button-size-medium", label: __("Medium") },
{ value: "cw-button-size-large", label: __("Large") },
{ value: "cw-button-size-extralarge", label: __("Extra Large") },
];

// Button shape
const buttonShapeOptions = [
{ value: "cw-button-shape-square", label: __("Square") },
{ value: "cw-button-shape-rounded", label: __("Rounded Square") },
{ value: "cw-button-shape-circular", label: __("Circular") },
];

Then calling them through the SelectControl component:

<SelectControl
label={__("Button Size", "copywriter-blocks")}
value={buttonSize}
options={buttonSizeOptions.map(({ value, label }) => ({
value,
label,
}))}
onChange={(val) => setAttributes({ buttonSize: val })}
/>
<SelectControl
label={__("Button Shape", "copywriter-blocks")}
value={buttonShape}
options={buttonShapeOptions.map(({ value, label }) => ({
value,
label,
}))}
onChange={(val) => setAttributes({ buttonShape: val })}
/>

Hero Block

Hero Block Hero block is highly customizable. It offers customization options like:

Besides these customization options, I also added custom styles in the block.json file. This allows the user to quickly modify the look of the block without changing options.

different styles for hero block

I did this by first adding styles in block.json:

"styles": [
{
"name": "main",
"label": "Main Style"
},
{
"name": "dark",
"label": "Dark Style"
},
{
"name": "minimal",
"label": "Minimal (Default)",
"isDefault": true
}
]

Then adding CSS Custom Properties which can be found in the style.scss file:

.wp-block-copywriter-blocks-hero-block {
&.is-style-main {
--copywriter-hero-block-bg-color: linear-gradient(
160deg,
#0093e9 0%,
#80d0c7 100%
);
--copywriter-hero-block-opacity: 20%;
--text-color: white;
}

&.is-style-dark {
--copywriter-hero-block-opacity: 20%;
--copywriter-hero-block-bg-color: #32373c;
--text-color: white;
--primary-button-bg-color: white;
--primary-button-color: #32373c;
--secondary-button-border-color: white;
--secondary-button-color: white;
}

&.is-style-minimal {
--copywriter-hero-block-bg-color: #fff;
--copywriter-hero-block-opacity: 100%;
--text-color: #32373c;
--primary-button-bg-color: #32373c;
--primary-button-color: #fff;
--secondary-button-border-color: #32373c;
--secondary-button-color: #32373c;
}
}

Testimonial Block

Testimonial Block Testimonial block supports displaying content, image, and title. Besides, it supports changing border color and border size.

The interesting bit of code I added to this block is the ability to remove an image. When a person uploads the Testimonial image in the editing interface, they can click this cross icon to remove the selected image: icon that removes selected image in testimonial block

This is done by this piece of code in edit.js:

{
mediaID && (
<Icon
icon="dismiss"
className="testimonial-image-edit-icon"
onClick={onRemoveImage}
/>
);
}

Visit the GitHub repository >>