Add specific blocks to site build

When you export the landing page to one of the target systems in eWizard, the eWizard.js builder adds all blocks from the blocks-library directory to the site build.

Use requireCurrentBlocks and the DynamicBlocksLoader component to ensure that the builder adds specific blocks to the build. This feature reduces the resulting build size and improves the site performance in the browser.

If you don't use the DynamicBlocksLoader component in the template, the eWizard.js builder adds all the blocks to the build.

The set of blocks in the resulting build is different for the development and production builds:

• In the development build, eWizard.js checks blocks in the blocks.json and blocks-themes.json files. As a result, it excludes all the blocks except the ones used in the specific theme or layout.

• In the production build, eWizard.js adds only the blocks from the current theme of the blocks-themes.json file. If the template doesn't have a blocks-themes.json file, the requireCurrentBlocks is empty, and all blocks are included in the build.

To use requireCurrentBlocks:

1. Add the DynamicBlocksLoader component to the App.vue file of your site project or the index.vue file of your site page.

   <!-- ./App.vue or ./pages/[SITE_PAGE_NAME]/index.vue -->
   
   <template>
     <wiz-root :class="[$editor.mode, ...$DT.rootClasses, { 'opened-in-editor': $editor.isOpenedInEditor }]">
       <DynamicBlocksLoader
         :blocks-themes="blockThemes"
         :blocks-list="blocksList"
       ></DynamicBlocksLoader>
     </wiz-root>
   </template>
   
   <script>
   import { DynamicBlocksLoader } from 'ewizardjs';
   import { themes } from './common/blocks-library/blocks-themes.json';
   import { components } from './common/blocks-library/blocks.json';
   
   export default {
     name: 'wiz-app',
     components: {
       DynamicBlocksLoader,
     },
     data() {
       return {
         blockThemes: themes,
         blocksList: components,
       };
     },
   };
   </script>
   
   <style lang="scss">
   @import 'common/styles/imports.scss';
   
   .previewer-app-container .root {
     width: 1920px !important;
     max-width: none !important;
   }
   </style>

2. Import requireCurrentBlocks to the globalBlocks.js file.

   // ./common/extensions/globalBlocks.js
   
   import { requireCurrentBlocks } from 'ewizardjs';
   
   const blocks = requireCurrentBlocks();
   
   export default function (Vue) {
     blocks.forEach((block) => {
       Vue.component(block.name, block);
     });
   }

As a result, the production build includes only the blocks from the blocks-themes.json file.

Display specific blocks from a theme

You can use the name property of the DynamicBlocksLoader to display groups of default blocks from the blocks-themes.json file on a site layout or page. This is useful when configuring the content of your header, footer, and other site elements.

To display specific blocks from a theme:

1. Configure the displayed blocks in an array of the defaultBlocks object in the blocks-themes.json file of the site. For example, the footer-block-viseven-1 block is included in the footer array:

   // ./common/blocks-library/blocks-themes.json
   
   {
     "themes": {
       "viseven": {
         "blocks": [
           {
             "id": "header-block-1",
             "name": "Header block 1",
             "icon": "/themes/viseven/media/images/blocks-icons/header-block-1.png"
           },
           {
             "id": "footer-block-viseven-1",
             "name": "Footer block 1",
             "icon": "/themes/viseven/media/images/blocks-icons/footer-block-viseven-1.png"
           }
         ],
         "defaultBlocks": {
           "$default": [
             "header-block-1",
           ],
           "footer": [
             "footer-block-viseven-1"
           ],
         }
       }
     }
   }

2. Add the name of your array to the name property of the <DynamicBlocksLoader> tag in the App.vue file of your site project or the index.vue file of your site page. For example, footer:

   <!-- ./App.vue or ./pages/[SITE_PAGE_NAME]/index.vue -->
   
   <template>
     <wiz-page>
       <DynamicBlocksLoader
           :blocks-themes="blocksThemes"
           :blocks-list="blocksList"
           name="footer"
       ></DynamicBlocksLoader>
     </wiz-page>
   </template>

As a result, only the footer-block-viseven-1 block from the footer array is displayed on the layout or site page.