Changes

We closed 79 issues, fixed and improved a lot of stuff. The idea of this release is to have smoother and faster development experience. Here is what we changed:

Changelog.

Added

New component SimpleHorizontalSingleSelect
Global css variables for colors will now output rgb values with hex values so you can use them in css variables.
Additional styling in editor for better UX.
100 new icons.
Frontend only style script.
ColorPickerComponent doesn't show a label if not passed, so it can be used inline now.
ColorPickerComponent now shows tooltip (customizable, has defaults) on the button if no label is passed.
CustomSelect can now be switched to compact mode (height reduced a bit) so it can nicely integrate with other option's inline.
CustomSelect has a style property now (currently tweaks border color).
Most of the components can now be disabled through an attribute.
Async options filtering in CustomSelect component.
Eightshift-forms as a default allowed blocks in the setup.
Throttle js helper.
Multiple A11y improvements.
Alt tag to the image component.
Paragraph as a default block in the editor.
Quote block.
New component solid-gradient-picker.
New component alignment-toolbar.
Component responsive added new styles and few new features.
Npmrc file for compatibility.
All block/components implements css variables.
Columns converted to css grid.
Option to deprecate block markup and attributes.
Option to pass url and title to share in share component.

Fixed

On project setup project version is set to 1.0.0 and not remaining set from the libs release version, plug changelog is cleared.
Paste helper in RichText is now (a bit) smarter about the passed separator length. Also now throws an Error if separator length would occlude the truncate string completely.
Custom select component is smarter and has more options.
Editor and component styles are now separate so components can be used as is.
WP 5.9 style issues.
Scripts reference so it supports auto suggestions.
ColorPalleteCustom no longer uses WP hooks.
Removed console logs in Storybook stories.
Responsive variable's breakpoint order issues.
@babel/polyfill is loaded more than once.
FilterComponentOptions helper is overriding values for all new components.
Yoast seo plugin helper for yoast seo.

Removed

Remove Swiper from the libs

Updated

Eightshift coding standards.

Migration guide

This migration guide is represents migration for:

eightshift/boilerplate - 6+ --> 7.0.0
eightshift/frontend-libs - 5+ --> 6.0.0
eightshift/libs - 4+ --> 5.0.0

Required changes:

Migration time: ~30min.

Make sure that all editor scripts are loaded from @eightshift/frontend-libs/scripts;
Make sure that all frontend JS scripts that use frontend helper load ony from @eightshift/frontend-libs/scripts/helpers.
We have removed PHP class LabelGenerator and added it in the helper Traits so it you are using it in you project you should refactor it like in the example provided here.
In src>Blocks>Blocks.php remove getBlocksPath method because we are not using it anymore.
In src>Blocks>Blocks.php replace all instances of $this->getSettings()['namespace'] with Components::getSettingsNamespace(). Generally every place that you use $this->getSettings() use Component store instead.
In src>Blocks>Blocks.php add new filter \add_action('wp_footer', [$this, 'outputCssVariablesInline']); to be able to output one style tag styles.
In src>Blocks>manifest.json add config keys used to trigger different behaviour of the boilerplate.

"config": {
	"outputCssGlobally": true,
	"outputCssOptimize": true,
	"outputCssSelectorName": "esCssVariables",
	"outputCssGloballyAdditionalStyles": [
		":root {--es-loaded-opacity: 1;}"
	],
	"useWrapper": true
},

Open src>Blocks>assets folder and compare it with our new layout and files located here.
In src>Enqueue>Blocks>EnqueueBlocks.php add new filter \add_action('wp_enqueue_scripts', [$this, 'enqueueBlockFrontendStyle'], 50); to output new frontend only styles.
In src>Enqueue>Blocks>EnqueueBlocks.php rename filter callback enqueueBlockScript to enqueueBlockFrontendScript.
Find all usage of ServerSideRender component in JS part. Then in PHP part wherever you use render method you must pass a new attribute blockSsr. Here is an example:

$featuredContentServerSideRender = Components::checkAttr('featuredContentServerSideRender', $attributes, $manifest);

echo Components::render(
	'card-article',
	Components::props(
		'cardArticle',
		$props,
		[
			'blockSsr' => $featuredContentServerSideRender,
		]
	),
);

echo Components::render(
	'layout',
	Components::props('layout', $attributes, [
		'blockClass' => $blockClass,
		'blockSsr' => $featuredContentServerSideRender,
	]),
);

Improvement changes:

You should replace all instances where you are getting the data directly from the array like $globalManifest['globalVariables'], this can be replaced with Components::getSettings().
Or for examle getting the breakpoints $globalManifest['globalVariables']['breakpoints'] can be replaced with Components::setSettingsGlobalVariablesBreakpoints().

Here are all the links for all of the Store helpers that you can use in PHP and in JS.

PHP example:

$globalManifest = Components::getManifest(dirname(__DIR__, 2));

echo $globalManifest['namespace'];

// replace with 

echo Components::getSettingsNamespace();

JS example:

import { globalManifest } from '../../manifest.json';

const {
	namespace,
} = globalManifest;

// replace with 
import { select } from '@wordpress/data';
import { STORE_NAME } from '@eightshift/frontend-libs/scripts';

const namespace = select(STORE_NAME).getSettingsNamespace();

Optional changes:

Migration time: ~5min.

Find all outputCssVariables function usage (JS and PHP) and remove 4th parameter globalManifest because it is not in use anymore.

At this point this parameter will not cause any error but it will be removed in the next major release and then it will cause a fatal error so you should remove it.

Find outputCssVariablesGlobal function usage (JS and PHP) and remove the parameter globalManifest because it is not in use anymore.