Using Placeholders

In most websites, there are strings or variables that will be used throughout the site. Especially in sites that need to support multiple languages, it is not a good idea to hard code such values. Instead placeholders can be used and managed centrally.

For information on how to author placeholders, see the placeholders documentation in the publish section.

Note: the placeholders feature has been moved to the block-collection repository and is not part of the boilerplate.

You can import fetchPlaceholders in your block’s JS or scripts.js and use it as follows to retrieve placeholder strings. You probably have some function or logic in your project to determine the language of the current page based on its path or metadata. In this example, we’ll simply hardcode it to en. This means it will fetch a placeholders sheet in the en folder. Omitting the argument will assume there’s a placeholders sheet in the root folder.

import { fetchPlaceholders } from '/scripts/placeholders.js';

// fetch placeholders from the 'en' folder
const placeholders = await fetchPlaceholders('en');
// retrieve the value for key 'foo'
const { foo } = placeholders;

Key formatting

Keys which contain spaces or dashes in the placeholder sheet will be camel-cased for easier access in JavaScript:

• about us will become aboutUs
• foo-bar will become fooBar
• VIP lounge will become VipLounge

You can use the helper function toCamelCase to convert keys to property names.