From 7110c7483fccb29e4e32b738feb3febcad0baccc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Igor=20Obradovi=C4=87?= Date: Thu, 17 Mar 2022 15:18:33 +0100 Subject: [PATCH 1/6] Add new blog post --- website/blog/2022-03-04-modifying-blocks.md | 275 ++++++++++++++++++ .../static/img/blog/color-theme-change.gif | Bin 0 -> 455925 bytes .../static/img/blog/color-theme-options.png | Bin 0 -> 22104 bytes 3 files changed, 275 insertions(+) create mode 100644 website/blog/2022-03-04-modifying-blocks.md create mode 100644 website/static/img/blog/color-theme-change.gif create mode 100644 website/static/img/blog/color-theme-options.png diff --git a/website/blog/2022-03-04-modifying-blocks.md b/website/blog/2022-03-04-modifying-blocks.md new file mode 100644 index 000000000..2a31bd217 --- /dev/null +++ b/website/blog/2022-03-04-modifying-blocks.md @@ -0,0 +1,275 @@ +--- +title: Modifying blocks - Color Theme +description: Step-by-step guide how to modify and expand functionality of existing blocks. +slug: modifying-blocks-color-theme +authors: iobrado +date: 2022-03-21 +tags: [eightshift, boilerplate, components, blocks] +hide_table_of_contents: false +--- + +In our previous post, we covered how to use Storybook and WP-CLI for adding additional blocks into your project. This post will walk you step-by-step on how to modify an existing block. + + +Since Eightshift Development kit is a starter theme, made for developers to jumpstart and speed up their development, you're welcome to modify files directly in it. There is no need to create a child theme to protect it from updates. + +### Modifying a block or a component? +Since we used Quote block in our previous post, we will continue using it as an example since it's fairly simple. One of the first questions you may ask yourself could be: "Should I modify a component or a block?". And the answer is - it depends. + +If you compare **_components/quote/quote.php_** (component) and **_custom/quote/quote.php_** (block), you'll notice most HTML code is inside a component, while block pretty much only renders the Quote component inside a wrapper. This example will walk you through the whole process of adding a new attribute and its options to a block. + +### What will we do? + +We want to add one new feature to this block. An option to choose a color theme for the Quote block. These are the specs: +- background with rounded corners +- three color themes: blue, green, yellow +- the background has a lighter shade of the selected color +- quote icon has a stronger shade of the selected color + +### Adding background + +Initial background styling is fairly straightforward. Navigate to **_src/Blocks/components/quote/quote-style.scss_** and paste the following code inside `.quote` class: +```css +padding: calc(var(--base-font-size) * 1.6rem); +border-radius: calc(var(--base-font-size) * 2rem); +background-color: global-settings(colors, light); +``` +You may notice we're using `calc` instead of directly writing values in rems. This way makes it much easier to calculate pixel size since `calc(var(--base-font-size) * 1.6rem)` equals `16px`. + +For now, we will add a simple light grey background to see how it looks. We'll replace this value later with a CSS variable. +>**Note:** don't hardcode hex color values directly inside your component. Instead, use colors defined in your global manifest. + +You'll notice that the changes are visible both in the editor and on the frontend. Since Gutenberg editor has some specific quirks, sometimes you will need to add additional styling only for the editor. In case we need to override something in the editor for our Quote component, we would simply create **_quote-editor.scss_**. + +### Adding new colors to your project + +Since the theme currently doesn't have all the colors we need to implement the color theme feature for our block, we have to add a few new colors to our project. We will use the colors already defined in the manifest for icon color, but we need to add lighter variations of those colors to use them for the background. Navigate to your global manifest, which is located inside **_src/Blocks/manifest.json_** and add the following values inside `colors`: +```json +{ + "name": "Light Blue", + "slug": "light-blue", + "color": "#B3E5FC" +}, +{ + "name": "Light Green", + "slug": "light-green", + "color": "#DCEDC8" +}, +{ + "name": "Light Yellow", + "slug": "light-yellow", + "color": "#FFF9C4" +} +``` + +### Adding a new attribute and options to manifest + +To choose which color theme we want to use for our Quote block, we need to define it in the manifest. Navigate to **_src/Blocks/components/quote/manifest.json_** and add the following value inside `attributes`: + +```json +"quoteColorTheme": { + "type": "string", + "default": "blue" +} +``` + +> Double-check the path of 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 +"options": { + "quoteColorTheme": [ + "blue", + "green", + "yellow" + ] +} +``` + +### CSS variables + +Our next step is to add CSS variables to the Quote component's manifest. Inside **_manifest.json_**, on the same level as `attributes`, add the following code: +```json +"variables": { + "quoteColorTheme": { + "blue": [ + { + "variable": { + "quote-background-color": "var(--global-colors-light-blue)", + "quote-icon-color": "var(--global-colors-blue)" + } + } + ], + "green": [ + { + "variable": { + "quote-background-color": "var(--global-colors-light-green)", + "quote-icon-color": "var(--global-colors-green)" + } + } + ], + "yellow": [ + { + "variable": { + "quote-background-color": "var(--global-colors-light-yellow)", + "quote-icon-color": "var(--global-colors-yellow)" + } + } + ] + } +} +``` + +Now, navigate back to Quote component's **_quote-style.scss_** and replace `background-color` which we used for testing with the following value: +```css +background-color: var(--quote-background-color); +``` + +As you can see, the variable name is the same one we used for defining background color variations in the manifest. For icon color, we do the same. After adding a new color to `&__icon` selector, our code should now look like this: + +```css +&__icon { + display: block; + margin-bottom: 1rem; + color: var(--quote-icon-color); +} +``` + +### Outputting CSS variables in editor +To make our color theme visible in editor, we have to add few lines of code to **_src/Blocks/components/quote/components/quote-editor.js_** file. First, we need to import a few functions. We need `useMemo` from **_react_**, `outputCssVariables` and `getUnique` from **_@eightshift/frontend-libs/scripts_** and finally, we need data from global manifest. + +After importing these and defining a unique constant, your code should look like this: + +```js +import React, { useMemo } from 'react'; +import classnames from 'classnames'; +import { checkAttr, props, selector, outputCssVariables, getUnique } from '@eightshift/frontend-libs/scripts'; +import { HeadingEditor } from '../../heading/components/heading-editor'; +import { ParagraphEditor } from '../../paragraph/components/paragraph-editor'; +import manifest from './../manifest.json'; +import globalManifest from './../../../manifest.json'; + +export const QuoteEditor = (attributes) => { + const unique = useMemo(() => getUnique(), []); + //... +``` +Next, we need to add a unique `data-id` and output the `