Merge pull request #236 from infinum/feature/visual-refresh

Docs visual refresh

website/blog/2022-01-20-initial-setup.md

@@ -10,7 +10,9 @@ As is often the case when trying out something new, you might encounter some hic
 
 <!--truncate-->
 
-> _**Last updated: 23rd August, 2022**_
+:::info Last update
+August 23, 2022
+:::
 
 If you haven't already, be sure to read our official [Eightshift Docs](/docs/welcome).
 
@@ -48,7 +50,9 @@ You may want to try a few of our WP CLI commands to add another component, block
 
 The final tip in this post is related to troubleshooting. Maybe you tried to add a new class or a new feature to one of the existing blocks. And now the site has crashed. In tech support, the number 1 question is **"Have you tried turning it off and on again?"**. In our case, the number 1 question is:
 
-> Have you tried `composer dump-autoload` and re-running `npm start`?
+:::tip
+Have you tried `composer dump-autoload` and re-running `npm start`?
+:::
 
 ## What's next in store?
 

website/blog/2022-01-21-components-and-blocks.md

@@ -13,9 +13,11 @@ One of the things that is really confusing to newcomers is the difference betwee
 
 ## Component
 
-> A component is like a blank slate, a template without context.
+:::note :es-hide-title:
+A component is like a blank slate, a template without context.
+:::
 
-It doesn't know or even care for what it will be used. Can you combine multiple simple components into one complex component? Absolutely! That's exactly what we'll do in the following example. 
+It doesn't know or even care for what it will be used. Can you combine multiple simple components into one complex component? Absolutely! That's exactly what we'll do in the following example.
 
 Let's say we have a component that consists of an image and a heading. Image and heading are two simple components that come with the theme out-of-the-box.
 
@@ -47,7 +49,9 @@ You can even add conditional logic to your options, e.g. to have the option for
 
 So, what about blocks? Blocks can consist of one or more components and, most importantly, allow you to use them in the editor. Technically, blocks can consist of zero components, but we encourage you to build blocks from components because that increases the reusability.
 
-> Blocks give context to the components.
+:::note :es-hide-title:
+Blocks give context to the components.
+:::
 
 Now that we have our component - let's call it `card-simple` - we can use it in a `Featured Posts` block. In **component's** `manifest.json`, we've already defined how we want it to look by setting some defaults. When using this component in our block, we can override some attributes in **block's** `manifest.json`. Since it will be used for displaying featured posts, we can define that `imagePosition` should be set to **top**.
 

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

@@ -7,13 +7,15 @@ 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](/storybook).
 
 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.
 
 <!--truncate-->
 
-> _**Last updated: 23rd August, 2022**_
+:::info Last update
+August 23, 2022
+:::
 
 ## Storybook
 

website/blog/2022-03-04-modifying-blocks.md

@@ -77,7 +77,9 @@ For editors to be able to choose which color theme to use for the Quote block, w
 }
 ```
 
-> Double-check the path of the manifest used in this example. We're adding it inside the Quote component manifest, not the Quote block manifest. 
+:::caution
+Double-check the path of the manifest used in this example. We're adding it inside the Quote component manifest, not the Quote block manifest.
+:::
 
 After that, since we want to have a fixed number of options, we need to define available options. We can do that inside `options` which is on the same level as `attributes`:
 ```json
@@ -193,7 +195,9 @@ $unique = Components::getUnique();
 	//...
 ```
 
-> Both PHP and JS have the same helpers to make writing code for editor and front view as similar as possible.
+:::note
+Both PHP and JS have the same helpers to make writing code for editor and front view as similar as possible.
+:::
 
 ## Adding options
 After adding these snippets, you should already see that your block is using the blue color theme, which we defined as the default value for `quoteColorTheme` in the manifest. We want to have an easy way to change the color theme in the editor. Now we'll add a new option which will do just that.

website/blog/2022-04-08-adding-fonts.md

@@ -18,7 +18,9 @@ Every project is unique. Logo, colors, fonts, etc. are what define the visual id
 - [Everything Fonts](https://everythingfonts.com/ttf-to-woff)
 - [Transfonter](https://transfonter.org/)
 
-> Just make sure you have the proper license for the fonts you are converting.
+:::caution Warning
+Make sure you have the proper license for the fonts you are converting.
+:::
 
 Fonts should go inside your theme's **_/assets/fonts_** folder. Copy the fonts you want to use there. You will also notice that this folder contains an **_index.js_** file, used to import fonts into your project. Here's an example of how I imported my fonts:
 ```js
@@ -51,7 +53,9 @@ import './NotoSerif-Italic.woff2';
 import './NotoSerif-Regular.woff2';
 ```
 
-> If you don't need to support IE11, don't include `.woff` files. This will save you some bandwidth.
+:::tip
+If you don't need to support IE11, don't include `.woff` files. This will save you some bandwidth.
+:::
 
 To add these fonts as your base font and secondary font, go to the global manifest located in **_/src/Blocks_** and add the following inside `globalVariables`:
 ```json

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

@@ -31,7 +31,9 @@ The filter we are using is called `manifest-item` and we use it to get the URL o
 
 You can see how this is being used for rendering both favicon and header logo in your theme's **_header.php_** file.
 
-> **Tip**: Don't hardcode the filter name in the `apply_filters` function. Always call it via class constants.
+:::tip
+Don't hardcode the filter name in the `apply_filters` function. Always call it via class constants.
+:::
 
 For better organization, you can add additional folders (e.g. **_icons_**, **_placeholders_**) inside the **_assets/images_** folder. Here's an example of how to include them:
 
@@ -48,7 +50,9 @@ import './placeholders/page.png';
 
 If you recall from a previous blog post about [Modifying Blocks](/blog/modifying-blocks-color-theme), you might have already seen an alternative approach to including SVG files in your block or component.
 
-> If you don't have it in your project, be sure to read our blog post about adding blocks and components by using [WP CLI](/blog/adding-blocks-wpcli).
+:::info :es-hide-title:
+If you don't have it in your project, be sure to read our blog post about adding blocks and components by using [WP CLI](/blog/adding-blocks-wpcli).
+:::
 
 Open **_src/Blocks/components/quote/manifest.json_** and you'll see that the icon used by the component is defined inside `resources` as a key-value pair. Key represents the name that we will use to fetch the icon, while the value is SVG code.
 

website/blog/2022-05-10-acf-in-a-project.md

@@ -60,7 +60,7 @@ class IntroAcfMeta extends AbstractAcfMeta
 	 * Intro field name.
 	 */
 	public const INTRO_FIELD_NAME = 'intro';
-	
+
 	/**
 	 * Render acf fields.
 	 *
@@ -104,7 +104,9 @@ if (function_exists('get_field')) {
 }
 ```
 
-> It's better to use class constants because if you decide to change the field name, you will have to change it only in one place.
+:::tip
+It's better to use class constants because if you decide to change the field name, you will have to change it only in one place.
+:::
 
 ## Theme Options
 

website/blog/2022-09-07-block-variations.md

@@ -15,7 +15,9 @@ Let's picture the following scenario: You just created a block with many options
 
 Block variations allow us to override default block attributes. We can select a variation from the block list with all preset options instead of manually setting them.
 
-> Please note that you cannot add new attributes in variations. Only attributes that exist in the parent block can be used.
+:::note
+You cannot add new attributes in variations. Only attributes that exist in the parent block can be used.
+:::
 
 For example, we have a `Card` block. If we want to use it for something like downloading PDF files, we may not need image or paragraph components. A simple text that describes type of the file, title of the file and a download button are all we need in this case.
 
@@ -61,7 +63,9 @@ Other than overriding default attributes with variations, you can do much more w
 
 The following example is very basic, but it will give you an idea of how to provide inner block data. It can easily be reproduced with our `Carousel` block if you want to try it yourself.
 
-> If you don't have Carousel block in your project yet, you can add it with the following WP-CLI command: `wp boilerplate blocks use-block --name="carousel"`
+:::note
+If you don't have Carousel block in your project yet, you can add it with the following WP-CLI command: `wp boilerplate blocks use-block --name="carousel"`
+:::
 
 Once you have the `Carousel` block up and running, create a variation called `Carousel Loop`. For this variation, we want the following:
 - loop

website/blog/2022-12-13-using-cpts-and-taxonomies.md

@@ -23,7 +23,9 @@ For this exercise, we'll create a new post type called `Projects`. To make the p
 wp boilerplate create post-type --label='Project' --plural_label='Projects' --slug='project' --rewrite_url='project' --rest_endpoint_slug='projects'
 ```
 
-> If your new CPT is not working, try flushing rewrite rules by re-saving the settings in **Settings -> Permalinks** or by using `wp cache flush` CLI command
+:::tip
+If your new CPT is not working, try flushing rewrite rules by re-saving the settings in **Settings -> Permalinks** or by using `wp cache flush` CLI command
+:::
 
 Your new post type is registered and ready to use! Easy, right?
 

website/docs/basics/autowiring.md

@@ -81,15 +81,19 @@ This works out of the box, but you shouldn't really do this.
 
 A good coding practice is that your class should never depend on the concrete class implementation because you have tightly coupled your class to another class. This makes it hard to test and your code becomes hard to modify. Imagine that you have put a concrete implementation as a dependency, only to get feedback from the client that you need to change that implementation for a completely different one. Making the changes means that you'll need to track all the places in your codebase where you have used some functionality from this class, and change it completely.
 
-> You should always code against interfaces and not implementation.
+:::success Good practices
+You should always code against interfaces and not implementation.
+:::
 
 We can't stress this enough because as your project grows, so will your headaches. Also, when you start testing your code, that is when your hair will begin to fall off. We recommend reading Uncle Bob Martin's [Clean Code](http://cleancoder.com/products). That will save you a lot of sleepless nights, and you'll learn tons of tips and tricks for writing clean code.
 
 ### What if my class has an interface parameter inside the constructor method?
 
 This will automatically be resolved (same as with class parameters) if you follow one simple rule:
 
-> Variable name in your constructor method needs to match the class name (which implements the interface) in camelCase.
+:::caution Important
+Variable name in your constructor method needs to match the class name (which implements the interface) in camelCase.
+:::
 
 For example, let's say you have a `SteeringWheel` class:
 

website/docs/basics/block-manifest.md

@@ -118,7 +118,9 @@ Let's see how you would share SVG icon across multiple languages:
 
 **manifest.json**
 
-> Note: because this is a `JSON` file you must convert all double quotes to single because otherwise, you will get a fatal error.
+:::note
+Because this is a `JSON` file you must convert all double quotes to single because otherwise, you will get a fatal error.
+:::
 
 ```json
 {

website/docs/basics/blocks-component-in-block.md

@@ -31,11 +31,17 @@ As we described in the [block manifest](block-manifest) chapter each block/compo
 
 Components key is an object that can have multiple items added.
 
-> Key represents the name that is going to be used for this component in this block/component and the prefix used in the attributes (more on this later).
+:::success :es-hide-title:
+**Key** represents the name that is going to be used for this component in this block/component and the prefix used in the attributes (more on this later).
+:::
 
-> Value represents the real component name that you have in your project.
+:::info :es-hide-title:
+**Value** represents the real component name that you have in your project.
+:::
 
-> Each key and value names can be written in the kebab-case or camelCase but we recommend using camelCase.
+:::tip :es-hide-title:
+Each key and value names can be written in the `kebab-case` or `camelCase` but we recommend using `camelCase`.
+:::
 
 **Multiple components setup:**
 ```json
@@ -72,11 +78,15 @@ As we described earlier, in order to use our setup you must use our helpers. Her
 
 For more details please check our helpers sections for [JavaScript](helpers-javascript) and [PHP](helpers-php).
 
-> Keep in mind that you can always ignore our setup and use the React way of passing props to components by prop drilling.
+:::tip Good to know
+You can always ignore our setup and use the React way of passing props to components by prop drilling.
+:::
 
 ## Setting up attributes
 
-> Each attribute must have the component name prefix in each attribute. This is one of the biggest requirements in order for our setup to work.
+:::caution Important
+Each attribute must have the component name prefix in each attribute. This is one of the biggest requirements in order for our setup to work.
+:::
 
 By defining components key in the block registration phase we are drilling down from block to the last component and setting up attribute names according to your setup. In order for everything to work, we had to add/change prefixes to each component attribute in relation to where this attribute is used in the dependency tree. It is not so hard as it sounds so let us show you some graphical examples:
 
@@ -532,7 +542,9 @@ const headingColor = checkAttr('headingColor', attributes, manifest);
 
 And this is it. You are now able to override the options from the parent block/component.
 
-> Keep in mind that you can only override SelectControl, ColorPaletteCustom, and AlignmentToolbar.
+:::tip
+Keep in mind that you can only override `SelectControl`, `ColorPaletteCustom`, and `AlignmentToolbar`.
+:::
 
 ### I want to only pass attributes to the component that I'm going to use
 
@@ -699,7 +711,9 @@ Components:
 
 For more details please read the [props helper docs](helpers-javascript).
 
-> You should avoid spreading attributes as props but rather use this helper because it provides only what is used in the component.
+:::tip
+Avoid spreading attributes as props but rather use this helper because it provides only what is used in the component.
+:::
 
 ### Passing setAttributes to components
 

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

@@ -30,7 +30,9 @@ We suggest you always use the full name and never abbreviate for the component n
 
 For example, you can check the [storybook](/storybook).
 
-> All files in components are optional.
+:::note
+All files in components are optional.
+:::
 
 ### assets
 

website/docs/basics/blocks-faq.md

@@ -141,7 +141,9 @@ Easy. We have a method you can extend that limits your project's block to the on
   add_filter('allowed_block_types_all', [ $this, 'getAllBlocksList' ], 10, 2);
 ```
 
-> Important note: For WordPress versions > 5 and < 5.8 you would need to use the example bellow.
+:::caution Important
+For WordPress versions > 5 and < 5.8 you would need to use the example below.
+:::
 
 ```php
   // Limits the usage of only custom project blocks - legacy.

website/docs/basics/blocks-important.md

@@ -27,4 +27,6 @@ You **don't need to restart** Webpack watch when you:
 * add/remove PHP implementation in the files; and
 * make changes on anything other than blockName in the manifest.json.
 
-> Remember this note because, in 90 per cent of cases, your error occurs when you made changes to the files and didn't restart the Webpack watch.
+:::caution :es-hide-title:
+Remember this note because, in 90 percent of cases, your error occurs when you made changes to the files and didn't restart the Webpack watch.
+:::

website/docs/basics/blocks-reusable.md

@@ -36,4 +36,6 @@ if (!empty($footerPartialId)) {
 }
 ```
 
-> Notes about reusable blocks, they're not native WP search friendly (as in the content you only have the WP block comment markup that there's a specific reusable block there). So if you use a lot of these in the content of a page / post, it might affect your search relevancy.
+:::note
+Notes about reusable blocks, they're not native WP search friendly (as in the content you only have the WP block comment markup that there's a specific reusable block there). So if you use a lot of these in the content of a page / post, it might affect your search relevancy.
+:::

website/docs/basics/blocks-special-use-cases.md

@@ -26,7 +26,9 @@ Keep in mind that this will be applied to all innerBlocks inside your carousel b
 
 The next time you add your image to the carousel, it will automatically change those attributes.
 
-> Important note: If for some reason, you copy the inner block from the carousel to the top-level editor, this helper will not fire and not change back to original attributes. You have to manually remove those attributes from the Code editor in the admin.
+:::caution Important
+If for some reason, you copy the inner block from the carousel to the top-level editor, this helper will not fire and not change back to original attributes. You have to manually remove those attributes from the Code editor in the admin.
+:::
 
 **Implementation**
 
@@ -97,7 +99,9 @@ Filter goes in the register method:
 add_filter('allowed_block_types_all', [$this, 'getAllBlocksList'], 10, 2);
 ```
 
-> Important note: For WordPress versions > 5 and < 5.8 you would need to use the example bellow.
+:::caution Important
+For WordPress versions > 5 and < 5.8 you would need to use the example below.
+:::
 
 ```php
   // Limits the usage of only custom project blocks - legacy.
@@ -132,7 +136,9 @@ public function allowedBlocks($allowedBlockTypes, WP_Block_Editor_Context $block
 }
 ```
 
-> Important note: For WordPress versions > 5 and < 5.8 you would need to use the filter example bellow. Also change the first argument of array_merge in `allowedBlocks` function to `$this->getAllBlocksListOld($allowedBlockTypes, $post)`
+:::caution Important
+For WordPress versions > 5 and < 5.8 you would need to use the filter example below. Also change the first argument of array_merge in `allowedBlocks` function to `$this->getAllBlocksListOld($allowedBlockTypes, $post)`
+:::
 
 ```php
   // Limits the usage of only custom project blocks - legacy.
@@ -180,7 +186,9 @@ public function allowedBlockTypes($allowedBlockTypes, WP_Block_Editor_Context $b
 }
 ```
 
-> Important note: For WordPress versions > 5 and < 5.8 you would need to use the filter example bellow. And also change the default switch case in the `allowedBlockTypes` function to `$output = $this->getAllBlocksListOld($allowedBlockTypes, $post);`
+:::caution Important
+For WordPress versions > 5 and < 5.8 you would need to use the filter example below. And also change the default switch case in the `allowedBlockTypes` function to `$output = $this->getAllBlocksListOld($allowedBlockTypes, $post);`
+:::
 
 ```php
   // Limits the usage of only custom project blocks - legacy.