updating images to webP format

infinum · Sep 6, 2023 · 5b787e7 · 5b787e7
1 parent b948ad7
commit 5b787e7
Show file tree

Hide file tree

Showing 159 changed files with 109 additions and 106 deletions.
diff --git a/website/blog/2022-01-20-initial-setup.md b/website/blog/2022-01-20-initial-setup.md
@@ -26,7 +26,7 @@ npx create-wp-project
 
 Just follow the instructions and wait for the theme to download.
 
-![Setup - initial prompt](/img/blog/setup-1.png)
+![Setup - initial prompt](/img/blog/setup-1.webp)
 
 OK, you went through the process, filled out all required information, but the theme still isn't working. There are a few more instructions in the terminal on what to do next, but you may have skipped them. While the principle **"6 hours of debugging can save you 5 minutes of reading documentation"** is fun, sometimes it's just not worth it. Here's what you should do:
 
@@ -36,7 +36,7 @@ OK, you went through the process, filled out all required information, but the t
 - for easiest initial setup, run `wp boilerplate init theme`
 - `npm start` should trigger automatically with the previous command. If it doesn't, you can run it manually to finish the theme build process
 
-![Setup - instructions](/img/blog/setup-2.png)
+![Setup - instructions](/img/blog/setup-2.webp)
 
 Congratulations, you've set up your Eightshift theme!
 

diff --git a/website/blog/2022-01-21-components-and-blocks.md b/website/blog/2022-01-21-components-and-blocks.md
@@ -41,7 +41,7 @@ These attributes give you the option to modify the look of the component, so thi
 - **photo of the day** - rectangular image on the right side which takes 75% width and photographer's name is written in medium blue text
 - **featured posts** - rectangular image on top, large heading in red color
 
-![Component with different attributes](/img/blog/components.png)
+![Component with different attributes](/img/blog/components.webp)
 
 You can even add conditional logic to your options, e.g. to have the option for `imageWidth` visible only when `imagePosition` is set to left or right. And when `imagePosition` is set to top or bottom, it defaults to 100% width.
 

diff --git a/website/blog/2022-03-03-adding-blocks-wpcli.md b/website/blog/2022-03-03-adding-blocks-wpcli.md
@@ -38,7 +38,7 @@ wp boilerplate blocks use-component --name=quote
 
 When entering the `wp boilerplate blocks use-block --name='quote'` command, you'll notice the note about a block dependency on the Quote component. So you should run the second command as well.
 
-![Setup - instructions](/img/blog/wpcli-1.png)
+![Setup - instructions](/img/blog/wpcli-1.webp)
 
 After entering these commands, run `npm start` again to make sure everything works properly.
 

diff --git a/website/blog/2022-03-04-modifying-blocks.md b/website/blog/2022-03-04-modifying-blocks.md
@@ -27,7 +27,7 @@ We want to style the block and add a new feature. An option to choose a color th
 - quote icon has a stronger shade of the selected color
 
 To better help you visualize, this is how the Quote block should look like after making these changes, showcasing all three color theme variations:
-![Color Theme Examples](/img/blog/color-theme-examples.png)
+![Color Theme Examples](/img/blog/color-theme-examples.webp)
 
 ## Adding background
 
@@ -256,7 +256,7 @@ return (
 
 The Color Theme option should now be visible and fully functional inside the Quote block.
 
-![Color Theme Options](/img/blog/color-theme-options.png)
+![Color Theme Options](/img/blog/color-theme-options.webp)
 
 ## Adding transitions in the editor
 

diff --git a/website/blog/2022-04-08-adding-fonts.md b/website/blog/2022-04-08-adding-fonts.md
@@ -190,7 +190,7 @@ Now we have to add an actual control to the options panel which will allow us to
 
 The control for selecting a font should now be available under Paragraph options. Saving the choice now works, but the font stays the same both in the editor and on the frontend.
 
-![Font Picker](/img/blog/font-picker.png)
+![Font Picker](/img/blog/font-picker.webp)
 
 The final step we need to make this work is to add a CSS rule that consumes our variable to **_/src/Blocks/components/paragraph/paragraph-style.scss_**:
 ```scss

diff --git a/website/blog/2022-04-25-using-assets.md b/website/blog/2022-04-25-using-assets.md
@@ -95,7 +95,7 @@ echo Components::render(
 
 Here are some examples of icons available out-of-the-box in our Icon component:
 
-![Icon component](/img/blog/icon-component.png)
+![Icon component](/img/blog/icon-component.webp)
 
 ## Using icons for editor and block options
 
@@ -113,7 +113,7 @@ 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)
+![Color Theme Options](/img/blog/color-theme-options.webp)
 
 ## Conclusion
 

diff --git a/website/blog/2022-05-10-acf-in-a-project.md b/website/blog/2022-05-10-acf-in-a-project.md
@@ -23,7 +23,7 @@ The approach we use for registering ACF fields is by adding those fields first t
 
 When you define all the fields you need, save them and go to `Custom Fields -> Tools`. Here you will see an option to **_Export Field Groups_**. Simply select the field groups which you want to export and select **_Generate PHP_**.
 
-![ACF PHP code export](/img/blog/acf-generate-php.png)
+![ACF PHP code export](/img/blog/acf-generate-php.webp)
 
 This will generate a PHP code snippet that you can use in your theme. Now you may be wondering, where exactly should that code go?
 
@@ -118,7 +118,7 @@ wp boilerplate create_theme_options
 
 This command generates a class with two methods. The first one, `createThemeOptionsPage()` creates a Theme Options page and adds it to the WP Admin sidebar. The second one, `registerThemeOptions()`, is what registers the fields you will have in Theme Options. Here is an example how Theme Options look after being created using `wp boilerplate`:
 
-![ACF Theme Options](/img/blog/acf-theme-options.png)
+![ACF Theme Options](/img/blog/acf-theme-options.webp)
 
 To add fields to your Theme Options, follow the steps from the **_Exporting PHP code_** section of this post and add the fields inside the `'fields' => []` array.
 ## Tip - create a helper class

diff --git a/website/blog/2022-09-07-block-variations.md b/website/blog/2022-09-07-block-variations.md
@@ -56,7 +56,7 @@ Inside your `manifest.json` file, add the attributes to define the new default a
 
 After adding this code, your new block variation should now be visible in the block list. It's that easy!
 
-![Variation of the Card block](/img/blog/card-resource.png)
+![Variation of the Card block](/img/blog/card-resource.webp)
 
 ## Providing inner block data
 Other than overriding default attributes with variations, you can do much more with Eightshift Development kit. If you have a block that uses inner blocks, you can even provide inner block data.
@@ -126,4 +126,4 @@ We will also add some placeholder images so you can immediately test the Carouse
 
 After adding this code, you should see the `Carousel Loop` variation in your block list. After adding it in the editor, the `Carousel` attributes will be already set to the ones you provided, as well as two images that are added as inner blocks.
 
-![Block list with variations](/img/blog/block-list-variations.png)
+![Block list with variations](/img/blog/block-list-variations.webp)
diff --git a/website/blog/2022-12-22-block-patterns.md b/website/blog/2022-12-22-block-patterns.md
@@ -34,7 +34,7 @@ After generating the block pattern class, there are a few more adjustments you s
 
 Once these values are updated, you can make the layout you'll use as a Block Pattern. The easiest way to do it is to build your layout in the editor, switch to `Code Editor`, copy the code and paste in inside your `getContent()` method. Your pattern should now be available to use. For this example, we can create a simple pattern which consists of a Heading block and a Paragraph block.
 
-![Option to switch to Code Editor](/img/blog/code-editor.png)
+![Option to switch to Code Editor](/img/blog/code-editor.webp)
 
 ```php
 protected function getContent(): string
@@ -126,7 +126,7 @@ protected function getCategories(): array
 
 In editor, in the Pattern tab, you should now see your new pattern category and the Intro Pattern.
 
-![New pattern category and block pattern](/img/blog/block-pattern-example.png)
+![New pattern category and block pattern](/img/blog/block-pattern-example.webp)
 
 ## Things to keep in mind
 Block patterns add layout and content which you can then modify at will per instance. These instances are not synchronised with the codebase so it becomes an issue if you've already used a pattern on multiple places on the site and then notice you've missed something in the pattern configuration phase. Fixing the pattern in the codebase will apply the changes on all newly added instances, but you will have to fix the misconfigured instances manually.
diff --git a/website/blog/2023-06-12-multiple-same-components.md b/website/blog/2023-06-12-multiple-same-components.md
@@ -269,7 +269,7 @@ When the new colors are added to the Lists component, we can set these new color
 
 The first list will now have green bullet points, and the second one will have red bullet points.
 
-![Comparison block](/img/blog/comparison-block.png)
+![Comparison block](/img/blog/comparison-block.webp)
 
 Notice again how the attribute name is structured - current block name (**comparison**), component name (**Lists** or **SecondaryLists**), attribute (**Color**).
 

diff --git a/website/docs/basics/blocks-component-in-block.md b/website/docs/basics/blocks-component-in-block.md
@@ -90,11 +90,11 @@ Each attribute must have the component name prefix in each attribute. This is on
 
 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:
 
-![Attributes 1](/img/docs/attributes-1.png)
+![Attributes 1](/img/docs/attributes-1.webp)
 
-![Attributes 2](/img/docs/attributes-2.png)
+![Attributes 2](/img/docs/attributes-2.webp)
 
-![Attributes 3](/img/docs/attributes-3.png)
+![Attributes 3](/img/docs/attributes-3.webp)
 
 ### I want to use one heading component in my block.
 

diff --git a/website/docs/basics/blocks-wrapper.md b/website/docs/basics/blocks-wrapper.md
@@ -15,15 +15,15 @@ The wrapper is designed to be the ultimate top-level component that controls how
 
 When you open your block editor in the sidebar before every blocks options you will see a `layout` panel that controls the wrapper options:
 
-![Wrapper Closed](/img/docs/wrapper-closed.jpg)
+![Wrapper Closed](/img/docs/wrapper-closed.webp)
 
 We also made a helper button that describes what each wrapper options does when the layout panel is open:
 
-![Wrapper Help Button](/img/docs/wrapper-help.jpg)
+![Wrapper Help Button](/img/docs/wrapper-help.webp)
 
 Here are some of the descriptions that we created but you can add your own icons and options to this modal by providing the additions properties to the `HelpModal` component:
 
-![Wrapper Modal](/img/docs/wrapper-modal.jpg)
+![Wrapper Modal](/img/docs/wrapper-modal.webp)
 
 ## Additional development options
 

diff --git a/website/docs/crash-course/intro.md b/website/docs/crash-course/intro.md
@@ -0,0 +1,6 @@
+---
+id: intro
+title: Intro
+---
+
+*Coming soon*
diff --git a/website/docs/legacy/v6/basics/blocks-component-in-block.md b/website/docs/legacy/v6/basics/blocks-component-in-block.md
@@ -80,11 +80,11 @@ For more details please check our helpers sections for [JavaScript](helpers-java
 
 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:
 
-![Attributes 1](/img/docs/attributes-1.png)
+![Attributes 1](/img/docs/attributes-1.webp)
 
-![Attributes 2](/img/docs/attributes-2.png)
+![Attributes 2](/img/docs/attributes-2.webp)
 
-![Attributes 3](/img/docs/attributes-3.png)
+![Attributes 3](/img/docs/attributes-3.webp)
 
 ### I want to use one heading component in my block.
 

diff --git a/website/docs/legacy/v6/basics/blocks-wrapper.md b/website/docs/legacy/v6/basics/blocks-wrapper.md
@@ -15,15 +15,15 @@ The wrapper is designed to be the ultimate top-level component that controls how
 
 When you open your block editor in the sidebar before every blocks options you will see a `layout` panel that controls the wrapper options:
 
-![Wrapper Closed](/img/docs/wrapper-closed.jpg)
+![Wrapper Closed](/img/docs/wrapper-closed.webp)
 
 We also made a helper button that describes what each wrapper options does when the layout panel is open:
 
-![Wrapper Help Button](/img/docs/wrapper-help.jpg)
+![Wrapper Help Button](/img/docs/wrapper-help.webp)
 
 Here are some of the descriptions that we created but you can add your own icons and options to this modal by providing the additions properties to the `HelpModal` component:
 
-![Wrapper Modal](/img/docs/wrapper-modal.jpg)
+![Wrapper Modal](/img/docs/wrapper-modal.webp)
 
 ## Additional development options
 

diff --git a/website/docs/legacy/v7/basics/blocks-component-in-block.md b/website/docs/legacy/v7/basics/blocks-component-in-block.md
@@ -80,11 +80,11 @@ For more details please check our helpers sections for [JavaScript](helpers-java
 
 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:
 
-![Attributes 1](/img/docs/attributes-1.png)
+![Attributes 1](/img/docs/attributes-1.webp)
 
-![Attributes 2](/img/docs/attributes-2.png)
+![Attributes 2](/img/docs/attributes-2.webp)
 
-![Attributes 3](/img/docs/attributes-3.png)
+![Attributes 3](/img/docs/attributes-3.webp)
 
 ### I want to use one heading component in my block.
 

diff --git a/website/docs/legacy/v7/basics/blocks-wrapper.md b/website/docs/legacy/v7/basics/blocks-wrapper.md
@@ -15,15 +15,15 @@ The wrapper is designed to be the ultimate top-level component that controls how
 
 When you open your block editor in the sidebar before every blocks options you will see a `layout` panel that controls the wrapper options:
 
-![Wrapper Closed](/img/docs/wrapper-closed.jpg)
+![Wrapper Closed](/img/docs/wrapper-closed.webp)
 
 We also made a helper button that describes what each wrapper options does when the layout panel is open:
 
-![Wrapper Help Button](/img/docs/wrapper-help.jpg)
+![Wrapper Help Button](/img/docs/wrapper-help.webp)
 
 Here are some of the descriptions that we created but you can add your own icons and options to this modal by providing the additions properties to the `HelpModal` component:
 
-![Wrapper Modal](/img/docs/wrapper-modal.jpg)
+![Wrapper Modal](/img/docs/wrapper-modal.webp)
 
 ## Additional development options
 

diff --git a/website/docs/legacy/v8/basics/blocks-component-in-block.md b/website/docs/legacy/v8/basics/blocks-component-in-block.md
@@ -79,11 +79,11 @@ For more details please check our helpers sections for [JavaScript](helpers-java
 
 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:
 
-![Attributes 1](/img/docs/attributes-1.png)
+![Attributes 1](/img/docs/attributes-1.webp)
 
-![Attributes 2](/img/docs/attributes-2.png)
+![Attributes 2](/img/docs/attributes-2.webp)
 
-![Attributes 3](/img/docs/attributes-3.png)
+![Attributes 3](/img/docs/attributes-3.webp)
 
 ### I want to use one heading component in my block.
 

diff --git a/website/docs/legacy/v8/basics/blocks-wrapper.md b/website/docs/legacy/v8/basics/blocks-wrapper.md
@@ -15,15 +15,15 @@ The wrapper is designed to be the ultimate top-level component that controls how
 
 When you open your block editor in the sidebar before every blocks options you will see a `layout` panel that controls the wrapper options:
 
-![Wrapper Closed](/img/docs/wrapper-closed.jpg)
+![Wrapper Closed](/img/docs/wrapper-closed.webp)
 
 We also made a helper button that describes what each wrapper options does when the layout panel is open:
 
-![Wrapper Help Button](/img/docs/wrapper-help.jpg)
+![Wrapper Help Button](/img/docs/wrapper-help.webp)
 
 Here are some of the descriptions that we created but you can add your own icons and options to this modal by providing the additions properties to the `HelpModal` component:
 
-![Wrapper Modal](/img/docs/wrapper-modal.jpg)
+![Wrapper Modal](/img/docs/wrapper-modal.webp)
 
 ## Additional development options
 

diff --git a/website/docs/migrations/8-9.md b/website/docs/migrations/8-9.md
@@ -28,7 +28,7 @@ Below you will find some of the more common components that will need to be modi
 
 Your code editor should mark the components that need replacement with a strikethrough over the component name:
 
-![Component deprecation notice in Visual Studio Code](/img/docs/component-deprecation-notice.png)
+![Component deprecation notice in Visual Studio Code](/img/docs/component-deprecation-notice.webp)
 
 ### Common between components
 - if you have a label with an `IconLabel` inside, you can migrate it to separate `icon` and `label` props:

diff --git a/website/docs/tutorials/intro.md b/website/docs/tutorials/intro.md
@@ -0,0 +1,9 @@
+---
+id: intro
+title: Intro
+---
+
+We think that a picture is worth a thousand words, and video is worth a thousand pictures. So, we've created a series of videos to help you get started with the basics of using forms. We hope you find them useful!
+
+
+[Eightshift Dev Kit video tutorials playlist](https://www.youtube.com/playlist?list=PLFjp6yaGpZJuqHB5ItBa3FfTqYB2FSiL3)
diff --git a/website/forms/features/cache.md b/website/forms/features/cache.md
@@ -3,9 +3,9 @@ id: cache
 title: Cache
 ---
 
-Eightshift Forms utilizes WordPress's internal cache tools to store integration API response data, reducing API calls and improving site performance. Clear the cache via our global Settings page to retrieve fresh data from the API.
+Eightshift Forms utilizes WordPress's internal cache tools to store integration API response data, reducing API calls and improving site performance. Clear the cache via our global settings page to retrieve fresh data from the API.
 
-![Cache screen](/img/forms/cache.png)
+![Cache screen](/img/forms/cache.webp)
 
 ## Integration cache
 

diff --git a/website/forms/features/debug.md b/website/forms/features/debug.md
@@ -5,4 +5,4 @@ title: Debugging
 
 The debugging screen provides configuration options and overrides default functionalities for developers, but caution should be used as these options can break form functionality.
 
-![Debug screen](/img/forms/debug.png)
+![Debug screen](/img/forms/debug.webp)
diff --git a/website/forms/features/fallback-emails.md b/website/forms/features/fallback-emails.md
@@ -5,7 +5,7 @@ title: Fallback e-mails
 
 Fallback email options are used in multiple locations, and we encourage you to set them up. You can add multiple emails by separating them with commas.
 
-![Fallback screen](/img/forms/fallback.png)
+![Fallback screen](/img/forms/fallback.webp)
 
 ## Global settings fallback email
 

diff --git a/website/forms/features/migrations.md b/website/forms/features/migrations.md
@@ -5,4 +5,4 @@ title: Migrations
 
 As forms evolve, so does the code, and it is inevitable that we will produce some breaking changes in the future. To make sure that your forms are always up to date, we provide a migration system that will help you migrate your forms to the latest version.
 
-![Migrations screen](/img/forms/migrations.png)
+![Migrations screen](/img/forms/migrations.webp)
diff --git a/website/forms/features/validation.md b/website/forms/features/validation.md
@@ -7,9 +7,9 @@ Validation is used to ensure that the form is populated in the correct way and t
 
 ## Integration validation rules
 
-If you are using an integration, validation rules set on the integration will be automatically set in your form in the sync process, and you will not be able to change them from the form builder. You can always add additional validation rules, but external rules cannot be changed.
+If you are using an integration, validation rules set on the integration will be automatically set in your form in the sync process, and you will not be able to change them from the form builder. You can always add additional validation rules, but external rules can't be changed.
 
-For example, on the HubSpot form, the field email is set as required, so you cannot change that from the form builder, but you can add additional validation rules like limiting the number of characters.
+For example, on the HubSpot form, the field email is set as required, so you can't change that from the form builder, but you can add additional validation rules like limiting the number of characters.
 
 ## Email validation
 
@@ -23,4 +23,4 @@ With all the native validations provided, you can also add your own custom valid
 
 For example, you want an email field not to allow emails with a `.org` domain. You can provide a custom validation pattern using a regular expression to check if the email has a `.org` domain. 
 
-![Validation screen](/img/forms/validation.png)
+![Validation screen](/img/forms/validation.webp)
diff --git a/website/forms/php/filters/troubleshooting/output-log.md b/website/forms/php/filters/troubleshooting/output-log.md
diff --git a/website/forms/tutorials/intro.md b/website/forms/tutorials/intro.md
@@ -0,0 +1,9 @@
+---
+id: intro
+title: Intro
+---
+
+We think that a picture is worth a thousand words, and video is worth a thousand pictures. So, we've created a series of videos to help you get started with the basics of using forms. We hope you find them useful!
+
+
+[Eightshift forms video tutorials playlist](https://www.youtube.com/playlist?list=PLFjp6yaGpZJvzqWGi3y9vZ3prra0h5Emx)