WordPress Blocks Plugin

This plugin contains 5 blocks.

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

• Changing text alignment
• Changing background color
• Changing width

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

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

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

• Opacity
• Background Color

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

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

Call To Action

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.

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 is highly customizable. It offers customization options like:

• Adding background image
• Changing font size
• Changing button colors

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.

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 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:

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 >>