How to Make Font Size Editable in an Element Block

Letting a user customize the size of the font while editing a VOLT store in VOLT’s Site Designer is easy using Element custom Blocks.

Changing Font Sizes in VOLT Stores

A common request by users of the VOLT store is to be able to change the size of fonts displayed in the store.

Thankfully, VOLT’s Site Designer provides many built-in options to manage font size, allowing users to tweak fonts on their own.

The size of the font across the entire VOLT store can be changed by configuring the settings for the current theme. (See: What is a theme in VOLT’s Site Designer? in the VOLT Learning Center).

VOLT also offers the ability to change the font size of the text displayed in individual Blocks.

Certain built-in Blocks offer a rich text editor that make changing text size quite easy.

For precise control over font size in a VOLT store, custom Blocks can be created using the Element Platform .

This article discusses how to change font size globally in a theme, how to use the built-in “Text” Block to change font size, and how to create custom Blocks with font sizes editable by the user.

How to Change Font Size in VOLT’s Site Designer

Changing the size of all the fonts on a VOLT store is as simple as editing a single configuration setting in the store’s theme.

VOLT’s Site Designer (https://admin.volusion.com/designer ) allows any user to change the “Base Font Size” (default: 16px) and “Line-height” (default: 1.15). These settings are available by clicking the Design Settings button at the top-center of VOLT’s Site Designer.

(For all the options available in Design Settings , please read the article Design Settings in the VOLT Help Center.)

The font size and line height of the Blocks in a Theme adjusts themselves based on these user-configurable settings.

For more information on these values, please refer to the MDN Docs for font-size and for line-height .

For more information, please see the section on typography in the how-to article Design A New Theme With Site Designer Tutorial located in the Element Platform Documentation

The Simple Way to Edit Font Sizes (Using the built-in Text Block)

The built-in Text Block (in the “Misc” section) allows users to use a rich text editor (also called a WYSIWYG editor) that allows them to edit the font size directly in the browser.

The built-in Text Block may be the best option for your users, as it requires no customization or maintenance.

For information on adding Blocks to pages in the VOLT store, please see the article on Blocks in the VOLT Learning Center.

You may also want to refer to the section on adding a Text Block in the previously mentioned tutorial Design a New Theme With Site Designer in the Element Platform Documentation.

If you want additional features than offered by the rich text editor, you will need to create custom Blocks for the VOLT store using Element.

Thankfully, the Element Platform makes creating custom Blocks easy.

Building Custom Blocks to Customize Font Sizes

The rest of this article assumes you know the basics of creating and publishing a custom Block using Element.

If you have never made a custom Element Block or need a refresher, please read the 15-minute article “Building An Element Page Tutorial” in the Element Platform Documentation or watch the YouTube playlist “Element Tutorial | VOLT Learning Center” (27 minutes total playtime).

You will need authorization to develop Blocks before beginning this tutorial. Please refer to “How To Get Approved To Develop Blocks” in the Element Platform Documentation.

The next section briefly discusses making a custom Block with a rich text editor.

Following that section, the rest of this article contains a detailed description of how to make a custom Block that controls font size based on user input.

Creating Your Own Rich Text Editor in a Custom Block

When building a custom Block, the “editorFull” Element Proptype provides the same rich text editor functionality as the built-in Text Block.

To use the editorFull proptype in a custom Block, put the following in /src/configs.js:

import { ElementPropTypes } from '@volusion/element-proptypes'

export const configSchema = {
text: {
label: "Text with Rich Text Editor",
type: ElementPropTypes.editorFull,
},
}

export const defaultConfig = {
text: "<h1>Full WYSIWYG</h1>",
}

Like the built-in Text Block, this may be plenty of control for your user. In fact, it can be too much, since it allows headings, images and links in addition to formatting controls.

If you want to make a custom Block with less customization, it is easy to use data from a custom Block to make a dynamic change in the styles (or CSS ) in the Block.

Read on to learn how to make a custom Block that has user-editables fields to change font size.

Making a CSS Style Editable in a Custom Block

The Element platform uses a “CSS-in-JS ” (sometimes called “JSS”) package called Aphrodite

For more information on using Aphrodite, see the article How To Style a Block With Aphrodite in the Element Platform Documentation.

This tutorial expands the principles of that article into a complete custom Block, allowing users to modify the font size of the heading and of the text with custom fields.

This article will demonstrate modeling the “font-size” CSS property using both the “string” Element Proptype and the “number” Element Proptype .

When the font-size is a number, the custom Block needs to append a CSS length unit to the number to create the font-size, as you will see.

Start a New Custom Block Using the Element CLI

From the directory where you would like to keep your Element Blocks, run the following terminal commands to make a new Block called “CustomFontSizeHeading”:

element new CustomFontSizeHeading
cd CustomFontSizeHeading
npm install

Next, initialize a git repository in the directory to track changes with the commands:

git init
git add -A
git commit -am "Initial Commit"

Now would be a good time to publish your repository online for back-up and collaboration, such as to GitHub. (Here are the instructions for Adding a repository from your local computer to GitHub with GitHub Desktop.)

You may already be logged in to the Element CLI. If you are not, then enter the command:

element login

This login command will ask you for the username and password you use with VOLT’s Site Designer.

Edit the /src/configs.js File

In your preferred text editor or IDE (such as VS Code), open the /src/configs.js file.

Replace the entire file with the following code:

import { ElementPropTypes } from "@volusion/element-proptypes"

export const configSchema = {
heading: {
label: "Heading text",
type: ElementPropTypes.string,
},
headingFontSizeString: {
label: "Heading font size (with CSS units)",
type: ElementPropTypes.string,
},
text: {
label: "Text content",
type: ElementPropTypes.string,
},
textFontSizeNumber: {
label: "Heading font size (numeric)",
type: ElementPropTypes.number,
},
cssLengthUnit: {
label: "CSS length unit for text font size",
type: ElementPropTypes.string,
},
}

export const defaultConfig = {
heading: "Custom heading",
headingFontSizeString: "2em",
text: "Custom text",
textFontSizeNumber: 24,
cssLengthUnit: "px",
}

This code establishes five configurable props for use in your Custom Font Size Heading Block. These props will be editable in VOLT’s Site Designer by the user of the Block.

As previously mentioned, this tutorial demonstrates saving the CSS font-size property as both a string and a number plus a unit.

Configure the /local/index.js File

In your IDE or text editor, open the /local/index.js file, where you will add in some local properties (or props) for testing how the Block will respond to user changes.

Replace the const localEnvPropOverrides with the following code:

const localEnvPropOverrides = {
heading: "Local prop for heading",
headingFontSizeString: "4em",
text: "Local prop for text",
textFontSizeNumber: 3,
cssLengthUnit: "em",
}

These local environment props let you simulate the effect of the user changing the values on the in VOLT’s Designers while previewing the resulting custom Block in your local browser.

Update the /src/Block.js File

Open up the /src/Block.js file in your text editor or IDE. This is where you will create the functionality and display of the custom Block, which is a React component.

Replace the entire contents of the file with the following code:

import React from "react"
import { css, StyleSheet } from "aphrodite/no-important"
import { getStyles } from "./getStyles"
import { defaultConfig } from "./configs"

const Block = (props) => {
const classes = StyleSheet.create(getStyles(props))
return (
<React.Fragment>
<h1 className={css(classes.heading)}>{props.heading}</h1>
<p className={css(classes.text)}>{props.text}</p>
</React.Fragment>
)
}

Block.defaultProps = defaultConfig
export default Block

This custom Block will show a <h1> heading and a <p> paragraph. The <h1> and <p> tags each contain separate text props (called heading and text, respectively, in the props).

Update the /src/getStyles.js File

Open up the /src/getStyles.js file in a text editor or IDE. This is where you will customize the CSS styles using Aphrodite.

Replace the contents of the file with the following code:

export const getStyles = ({
headingFontSizeString,
textFontSizeNumber,
cssLengthUnit,
}) => {
return {
heading: {
fontSize: headingFontSizeString,
},
text: {
fontSize: textFontSizeNumber + cssLengthUnit,
},
}
}

The getStyles function simply tells Aphrodite how to convert your props into CSS tags.

How the getStyles Function Works

The getStyles function takes the props as an argument and returns a JavaScript object where each requested class name is a property. The value of each class name is another object, which links CSS rule names (also called CSS properties) to their desired values.

In this case, you create a heading class with a fontSize of headingFontSizeString.

For the text class, the fontSize concatenates the number textFontSizeNumber and the string cssLengthUnit, creating a string.

Note that because you are writing Javascript-based CSS, the CSS rule names are in camelCase, not hyphenated, so you have fontSize, not font-size.

The magic happened back in the Block.js, where you imported { css, StyleSheet } from "aphrodite/no-important" as well as this getStyles function.

Aphrodite combines these elements into what you want, creating a custom class for the heading and the text:

const classes = StyleSheet.create(getStyles(props))
<h1 className={css(classes.heading)}>{props.heading}</h1>
<p className={css(classes.text)}>{props.text}</p>

The result is that you have dynamic control over the font size of your heading and text.

For additional information on customizing CSS in Element, please read Styling Your Block With CSS in the Element Platform Documentation. 

Launch the Local Server to Check Out the Results

Start your local development environment by using the npm run start command:

npm run start

This should open a new window in your browser so you can check out the new custom Block. If it does not, then open a browser and navigate to http://localhost:4000/ to access the Block.

The Block will show the local props (defined in /src/index.js) instead the default props (from /src/configs.js). You can try modifying the local props (/src/index.js) to check out the results.

Update Your Test Files to Skip the Tests

Usually, it is worthwhile to open a second terminal window and run the test suite (using the npm run test command) while editing your custom Block. In order to publish your Block to VOLT’s Site Designer, you must not have any failing tests. This tutorial does not cover updating the tests for your Custom Font Size Heading Block, so you need to edit the test files to skip the tests.

To skip the tests, modify the /__test__/Block.spec.js file to include .skip after the describe call:

describe.skip("The Block", () => {

Add the same text (.skip) to the /__test__/AMP.spec.js file:

describe.skip('The Block when loaded over AMP', () => {

This will skip all the tests, which will allow you to publish your new Block to the Store. When creating your own custom Blocks, it is a good idea to include tests for custom Blocks. Having tests will help prevent bugs when making future updates to the Block.

Publish the New Custom Block

Now you are ready to publish your custom Block so that you can use it in VOLT’s Site Designer.

Stop the local server (npm start) by terminating the running process using the shortcut Ctrl+C.

To publish your new Block from Element to VOLT’s Site Designer, you must first build the Block using the npm run build command:

npm run build

Next, you can publish the Block from the Element CLI by using the element publish command. Use the required -n (“name”) flag to set the name of the Block:

element publish -n "Custom Font Size Heading"

Note that the name of the custom Block should be in quotes. The Element CLI will ask you to select the category for this Block using the arrow keys. Choose Titles by scrolling down with the down arrow and then hitting the Enter key.

You’ll see a warning that no image exists for “thumbnail.png” — meaning there is no thumbnail image for your Block to display in VOLT’s Site Designer. For help adding a thumbnail, please refer to the YouTube video How to Create a Thumbnail for Your Block | Element Tutorial | VOLT Resource Center (4 min playtime) or the Element CLI’s publish command documentation. For general information on publishing Blocks, please read the Element CLI’s publish command.

Create a New Theme in VOLT’s Site Designer

Having published the new Custom Font Size Heading Block, you can create an isolated workspace in VOLT’s Site Designer to try out the new Block.

Start by creating a new theme to work with, then add the new Block to the Home page.

In your web browser, log on to https://www.volusion.com/login using your developer account.

Click on Site Designer in the left-hand sidebar navigation. (If you are already logged in, you can browse directly to https://admin.volusion.com/designer.)

Click the + Create new theme link in Site Designer (just right of Inactive Themes) in order to start a new theme. Enter “Custom Font Size Test Theme” as the Theme Name, then click the Create button at the bottom-right of the dialog box.

If VOLT’s Site Designer happened to open the store’s active theme, just click Change Theme at the top-left of the screen next to the name of your theme. That will take you back to the screen where you can create a new theme.

Edit the Home Page Inside Site Designer

Inside of VOLT’s Site Designer, you are already on the homepage, referred to “Page: Home” in the drop-down menu in the top-center of the Site Designer interface.

You will edit this page using VOLT’s Site Designer to add the custom Block.

In a new theme, this page will be largely empty. By default, the homepage shows only the Header Block at top and the Footer Block at bottom.

To add your new custom Block to the homepage, just click the plus sign (+) above the text Add Block, then click Titles in the sidebar that appears at the left.

Find the name of the custom Block that you entered when you ran the element publish command with the -n “Name” flag (Custom Font Size Heading).

Click Add Block to add this custom Block to the page. To change the text or font-size in the custom Block, first click on the newly-added Block to select it for editing. Once you have changed the Block’s values, click Done to save your changes.

In your new theme, try changing the theme’s settings by clicking Design Settings in the top-center of VOLT’s Site Designer. Scroll down in the sidebar at left, and you will be able to change Base Font Size. Try it, and you will see your Custom Block responds to the change. When finished, click Done at the bottom-left of the sidebar.

Previewing the Block in the VOLT store

You can preview the new homepage using the button labeled Preview at the top-left of VOLT’s Site Designer. This will show you the preview version of your VOLT store.

Your new custom Block is still in “Staging” (or development), meaning it has not yet been “released” to production.

Because the Block is still in Staging, the Publish button in VOLT’s Site Designer will not publish the custom Block to a live VOLT store.

The next sections discuss making changes to your Block and releasing your Custom Font Size Heading Block to public VOLT stores.

Update the Minor Version of the Block

When you make changes to your custom Block that you want to preview in VOLT’s Site Designer, you need to use the command npm run build and then deploy the updated version of the Block using the element update command:

npm run build
element update

This creates a new minor version, which will automatically update the custom Block inside VOLT’s Site Designer as well as in all VOLT stores currently using that Block. For more information, please see How To Release A Minor Version.

It is recommended that you track minor version numbers using git:

git commit -am "Version 1.1"
git tag 1.1

To revert back to the last minor version, you can use the element rollback command, which rolls the Block back to the previous minor version:

element rollback

You might want to reset your git repository to that minor version as well. This will avoid confusion while developing. One way to do so is using the git reset --hard and git revert commands with the tag name:

git reset --hard 1.0
git revert 1.0

For more information on how to roll back to a previous minor version of a Block, please refer to Rollback A Block Change in the Element Platform Documentation.

Releasing a Custom Block to Production

Up until this point, the Block has been in development, which is called Staging in Element terminology. Staging means that the Block is only visible on the preview version of a store in VOLT’s Site Designer, not the public (or live) storefront.

To make the Block available to the public, you can release the Block using the element release command with the -n “Notes” flag:

element release -n "Release Notes for this Version"

Note that the release notes should be contained in quotes. Release notes are optional but highly recommended.

The element release command will ask you to confirm (“Y” for yes or “n” for no). A confirmation is necessary because minor version changes take effect immediately on release in all VOLT stores that have your custom Block installed. 

You should mark the public release using git:

git commit -am "Public Version 1.0"
git tag 1.0

The first release command will release Version 1 of your custom Block. For more information, see the Element CLI’s release command.

Releasing a Major Version of a Custom Block

If you make significant changes to any custom Block, such as changes to the visual design of a Block, you should consider creating a new major version.

You can create a new major version using the element publish command with the -m “Major” flag in addition to the -n “Notes” flag:

element publish -m -n "Release Notes for Major Version 2.0"

You would follow the publish command with the usual commands to release a new version:

npm run build
element update
element release -n "Release Notes for this Major Version"
git commit -am "Version 2.0"
git tag 2.0

For more information, please refer to the article Release A New Major Block Version in the Element Platform Documentation.

In Element, minor version changes are immediately deployed to all VOLT stores using a custom Block when the minor version change is released to production.

But, on the other hand, major versions need to be deployed manually (using VOLT’s Site Designer) in all stores using that custom Block after a major version change is released to production.

For more details on Block versioning, please read How To Track Block Versions in the Element Platform Documentation.

Conclusion

Being able to change the font size is a basic function of website design, so VOLT allows you multiple ways to customize the font size of a theme. Each theme of a VOLT store has a configurable Base Font Size property, allowing you to change the size of the font across the entire site using VOLT’s Site Designer.

The built-in Text Block (located in the Misc section) has a rich text editor allowing unlimited customization of font size and headings in a single Block. This rich text editor can also be added to custom Blocks built in Element, allowing significant personalization of the text fields inside custom Blocks.

Element is a powerful system in that it even allows you to create custom Blocks that dynamically change CSS style properties from user input. This tutorial showed creating a custom Block where the user could input any font size, and the Block would apply this value to the CSS font-size property inside the Block.

For further reading on using CSS with Element, please read Styling Your Block With CSS on the Element Platform Documentation.