Merge pull request #317 from infinum/experiment/playground

Broken link fix

website/blog/2022-03-03-adding-blocks-wpcli.md

@@ -7,7 +7,7 @@ date: 2022-03-14
 tags: [eightshift, boilerplate, wpcli, components, blocks]
 hide_table_of_contents: false
 ---
-Although there are a few basic blocks available after creating a project, there are a lot more blocks available in the dev kit. However, you have to add them to your project using WP-CLI (the simplest method). To see the complete list of available components and blocks, visit our [Storybook](/storybook).
+Although there are a few basic blocks available after creating a project, there are a lot more blocks available in the dev kit. However, you have to add them to your project using WP-CLI (the simplest method). To see the complete list of available components and blocks, visit our [Storybook](/devkit-components).
 
 These can be used out-of-the-box, but also as a good starting point if you need similar blocks in your projects. It will also speed up your development time since you don't have to build everything from scratch.
 

website/blog/2022-04-25-using-assets.md

@@ -99,7 +99,7 @@ Here are some examples of icons available out-of-the-box in our Icon component:
 
 ## Using icons for editor and block options
 
-When developing your blocks and adding new options, you may need to add icons to improve the user experience. We have many icons already available for use. You can see the full list in our [Storybook](/storybook) under `Editor -> Icons` section. We already added the icon when adding a new Color Theme option for the Quote block. Here is the simplified version:
+When developing your blocks and adding new options, you may need to add icons to improve the user experience. We have many icons already available for use. You can see the full list in our [Storybook](/devkit-components) under `UI icons` and `Block icons` section. We already added the icon when adding a new Color Theme option for the Quote block. Here is the simplified version:
 ```jsx
 import { ColorPaletteCustom, IconLabel, icons } from '@eightshift/frontend-libs/scripts';
 

website/docs/basics/block-structure.md

@@ -31,8 +31,6 @@ We suggest you always use the full name and never abbreviate the block name. If
   * heading-transforms.js
   * manifest.json
 
-For example, you can check the [storybook](/storybook).
-
 ### assets
 
 In this folder, you'll define all the custom JavaScript functionality for your block that will only be used on the front end of the application. You must provide the `index.js` file in this folder, as a starting point, and the rest is up to you. We recommend using [JavaScript dynamic imports](dynamic-import) for all your front-end scripts. This ensures that the JavaScript is only loaded in the application when it is used and not before. By using dynamic import, you optimize your application and make it load faster.

website/docs/basics/blocks-component-structure.md

@@ -28,8 +28,6 @@ We suggest you always use the full name and never abbreviate for the component n
   * heading-style.scss
   * manifest.json
 
-For example, you can check the [storybook](/storybook).
-
 :::note
 All files in components are optional.
 :::

website/docs/legacy/v4/guides/blocks-structure-block-item.md

@@ -22,8 +22,6 @@ Your custom block structure should look like this:
 | |____manifest.json
 ```
 
-For example, you can check [storybook](/storybook).
-
 ### components
 Components folder holds three files `block-name-options.js`, `block-name-editor.js` and `block-name-toolbars.js`. Each of these files represents a part of the Block Editor block that is used in the editor. We have separated options, editor and toolbar in separate components for the sake of readability and reusing components in different projects.
 

website/docs/legacy/v4/guides/blocks-structure-component.md

@@ -20,8 +20,6 @@ Basic component structure should like something this:
 | |____component-name-style.scss
 ```
 
-For example, you can check [storybook](/storybook).
-
 ### components
 This folder contains all the javascript components that are used in the component. The folder can include `editor`, `options` or `toolbar` component.
 

website/docs/legacy/v5/basics/blocks-component-structure.md

@@ -29,8 +29,6 @@ We suggest you always use the full name and never abbreviate for the component n
   * heading-style.scss
   * manifest.json
 
-For example, you can check the [storybook](/storybook).
-
 > All files in components are optional.
 
 ### assets

website/docs/legacy/v6/basics/block-structure.md

@@ -31,8 +31,6 @@ We suggest you always use the full name and never abbreviate the block name. If
   * heading-transforms.js
   * manifest.json
 
-For example, you can check the [storybook](/storybook).
-
 ### assets
 
 In this folder, you'll define all the custom JavaScript functionality for your block that will only be used on the front end of the application. You must provide the `index.js` file in this folder, as a starting point, and the rest is up to you. We recommend using [JavaScript dynamic imports](dynamic-import) for all your front-end scripts. This ensures that the JavaScript is only loaded in the application when it is used and not before. By using dynamic import, you optimize your application and make it load faster.

website/docs/legacy/v6/basics/blocks-component-structure.md

@@ -28,8 +28,6 @@ We suggest you always use the full name and never abbreviate for the component n
   * heading-style.scss
   * manifest.json
 
-For example, you can check the [storybook](/storybook).
-
 > All files in components are optional.
 
 ### assets

website/docs/legacy/v7/basics/block-structure.md

@@ -31,8 +31,6 @@ We suggest you always use the full name and never abbreviate the block name. If
   * heading-transforms.js
   * manifest.json
 
-For example, you can check the [storybook](/storybook).
-
 ### assets
 
 In this folder, you'll define all the custom JavaScript functionality for your block that will only be used on the front end of the application. You must provide the `index.js` file in this folder, as a starting point, and the rest is up to you. We recommend using [JavaScript dynamic imports](dynamic-import) for all your front-end scripts. This ensures that the JavaScript is only loaded in the application when it is used and not before. By using dynamic import, you optimize your application and make it load faster.

website/docs/legacy/v7/basics/blocks-component-structure.md

@@ -28,8 +28,6 @@ We suggest you always use the full name and never abbreviate for the component n
   * heading-style.scss
   * manifest.json
 
-For example, you can check the [storybook](/storybook).
-
 > All files in components are optional.
 
 ### assets

website/docs/legacy/v8/basics/block-structure.md

@@ -31,8 +31,6 @@ We suggest you always use the full name and never abbreviate the block name. If
   * heading-transforms.js
   * manifest.json
 
-For example, you can check the [storybook](/storybook).
-
 ### assets
 
 In this folder, you'll define all the custom JavaScript functionality for your block that will only be used on the front end of the application. You must provide the `index.js` file in this folder, as a starting point, and the rest is up to you. We recommend using [JavaScript dynamic imports](dynamic-import) for all your front-end scripts. This ensures that the JavaScript is only loaded in the application when it is used and not before. By using dynamic import, you optimize your application and make it load faster.

website/docs/legacy/v8/basics/blocks-component-structure.md

@@ -28,8 +28,6 @@ We suggest you always use the full name and never abbreviate for the component n
   * heading-style.scss
   * manifest.json
 
-For example, you can check the [storybook](/storybook).
-
 > All files in components are optional.
 
 ### assets

website/docusaurus.config.js

@@ -40,7 +40,7 @@ module.exports = {
 				{
 					to: '/devkit-components/',
 					activeBasePath: 'devkit-components',
-					label: 'Storybook',
+					label: 'Components',
 					position: 'right',
 				},
 				{