Block : Paragraph

Author:

Published:

Updated:

The paragraph block is probably the most commonly used block in Gutenberg and your WordPress site, you’ll use this the most in your affiliate site.

Color

For each block of paragraph text, you have the freedom of choosing the text color, background color, and link color.

You can choose any color you like in all paragraph blocks throughout your site.

You can even choose a background color.

Note: that the block options are shown on the right in the Block Options when your block is active in the editor.

Typography

Typography options are configurable on each paragraph block item meaning that you can have multiple typographies per each post.

Font

Choose your font here.

Size

You can choose from the default fluid typography options or set a size manually in px, em and rem.

Appearance

Select a font weight for your paragraph block.

Line height

Select the line height, default is 1.5.

Letter spacing

Choose the amount of spacing between characters.

Decoration

Choose from:

None

Underline

Strikethrough

Letter case

None, this is default.

Uppercase – Makes everything Uppercase.

Lowercase – makes everything lowercase

Capitalize – capitalizes all first characters of all words in that block

Dimensions

Padding

Padding will add space within your paragraph block. The easiest way to see how this works is to add a background color.

You can set padding in px, em, rem, or the default slider will use Presets.

You can set top, right, bottom, and left padding individually by pressing the unlink button.

Margin

Margin will add space outside your paragraph block. This allows for space between blocks/elements on your page or post.

As with padding, you can set top, right, bottom, and left padding individually by pressing the unlink button.

Advanced

HTML Anchor

The HTML anchor field allows you to ad IDs to your paragraph blocks, you can link to these directly from anywhere on your site. For example if you had the IS of some-html-anchor on your element, you can link to that with your page address followed by #some-html-anchor

For example:
https://someamazingwebsite.com/your-amazing-post#some-html-anchor

Additional CSS Class(es)

You can add your own CSS classes to your paragraph block here. Classes should be separated by a space.

You can add your own class(es) and target them in your own CSS.

About the author

Leave a Reply

Your email address will not be published. Required fields are marked *