diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png index 6fc987f8cb5..e9bd649f700 100644 Binary files a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png and b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png new file mode 100755 index 00000000000..72fe0ed3a07 Binary files /dev/null and b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png new file mode 100755 index 00000000000..169097c5ad5 Binary files /dev/null and b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png new file mode 100755 index 00000000000..d4943f9a769 Binary files /dev/null and b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-url.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-url.png deleted file mode 100644 index 4465fb6e12c..00000000000 Binary files a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/copy-url.png and /dev/null differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png old mode 100644 new mode 100755 index 57ea9043169..66552c49cb8 Binary files a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png and b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png old mode 100644 new mode 100755 index 93ec48f6e2d..02a53c4ebea Binary files a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png and b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign.png deleted file mode 100644 index 2d23daaaa54..00000000000 Binary files a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign.png and /dev/null differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png old mode 100644 new mode 100755 index 63053f5ebde..e73425c8016 Binary files a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png and b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/meshery-design-custom-html.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/meshery-design-custom-html.png deleted file mode 100644 index 674b4228998..00000000000 Binary files a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/meshery-design-custom-html.png and /dev/null differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png old mode 100644 new mode 100755 index 367f33590de..dddb3de42fe Binary files a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png and b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png differ diff --git a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/upload-js-wordpress.png b/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/upload-js-wordpress.png deleted file mode 100644 index f45d3126df2..00000000000 Binary files a/content/en/kanvas/tutorials/images/embedding-design-in-wordpress/upload-js-wordpress.png and /dev/null differ diff --git a/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress.md b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress.md index d4ecacde8cc..8558e52b864 100644 --- a/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress.md +++ b/content/en/kanvas/tutorials/wordpress/embedding-meshery-design-in-wordpress.md @@ -15,74 +15,51 @@ In this tutorial, we will learn how to embed a **Meshery Design** in a WordPress This tutorial assumes that you have created a design or have an existing one. If not, you can use one of the numerous public designs available in **Kanvas** for this tutorial. -1. Expand the **Designs** menu on the left. +1. Expand the **Actions** menu on the left and select export. ![Expand Designs](/kanvas/tutorials/images/embedding-design-in-wordpress/expand-designs-kanvas.png) -2. Click the **Quick actions** button to the left of the design (inverted ellipsis) and select **Export Design**. +2. Click the download icon next to **Embed Design**. ![Export Design](/kanvas/tutorials/images/embedding-design-in-wordpress/quickaction-exportdesign.png) -3. Click the download icon next to **Embed Design** from the list. - - ![Embed Design](/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign.png) - -4. This will show the `js` file to download and the HTML code snipped to copy. +3. This will show the `js` file to download and the HTML code snipped to copy. ![Embed Design](/kanvas/tutorials/images/embedding-design-in-wordpress/embeddesign-HTML.png) -5. Now, head over to WordPress and begin by uploading the `js` file to it. Ideally you will upload it to Media. - - ![Upload to WordPress](/kanvas/tutorials/images/embedding-design-in-wordpress/upload-js-wordpress.png) +4. Now, create a `js` folder in the path of your current wordpress theme -6. Next, click on the uploaded file in WordPress and copy the File URL. You will need this later. +5. Next, copy the downloaded `js` file into this folder. - ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/copy-url.png) + ![Copy JS](/kanvas/tutorials/images/embedding-design-in-wordpress/copy-js.png) + +6. To the following script, replace `design_file_name.js` with the name of the `js` file which you just downloaded. Once this is done, go to the `functions.php` file in your current Wordpress theme and copy script. + +``` +function kanvas_design_script() { + $script_uri = get_template_directory_uri() . design_file_name.js'; + wp_enqueue_script_module( + 'kanvas-design', + $script_uri, + array(), + '1.1.0', + ); +} +add_action('wp_enqueue_scripts', 'kanvas_design_script'); +``` + + ![Copy Script](/kanvas/tutorials/images/embedding-design-in-wordpress/copy-script.png) 7. Open the WordPress post where you want to embed the design in edit mode and add a _Custom HTML_ block. ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/add-custom-html.png) -8. Paste the following CSS code as it is, followed by the **Embed Code** copied from **Kanvas**. Update the script source value to the URL copied from WordPress. - ``` - - ``` - The final _Custom HTML_ should look something like this: - ``` - - -
- - ``` - ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/meshery-design-custom-html.png) +8. Paste the **Embed Code** copied from **Kanvas**. + + ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/add-embedded-html.png) 9. Click **Preview** to validate that the design is rendered. ![Copy URL](/kanvas/tutorials/images/embedding-design-in-wordpress/embedded-design-preview.png) -10. Publish the WordPress post and share. - +10. Publish the WordPress post and share. \ No newline at end of file