Version 5 to 6

This migration guide is represents migration for:

• eightshift/boilerplate - 5+ --> 6.0.0
• eightshift/frontend-libs - 4+ --> 5.0.0
• eightshift/libs - 3+ --> 4.0.0

JavaScript changes

Migration time: ~30min.

getOptionColors helper

Moved from get-option-colors.js file to get-options.js. Import remained the same.

getOptions changed to getOption and properties changed

Example: buttonSize.

• Old usage: getOptions(manifest, componentName, 'size', options);
• New usage: getOption('buttonSize', attributes, manifest);

getOptions new helper

A new helper was created for easier merging of component options and attributes passed from the parent component.

• Old usage: const options = {...manifestOptions, ...attributes.options};
• New usage: options={getOptions(attributes, manifest)}

getOptions for color

getOptions helper now supports color returns.

Example: buttonColor

• Old usage: getOptionColors(getOptions(manifest, componentName, 'color', options);
• New usage: getOption('buttonColor', attributes, manifest, true);

props helper properties changed

Now it only supports 2 properties (earlier it was 4) Second property is the component name you are passing into, if the component name was changed, that name should be passed. It supports camelCase and kebab-case as a component name. It should be the same as defined in the manifest.json. Also keys was swiped.

Example 1:

• Old usage: {...props(attributes, 'image')}
• New usage: {...props('image', attributes)}

Example 2:

• Old usage: {...props(attributes, 'heading', 'intro')}
• New usage: {...props('intro', attributes)}

Example 3:

• Old usage: {...props(attributes, 'button', '', true)}
• New usage: {...props('button', attributes)}

setAttributes now must use getAttrKey helper

In order to use full flexibility of components each setAttributes function must have getAttrKey helper used to get the correct attribute name.

Example: buttonColor

• Old usage: onChange={(value) => setAttributes({ [`${componentName}Color`]: value })}
• New usage: onChange={(value) => setAttributes({ [getAttrKey('buttonColor', attributes, manifest)]: value })}

checkAttr | checkAttrResponsive no longer supports componentName parameter

Example: buttonContent

• Old usage: checkAttr('buttonContent', attributes, manifest, componentName);
• New usage: checkAttr('buttonContent', attributes, manifest);

move checkAttr from hte attributes spread

Old usage:

	const {
		setAttributes,
		componentClass = manifestComponentClass,
		selectorClass = componentClass,
		additionalClass,
		blockClass,

		buttonUse = checkAttr('buttonUse', attributes, manifest),

		buttonType = checkAttr('buttonType', attributes, manifest),
		buttonIconPosition = checkAttr('buttonIconPosition', attributes, manifest),
		buttonIconUse = checkAttr('buttonIconUse', attributes, manifest),
		buttonIsLink = checkAttr('buttonIsLink', attributes, manifest),
	} = attributes;

New usage:

	const {
		setAttributes,
		componentClass = manifestComponentClass,
		selectorClass = componentClass,
		additionalClass,
		blockClass,
	} = attributes;

	const buttonUse = checkAttr('buttonUse', attributes, manifest);
	const buttonType = checkAttr('buttonType', attributes, manifest);
	const buttonIconPosition = checkAttr('buttonIconPosition', attributes, manifest);
	const buttonIconUse = checkAttr('buttonIconUse', attributes, manifest);
	const buttonIsLink = checkAttr('buttonIsLink', attributes, manifest);

Included keys in props helper.

You don't need to pass this helpers if you don't want to override them because they are passed using props helper. This is true only for the passing inside the components. For the block you need to pass them manually. Example: Block → Component - need to pass setAttributes Component → Component - no need to pass setAttributes or anything that you're not overriding.

PHP changes

Migration time: ~30min.

props helper removed from Block.php

Remove props function from Blocks.php class and the accommodating use call on the top of the file.

props helper properties changed

The same as in JS, and replace Block with Component method.

Example 1:

• Old usage: Blocks::props($attributes, 'button', '', true)
• New usage: Components::props('button', $attributes)

Example 2:

• Old usage: Blocks::props($attributes, 'button')
• New usage: Components::props('button', $attributes)

Example 3:

• Old usage: Blocks::props($attributes, 'button', 'new')
• New usage: Components::props('new', $attributes)

Help

We prepared a couple of regular expressions (regexes) to help with the migrations.

Swipe props helper in JS:

\{...props\(attributes, (['"]{1}[a-zA-Z\-]+['"]{1})\)\} to {...props($1, attributes)}

Swipe props helper in PHP:

Components::props\(\$attributes, ('[a-zA-Z\-]+')\) to Components::props($1, $attributes)