From f0c63e84abbc8239d91fb2f6be1d12705053e6b2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Obradovi=C4=87?= Date: Tue, 26 Apr 2022 09:05:36 +0200 Subject: [PATCH 1/3] Add blog post about using assets --- website/blog/2022-04-25-using-assets.md | 118 +++++++++++++++++++++ website/static/img/blog/icon-component.png | Bin 0 -> 5895 bytes 2 files changed, 118 insertions(+) create mode 100644 website/blog/2022-04-25-using-assets.md create mode 100644 website/static/img/blog/icon-component.png diff --git a/website/blog/2022-04-25-using-assets.md b/website/blog/2022-04-25-using-assets.md new file mode 100644 index 000000000..ea6c2b826 --- /dev/null +++ b/website/blog/2022-04-25-using-assets.md @@ -0,0 +1,118 @@ +--- +title: Using assets in a project +description: Step-by-step guide on how to add assets like images or icons to your theme. +slug: using-assets +authors: iobrado +date: 2022-05-02 +tags: [eightshift, boilerplate, assets, images, icons] +hide_table_of_contents: false +--- + +Previously we went through the process of adding fonts to your project. While the process of adding additional assets like images or icons has some similarities to adding fonts, it also has its unique steps. In this post, we'll cover multiple ways of adding assets and using them on your site. + + +## Adding images + +Similar to fonts, there is also a dedicated folder for adding images that will be used in a theme. The location of this folder is **_assets/images_**. The procedure to add images is even simpler than fonts, which you can read about in [Adding fonts](/blog/adding-fonts) blog post. Just follow these steps to add a new image: +- add the image in inside **_assets/images_** folder +- include it in **_assets/images/index.js_** +- run `npm start` to rebuild assets + +The new image will now be available in the **_public_** folder. The use case for this is adding a favicon or a logo to your project. To use this image in one of your templates or blocks, you have to add the following in your **_php_** file: + +```php +use YourNamespace\Manifest\Manifest; +// ... + +apply_filters(Manifest::MANIFEST_ITEM, 'logo.svg'); +``` + +The filter we are using is called `manifest-item` and we use it to get the URL of the asset from the **_public_** folder. You can read more about this in [our documentation](/docs/basics/manifest). + +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. + +For better organization, you can add additional folders (e.g. **_icons_**, **_placeholders_**) inside **_assets/images_** folder. Here's an example how to include them: + +```js +// Icons +import './icons/upload.svg'; + +// Placeholders +import './placeholders/post.png'; +import './placeholders/page.png'; +``` + +## Using SVG files from manifest + +Another approach you can take is to include an SVG file inside your component or block manifest. As a matter of fact, we already mentioned that component in a previous blog post about [Modifying Blocks](/blog/modifying-blocks-color-theme). We are talking about Quote 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). + +Open **_src/Blocks/components/quote/manifest.json_** and you'll see that all icons used by the component are defined inside `icons` as key-value pairs. Key represents the name which we will use to fetch the icon, while the value is SVG code. + +```json +"resources": { + "icon": "..." +} +``` + +In order to make minification of SVG files as easy as possible, our teammate Goran made an awesome tool called [SVG2WP](https://svg-2-wp.goranalkovic.com/). Some of the options include making attributes JSX compatible, or replacing the color value with `currentColor`, which can then be used to change the SVG color through CSS. + +If you've been reading through these blog posts regularly, then you've already seen the use of `currentColor`. In our blog post about [Modifying Blocks](/blog/modifying-blocks-color-theme), we modified the color of the SVG. + +The output of the icon on frontend is very simple. In the Quote component, it was done the following way: +```php + + +"> + + +``` + +An excellent example where you can see in even more detail how SVGs are being used is our `icon` component. It isn't included in Eightshift theme by default, so you have to add it to your project with WP CLI. To include it in your project, use the following command: + +```bash +wp boilerplate use_component --name=icon +``` + +If you include the Icon component inside a block, you will have the option to choose between multiple icons defined in the manifest. Another way to render SVGs from the Icon component is by using the `Components::render` helper method: + +```php + $componentClass, + 'iconName' => 'download', + ] +); +?> +``` + +Here are some examples of icons available out-of-the-box in our Icon component: + +![Icon component](/img/blog/icon-component.png) + +## Using icons for editor and block options + +When developing your blocks and adding new options, you may need to add some 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: +```jsx +import { ColorPaletteCustom, IconLabel, icons } from '@eightshift/frontend-libs/scripts'; + +return ( + } + // ... + /> +); +``` + +This was the end result when we were adding a new option in our Quote block: + +![Color Theme Options](/img/blog/color-theme-options.png) + +## Conclusion + +As you could see in this blog post, there are multiple ways of adding assets to a project. It all depends on how these will be used and what the scope of their use will be. diff --git a/website/static/img/blog/icon-component.png b/website/static/img/blog/icon-component.png new file mode 100644 index 0000000000000000000000000000000000000000..87bc9c97b38195a2521217ad897abd4045cd2be3 GIT binary patch literal 5895 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 literal 0 HcmV?d00001 From 95f5003298b2fd6841ce22cfadf70a067194201b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Obradovi=C4=87?= Date: Thu, 28 Apr 2022 10:43:49 +0200 Subject: [PATCH 2/3] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Denis Žoljom --- website/blog/2022-04-25-using-assets.md | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/website/blog/2022-04-25-using-assets.md b/website/blog/2022-04-25-using-assets.md index ea6c2b826..fd2569417 100644 --- a/website/blog/2022-04-25-using-assets.md +++ b/website/blog/2022-04-25-using-assets.md @@ -8,7 +8,7 @@ tags: [eightshift, boilerplate, assets, images, icons] hide_table_of_contents: false --- -Previously we went through the process of adding fonts to your project. While the process of adding additional assets like images or icons has some similarities to adding fonts, it also has its unique steps. In this post, we'll cover multiple ways of adding assets and using them on your site. +Previously, we went through the process of adding fonts to your project. While the process of adding additional assets like images or icons has some similarities to adding fonts, it also has its unique steps. In this post, we'll cover multiple ways of adding assets and using them on your site. ## Adding images @@ -33,7 +33,7 @@ You can see how this is being used for rendering both favicon and header logo in > **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 **_assets/images_** folder. Here's an example how to include them: +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: ```js // Icons @@ -46,11 +46,11 @@ import './placeholders/page.png'; ## Using SVG files from manifest -Another approach you can take is to include an SVG file inside your component or block manifest. As a matter of fact, we already mentioned that component in a previous blog post about [Modifying Blocks](/blog/modifying-blocks-color-theme). We are talking about Quote component. +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). -Open **_src/Blocks/components/quote/manifest.json_** and you'll see that all icons used by the component are defined inside `icons` as key-value pairs. Key represents the name which we will use to fetch the icon, while the value is SVG code. +Open **_src/Blocks/components/quote/manifest.json_** and you'll see that all icons used by the component are defined inside `icons` as key-value pairs. Key represents the name that we will use to fetch the icon, while the value is SVG code. ```json "resources": { @@ -58,9 +58,9 @@ Open **_src/Blocks/components/quote/manifest.json_** and you'll see that all ico } ``` -In order to make minification of SVG files as easy as possible, our teammate Goran made an awesome tool called [SVG2WP](https://svg-2-wp.goranalkovic.com/). Some of the options include making attributes JSX compatible, or replacing the color value with `currentColor`, which can then be used to change the SVG color through CSS. +In order to make the minification of SVG files as easy as possible, our teammate Goran made an awesome tool called [SVG2WP](https://svg-2-wp.goranalkovic.com/). Some of the options include making attributes JSX compatible, or replacing the color value with `currentColor`, which can then be used to change the SVG color through CSS. -If you've been reading through these blog posts regularly, then you've already seen the use of `currentColor`. In our blog post about [Modifying Blocks](/blog/modifying-blocks-color-theme), we modified the color of the SVG. +You've already seen the use of `currentColor` in the above-mentioned blog post, where we've modified the color of the SVG. The output of the icon on frontend is very simple. In the Quote component, it was done the following way: ```php @@ -71,7 +71,7 @@ The output of the icon on frontend is very simple. In the Quote component, it wa ``` -An excellent example where you can see in even more detail how SVGs are being used is our `icon` component. It isn't included in Eightshift theme by default, so you have to add it to your project with WP CLI. To include it in your project, use the following command: +An excellent example, where you can see in even more detail how SVGs are being used, is our `icon` component. It isn't included in Eightshift theme by default, so you have to add it to your project with WP CLI. To include it in your project, use the following command: ```bash wp boilerplate use_component --name=icon @@ -88,7 +88,6 @@ echo Components::render( 'iconName' => 'download', ] ); -?> ``` Here are some examples of icons available out-of-the-box in our Icon component: @@ -97,7 +96,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 some 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](/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: ```jsx import { ColorPaletteCustom, IconLabel, icons } from '@eightshift/frontend-libs/scripts'; From dd0b5fcc62005a47afc100a16ee5cbf1ace580ec Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Obradovi=C4=87?= Date: Thu, 28 Apr 2022 12:34:56 +0200 Subject: [PATCH 3/3] Minor content fixes --- website/blog/2022-04-25-using-assets.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/website/blog/2022-04-25-using-assets.md b/website/blog/2022-04-25-using-assets.md index fd2569417..fad15aaa0 100644 --- a/website/blog/2022-04-25-using-assets.md +++ b/website/blog/2022-04-25-using-assets.md @@ -3,7 +3,7 @@ title: Using assets in a project description: Step-by-step guide on how to add assets like images or icons to your theme. slug: using-assets authors: iobrado -date: 2022-05-02 +date: 2022-04-28 tags: [eightshift, boilerplate, assets, images, icons] hide_table_of_contents: false --- @@ -50,7 +50,7 @@ If you recall from a previous blog post about [Modifying Blocks](/blog/modifying > 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 all icons used by the component are defined inside `icons` as key-value pairs. Key represents the name that we will use to fetch the icon, while the value is SVG code. +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. ```json "resources": { @@ -80,7 +80,6 @@ wp boilerplate use_component --name=icon If you include the Icon component inside a block, you will have the option to choose between multiple icons defined in the manifest. Another way to render SVGs from the Icon component is by using the `Components::render` helper method: ```php -