Version 7 to 8

This migration guide contains migration instructions for:

• eightshift/boilerplate - 7+ --> 8.0.0
• eightshift/frontend-libs - 6+ --> 7.0.0
• eightshift/libs - 5+ --> 6.0.0

Required changes

Migration time: ~10min.

1. Update composer.json to "infinum/eightshift-libs": "^6.0".

2. Update package.json to the latest versions:

   "@eightshift/frontend-libs": "^7.0.0",
   "husky": "^8.0.1",
   "webpack": "^5.73.0",
   "webpack-cli": "^4.10.0"

3. Check package.json for additional packages that might need updating, such as coding standards.

4. Add .browserslistrc to the root of your theme/plugin and copy the details from here.

5. We have removed the normalize package from the project as it was unmaintained. Search your project and replace:

   @import 'normalize-scss';
   @include normalize();

   with this:

   @import '@eightshift/frontend-libs/styles/scss/normalize';

6. We've removed @babel/polyfill package, so please remove require('@babel/polyfill'); from your project or install it manually if you need to support older browsers.

7. If your Webpack build outputs warnings such as:

   Should not import the named export 'componentJsClass' (imported as 'componentJsClass') from default-exporting module (only default export is available soon).

   check the JS files used on the frontend and replace:

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

   with this:

   import manifest from './../manifest.json';
   
   const {
   	componentJsClass,
   } = manifest;

8. If you were using getAllBlocksList function as a callback for allowed_block_types_all filter, there is no need for change. However, if you used a custom implementation function, consider using the getAllAllowedBlocksList in your callback since it provides more options and gives more control over blocks that are being used in the project.

Swiper changes:

Migration time: ~5min.

Swiper is not a dependency of eightshift Boilerplate, but if you are using Swiper in your project and have something like this:

@import '~swiper/swiper.scss';
@import '~swiper/modules/pagination/pagination.scss';

please check Swiper's package.json in node_modules/swiper/package.json and find the exports key, find the styles you are using and replace the path for the correct export path. Please note that this export can change depending on the Swiper version you are using.

For example, for Swiper 8.x.x, you should replace

@import '~swiper/swiper.scss';
@import '~swiper/modules/pagination/pagination.scss';

with

@import '~swiper/css';
@import '~swiper/css/pagination';

Storybook changes:

Migration time: ~10min.

1. Check if the project is using the Storybook package @eightshift/storybook because we changed the release numbers. Check the eightshift-storybook repository's releases page for reference. At the time of writing this, the current version is 1.4.1.

2. Open .storybook/main.js. It should look like this:

   module.exports = {
   	stories: ['./../src/Blocks/**/story.js'],
   	addons: [
   		'@storybook/addon-essentials',
   		'@storybook/addon-a11y'
   	],
   	core: {
   		builder: 'webpack5',
   	},
   	features: {
   		emotionAlias: false,
   	}
   };

3. Open .storybook/preview-body.html. It should look like this:

   <style>
   	body {
   		padding: 0.75em;
   		opacity: 1;
   	}
   </style>

4. Open .storybook/preview-head.html. It should look like this:

   <script>
   	window.wp = {};
   	esRedesignBlocksLocalization = {}
   </script>

5. Open .storybook/preview.js. It should look like this:

   import { dispatch } from '@wordpress/data';
   import { STORE_NAME } from '@eightshift/frontend-libs/scripts/editor/store';
   import { storybookWindowObjects, storybookDefaultMocksCategories, storybookDefaultMocksColorPalette, storybookWpStyles } from '@eightshift/frontend-libs/scripts/storybook';
   import globalSettings from '../src/Blocks/manifest.json';
   
   // Storybook order is really important because it won't work in any configuration. Be careful when changing stuff here.
   
   // Set default window objects.
   storybookWindowObjects();
   
   // Set default categories.
   storybookDefaultMocksCategories();
   
   // Set default color palette.
   storybookDefaultMocksColorPalette(globalSettings);
   
   // WP styles.
   storybookWpStyles();
   
   // Project styles.
   require('./../assets/styles/application.scss');
   
   // Project Blocks Frontend Part.
   require('./../src/Blocks/assets/styles/application-blocks.scss');
   require('./../src/Blocks/assets/styles/application-blocks-editor.scss');
   
   // Project Blocks Editor Part.
   require('../src/Blocks/assets/scripts/application-blocks-editor');
   
   // Prevent one inline style tag.
   dispatch(STORE_NAME).setConfigOutputCssGlobally(false);