{"id":21,"date":"2022-01-27T11:12:08","date_gmt":"2022-01-27T16:12:08","guid":{"rendered":"https:\/\/wpdocs.bu.edu\/bu-stories\/?page_id=21"},"modified":"2022-08-31T16:56:50","modified_gmt":"2022-08-31T20:56:50","slug":"paragraph","status":"publish","type":"page","link":"https:\/\/wpdocs.bu.edu\/bu-stories\/blocks\/paragraph\/","title":{"rendered":"Paragraph"},"content":{"rendered":"

The Paragraph block should be used for content across story pages, especially any text that is longer than a few words. You can find more detail about customization options below.<\/p>\n

Block Settings<\/h2>\n

The Block Settings are visible in the right hand side of the editor and will show up when you click on the Paragraph block. If the block settings aren’t visible, click the gear icon in the top right corner, or use the keyboard shortcut SHIFT + CMD + ,<\/p>\n

There are a variety of collapsible panels in the settings bar that will allow you to further customize the Paragraph block. Expand the section(s) below to learn more about the options each panel provides.<\/p>\n

Typography<\/h3>

\nThe typography panel allows for control over multiple options: font family, font size, color, line height, letter spacing, opacity, text transform, text shadow, and hyphenation.<\/p>\n

Font Family<\/h4>\n

\"\"
Select from a dropdown of different font families to choose. The font family will update live for you in the editor so you can preview each option. If it isn’t updating, please ensure you are using `https`.<\/figcaption><\/figure><\/p>\n

Font Size<\/h4>\n

\"\"
Control the size of your text. The slider ranges from 10 to 200 in increments of 1. When selecting a font size, please be mindful of leaving enough room for the text to fit within the boundaries of the page. If your text is too large and spans multiple lines, we recommend using the hyphenate option.<\/figcaption><\/figure><\/p>\n

Color<\/h4>\n

\"\"
Choose from BU Stories’ or your theme’s pre-defined color palette. Optionally, you can also choose your own custom colors. Just make sure to keep contrast and readability in mind\u2014it’s important that the content is accessible to all users.<\/figcaption><\/figure><\/p>\n

Line Height<\/h4>\n

\"\"
Adjust the height that an individual line of text will take up. Decreasing this will bring the lines of text closer together, while increasing it will move the lines of text further apart. The slider ranges from 0 to 2 in increments of 0.5.<\/figcaption><\/figure><\/p>\n

Letter Spacing<\/h4>\n

\"\"
Adjust the space between letters of text, also known as kerning. Decreasing this will bring the letters closer together, while increasing it will move the letters further apart. The slider ranges from -10 to 10 in increments of 0.25.<\/figcaption><\/figure><\/p>\n

Opacity<\/h4>\n

\"\"
Adjust the opacity of the text. Decreasing this will make the letters more transparent, while increasing it will make the letters more opaque. The slider ranges from 0.2 to 1 in increments of 0.1.<\/figcaption><\/figure><\/p>\n

Text Transform<\/h4>\n

\"\"
Select the desired text transform from a dropdown of options.<\/figcaption><\/figure><\/p>\n

Text Shadow<\/h4>\n

\"\"
Select the desired text shadow from a dropdown of pre-defined options. Text shadows can be one method to improve visibility of text that is on top of a background image.<\/figcaption><\/figure><\/p>\n

<\/div>\n<\/div>\n\n

\n

Text Stroke<\/h3>
<\/p>\n

Text Stroke Width<\/h4>\n

\"\"
Adjust the text stroke width. The slider ranges from 0 to 5 in increments of 0.5.<\/figcaption><\/figure><\/p>\n

Text Stroke Color<\/h4>\n

\"\"
Choose from BU Stories’ or your theme’s pre-defined color palette. Optionally, you can also choose your own custom colors.<\/figcaption><\/figure><\/p>\n

<\/div>\n<\/div>\n\n

\n

Background<\/h3>
<\/p>\n

Background Color<\/h4>\n

\"\"
Choose from BU Stories’ or your theme’s pre-defined color palette. Optionally, you can also choose your own custom colors.<\/figcaption><\/figure><\/p>\n

Opacity<\/h4>\n

\"\"
Adjust the opacity of the text background color. Decreasing this will make the background more transparent, while increasing it will make the background more opaque. The slider ranges from 0.005 to 1 in increments of 0.05.<\/figcaption><\/figure><\/p>\n

Padding<\/h4>\n

\"\"
Adjust the padding of the text container. The slider ranges from 0 to 25 in increments of 5.<\/figcaption><\/figure><\/p>\n

<\/div>\n<\/div>\n\n

\n

Border<\/h3>
<\/p>\n

Note: the border will not display unless a border style and<\/u> a width < 0 are selected. Unless a border color is selected, the color will default to black.<\/p>\n

Border Width<\/h4>\n

\"\"
Adjust the border width. The slider ranges from 0 to 5 in increments of 1.<\/figcaption><\/figure><\/p>\n

Border Color<\/h4>\n

\"\"
Choose from BU Stories’ or your theme’s pre-defined color palette. Optionally, you can also choose your own custom colors.<\/figcaption><\/figure><\/p>\n

Border Style<\/h4>\n

\"\"
Select the desired border style from a dropdown of pre-defined options.<\/figcaption><\/figure><\/p>\n

<\/div>\n<\/div>\n\n

\n

Margins<\/h3>
<\/p>\n

\"\"
Control all 4 margins (top, right, bottom, left) with individual sliders, ranging from -100 to 100 with an increment of 1. Alternatively, check off `Set all to same value` if you would like to adjust all margins at the same time.<\/figcaption><\/figure><\/p>\n

<\/div>\n<\/div>\n\n

 <\/p>\n

Text Panel Settings<\/h2>\n

The Text Panel Settings are visible directly above the selected block in the editor. There are a variety of options that allow you to further customize the Paragraph block.<\/p>\n

\"\"<\/p>\n

Alignment<\/h3>\n
\"\"
Change the text alignment.<\/figcaption><\/figure>\n

<\/h3>\n

Format Text<\/h3>\n
\"\"
Make text appear bold and\/or italic.<\/figcaption><\/figure>\n

<\/h3>\n

Highlight Text<\/h3>\n
\"\"
Click the small arrow next to italic icon and you’ll see an additional dropdown. Select highlight text and choose a color for the highlight. If you want only a specific word or phrase highlighted, simply highlight the desired text and then apply the highlight color to it.<\/figcaption><\/figure>\n

<\/h3>\n

Text Color<\/h3>\n
\"\"
Click the small arrow next to italic icon and you’ll see an additional dropdown. Select text color and choose a color for the highlight. If you want only a specific word or phrase highlighted, simply highlight the desired text and then apply the highlight color to it.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"

The Paragraph block should be used for content across story pages, especially any text that is longer than a few words. You can find more detail about customization options below. Block Settings The Block Settings are visible in the right hand side of the editor and will show up when you click on the Paragraph […]<\/p>\n","protected":false},"author":3324,"featured_media":0,"parent":13,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/21"}],"collection":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/users\/3324"}],"replies":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":12,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":338,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/21\/revisions\/338"}],"up":[{"embeddable":true,"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/pages\/13"}],"wp:attachment":[{"href":"https:\/\/wpdocs.bu.edu\/bu-stories\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}