diff --git a/blueprints/showcase-plugin-with-media/assets/2024.zip b/blueprints/showcase-plugin-with-media/assets/2024.zip new file mode 100644 index 0000000..f4dc7d7 Binary files /dev/null and b/blueprints/showcase-plugin-with-media/assets/2024.zip differ diff --git a/blueprints/showcase-plugin-with-media/assets/makeiteasypopupblock.WordPress.2024-06-20.xml b/blueprints/showcase-plugin-with-media/assets/makeiteasypopupblock.WordPress.2024-06-20.xml new file mode 100644 index 0000000..114e1c7 --- /dev/null +++ b/blueprints/showcase-plugin-with-media/assets/makeiteasypopupblock.WordPress.2024-06-20.xml @@ -0,0 +1,1146 @@ + + + + + + + + + + + + + + + + + + + + + + + MakeITeasy popup block + / + Block demo + Mon, 23 Sep 2024 10:43:00 +0000 + en-US + 1.2 + / + / + + 1 + + + 1 + + + + + + 4 + + + + + + + 3 + + + + + + + 6 + + + + + + + 2 + + + + + + + 5 + + + + + + + 1 + + + + + + + https://wordpress.org/?v=6.6.2 + + + /wp-content/uploads/2024/06/temporary-logo-150x150.png + MakeITeasy popup block + / + 32 + 32 + + + + <![CDATA[makeITeasy popup]]> + / + Fri, 22 Dec 2023 23:34:51 +0000 + + /?page_id=2 + + +

Introducing the makeITeasy popup, an innovative block designed to enhance your content creation experience by seamlessly integrating a versatile popup solution directly into the editor.

+ + + +
+

☞

+ + + +

Please scroll slowly through the page to experience all the interactive popups which have been set to demo this neat block. And off course, it will be open source, in the wordpress.org directory!

+
+ + + +
+

This user-friendly block empowers you to create engaging popups with customizable content, styles, and triggers, all within the familiar Gutenberg editor interface. Whether you want to highlight special offers, gather email subscriptions, or display important announcements, the makeITeasy popup provides a powerful and intuitive solution, allowing you to captivate your audience's attention without leaving the editor. Elevate your website's interactivity and functionality effortlessly with WP Popup Block.

+
+ + + +

You will in no time create beautiful popups, possibilities will inspire you like these images of nature.

+ + + +
+
+
Photo by Bailey Zindel on Unsplash
+
+ + + +
+
Photo by Hendrik Cornelissen on Unsplash
+
+
+ + + +

Types of popup activation:

+ + + +
+
+

On timer.

+ + + +

The popup will open after 15 seconds of looking at this page.

+
+ + + +
+

On click.

+ + + +

Clickto open popup

+
+ + + +
+

On scroll.

+ + + +

Scroll down to image element to open popup.

+
+ + + +
+

On hover.

+ + + +

Hovering over element opens popup.

+ + + +
+ +
+
+
+ + + + + + + + + + + + + + + +

Popups modality

+ + + +

So far, you've seen only modal popups. However, modeless popups also exist.

+ + + +
+
    +
  • Modal popup: +
      +
    • page is not scrollable
      • + + + +
    • interaction with elements on page is not possible
      • +
    +
    • + + + +
  • Modeless popup: +
      +
    • page can be scrolled
      • + + + +
    • interaction with other elements on page is possible
      • +
    +
    • +
+
+ + + +

Clicking on this paragraph, a popup will open below it, which is modeless and will not block site interactivity. If there is not enough space below, popup will jump above. Try scrolling until popup does not fit below anymore.

+ + + + + + + +

If this features are not enough to convince you to use this block, scroll to read more. Popups can be turned on and off in admin. There is a switch "Popup is enabled"

+ + + +
+ + + +

Popup can also open as horizontal or vertical band. It should open just now at the top of page.

+ + + + + + + +

User Features

+ + + +

Now, I invite you to check admin part, because this is the point of blocks – having easy editing experience. The best way would be to open this page in the admin: click on "Edit Page" in the admin toolbar. You can as well open it in new tab, in order not to loose reading position in this text.

+ + + +

Once in admin, you will notice a lot of popup blocks which may introduce clutter into your editing experience. Don't worry! There is a button in the editor which opens sidebar where you can control whether all these popups are visible.

+ + + +
+ + + +

Once opened, you can toggle to show the popups or hide them from UI, making admin side more similar to what your visitors will see in the front when popups are not activated. However, to edit popups and their content, this toggle must be enabled.

+ + + +

If you accidentally or by purpose removed (unpinned) this button, you can still show this sidebar by clicking "Options" (three dots) and choosing "Show popup control" under Plugins section.

+ + + +
+ + + +

And here is the image, which, when scrolled to and when shown whole on the screen, will trigger popup.

+ + + +
Photo by Johannes Plenio on Unsplash
+ + + + + + + +

Developer Features

+ + + +

This block is planned to be extensible, so with time, more filters and actions will be added. Currently, there is only one javascript filter:

+ + + +
makeiteasy/popup/closeButtonIconElement
+ + + +

You can customize close icon in javascript by using following two ways:

+ + + +

1. using javascript filter

+ + + +

(@wordpress/scripts dependency is needed):

+ + + +
import { ReactComponent as CloseIcon } from '../assets/close-x.svg';
+
+addFilter( 'makeiteasy-closeButtonIcon', 'makeiteasy/makeiteasy-popup/close-icon', () => (<CloseIcon />) );
+ + + +

Where close-x.svg is svg file of close button image. Take care that svg file does not have any malicious javascript. The best is that it doesn't have any javascript embedded at all. If you don't know how to check, don't take svg files from unreliable sources.

+ + + +

Do note that if you customize a close button in this way, it will affect all blocks and if blocks are already present in pages/posts on those you will get message "This block contains unexpected or invalid content.", with option to repair block with button "Attempt block recovery", which will repair block, replacing the old close button with new one.

+ + + +

+ + + +
+

In fact, close button on this demo page has been customized using javascript filter. This is how default close button looks:

+ + + +
+
+ + + +

You can also customize icon in another way, using PHP.

+ + + +

2. using PHP

+ + + +

You can also change close button using PHP code, here is an example:

+ + + +
add_action( 'render_block_makeiteasy/popup', function($content) {
+  $svg = file_get_contents( __DIR__ . '/path_to_file/close-button-dark.svg' );
+  return preg_replace(
+    '~(<button.*class="makeiteasy-popup-close".*?>).*(</button>)~m',
+    "$1$svg$2",
+    $content
+    );
+} );
+ + + +

In this case, close icon is changed when rendering and there is no problem with block editor complaining about block being broken. However, change in this case will be visible only on front end and block in the editor will not look the same as on front.

+ + + +

Note:
When wordpress HTML API (WP_HTML_Processor) becomes more developed to include replacing nodes, it will be also possible to do this using that tool.

+ + + +

Current limitations and plans

+ + + +

This plugin is submitted to wordpress.org repository, review is awaited and it should be soon. Upon approval, source code will be published both in SVN and on github repositories.

+ + + +

If you would like to use this plugin sooner on your site, or you have suggestions or requests, write to me at lovro@makeiteasy.hr.

+ + + +

Due to limitations of micromodal javascript library used for popups, only one popup can be simultaneously present on page. This is planned to be fixed, by not using micromodal for non-modal popups.

+ + + +

I plan to move from micromodal.js to native <dialog> element, because it is widely available since 2022 and offers better accessibility. Migration will be done seamlessly, users with current version will be able to switch without issues.

+]]> + + 2 + + + + + + + + + 0 + 0 + + + 0 + + + + + + + + + + + ]]> + + + + + + + + <![CDATA[Custom Styles]]> + /?p=10 + Sat, 23 Dec 2023 09:06:21 +0000 + + /?p=10 + + + + 10 + + + + + + + + + 0 + 0 + + + 0 + + + + <![CDATA[Navigation]]> + /?p=11 + Sat, 23 Dec 2023 09:06:32 +0000 + + /?p=11 + + ]]> + + 11 + + + + + + + + + 0 + 0 + + + 0 + + + <![CDATA[Footer]]> + /?p=16 + Sun, 24 Dec 2023 21:10:40 +0000 + + /?p=16 + + +
+
+
+
+ + + +
+
+ + + +
+ + + +
+
+
+

About

+ + + +
+ + + + + +
+
+ + + +
+

Privacy

+ + + +
+ + + + + +
+
+ + + +
+

Social

+ + + +
+ + + + + +
+
+
+
+
+ + + +
+

+ Designed with WordPress

+
+
+ + + +
+
Back to top arrow
+
+]]> + + 16 + + + + + + + + + 0 + 0 + + + 0 + + + + + + + + + <![CDATA[Test1]]> + /?p=261 + Sun, 12 May 2024 20:36:19 +0000 + + /?p=261 + + +

Sunt labore ipsum irure elit veniam fugiat velit adipisicing fugiat adipisicing eiusmod elit. Laborum velit eiusmod sint dolore irure quis minim laborum voluptate culpa commodo in commodo. Ullamco Lorem aute non dolore dolor elit.

+ + + +

Elit sint quis ea cillum. Ad ea reprehenderit nulla consequat eiusmod sunt magna. Non ullamco ipsum consequat ea occaecat. Reprehenderit sit deserunt in irure enim reprehenderit eu sunt ex esse veniam est.

+]]> + + 261 + + + + + + + + + 0 + 0 + + + 0 + + + <![CDATA[bailey-zindel-NRQV-hBF10M-unsplash]]> + /?attachment_id=280 + Fri, 17 May 2024 17:41:46 +0000 + + /wp-content/uploads/2024/05/bailey-zindel-NRQV-hBF10M-unsplash.jpg + + + + 280 + + + + + + + + + 2 + 0 + + + 0 + + + + + + + + + + + + <![CDATA[hendrik-cornelissen-qrcOR33ErA-unsplash]]> + /?attachment_id=281 + Fri, 17 May 2024 17:43:48 +0000 + + /wp-content/uploads/2024/05/hendrik-cornelissen-qrcOR33ErA-unsplash.jpg + + + + 281 + + + + + + + + + 2 + 0 + + + 0 + + + + + + + + + + + + <![CDATA[Custom Styles]]> + /?p=351 + Sat, 18 May 2024 20:21:48 +0000 + + /?p=351 + + + + 351 + + + + + + + + + 0 + 0 + + + 0 + + + + <![CDATA[johannes-plenio-RwHv7LgeC7s-unsplash]]> + /?attachment_id=390 + Sun, 19 May 2024 11:12:10 +0000 + + /wp-content/uploads/2024/05/johannes-plenio-RwHv7LgeC7s-unsplash.jpg + + + + 390 + + + + + + + + + 2 + 0 + + + 0 + + + + + + + + + + + + <![CDATA[image]]> + /?attachment_id=534 + Tue, 21 May 2024 21:39:10 +0000 + + /wp-content/uploads/2024/05/image.png + + + + 534 + + + + + + + + + 2 + 0 + + + 0 + + + + + + + + + + + + <![CDATA[image]]> + /?attachment_id=591 + Wed, 19 Jun 2024 12:14:30 +0000 + + /wp-content/uploads/2024/06/image.png + + + + 591 + + + + + + + + + 2 + 0 + + + 0 + + + + + + + + + + + + <![CDATA[image-1]]> + /?attachment_id=594 + Wed, 19 Jun 2024 12:21:45 +0000 + + /wp-content/uploads/2024/06/image-1.png + + + + 594 + + + + + + + + + 2 + 0 + + + 0 + + + + + + + + + + + + <![CDATA[Footer]]> + /?p=633 + Thu, 20 Jun 2024 10:01:07 +0000 + + /?p=633 + + +
+
+
+ + + +
+ + + +
+
+ + + +
+

+ Designed with WordPress

+
+
+ + + +
+
Back to top arrow
+
+]]> + + 633 + + + + + + + + + 0 + 0 + + + 0 + + + + + + + + + <![CDATA[temporary-logo]]> + /?attachment_id=639 + Thu, 20 Jun 2024 10:32:47 +0000 + + /wp-content/uploads/2024/06/temporary-logo.png + + + + 639 + + + + + + + + + 0 + 0 + + + 0 + + + + + + + + + + + + <![CDATA[Pages]]> + /?p=640 + Thu, 20 Jun 2024 10:33:45 +0000 + + /?p=640 + + + + +
+ +
+ + + + + + + + + + + +
+ + + +
+ + + +]]> + + 640 + + + + + + + + + 0 + 0 + + + 0 + + + + + + + + <![CDATA[Header]]> + /?p=641 + Thu, 20 Jun 2024 10:33:45 +0000 + + /?p=641 + + +
+
+
+
+
+
+
+]]> + + 641 + + + + + + + + + 0 + 0 + + + 0 + + + + + + + + + <![CDATA[]]> + /?p=657 + + + /?p=657 + + +
sdfsdfsdf
sdfsdfsdf
+]]> + + 657 + + + + + + + + + 0 + 0 + + + 0 + + + + <![CDATA[close-x-1]]> + /?attachment_id=661 + Fri, 21 Jun 2024 16:59:23 +0000 + + /wp-content/uploads/2024/06/close-x-1.png + + + + 661 + + + + + + + + + 2 + 0 + + + 0 + + + + + + + + + + + + + diff --git a/blueprints/showcase-plugin-with-media/assets/twentytwentyfour-child.zip b/blueprints/showcase-plugin-with-media/assets/twentytwentyfour-child.zip new file mode 100644 index 0000000..a4e95b8 Binary files /dev/null and b/blueprints/showcase-plugin-with-media/assets/twentytwentyfour-child.zip differ diff --git a/blueprints/showcase-plugin-with-media/blueprint.json b/blueprints/showcase-plugin-with-media/blueprint.json new file mode 100644 index 0000000..95da068 --- /dev/null +++ b/blueprints/showcase-plugin-with-media/blueprint.json @@ -0,0 +1,102 @@ +{ + "$schema": "https://playground.wordpress.net/blueprint-schema.json", + "meta": { + "title": "Showcase plugin", + "description": "Offer full demo of plugin with media included", + "author": "lovor", + "categories": ["plugin", "demo", "media", "images"] + }, + "preferredVersions": { + "php": "8.3", + "wp": "6.7" + }, + "features": { + "networking": true + }, + "landingPage": "/", + "steps": [ + { + "step": "login", + "username": "admin" + }, + { + "step": "installPlugin", + "pluginData": { + "resource": "wordpress.org/plugins", + "slug": "makeiteasy-back-to-top" + }, + "options": { + "activate": true + } + }, + { + "step": "installPlugin", + "pluginData": { + "resource": "wordpress.org/plugins", + "slug": "makeiteasy-popup" + }, + "options": { + "activate": true + } + }, + { + "step": "installTheme", + "themeData": { + "resource": "wordpress.org/themes", + "slug": "twentytwentyfour" + } + }, + { + "step": "installTheme", + "themeData": { + "resource": "url", + "url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/showcase-plugin-with-media/assets/twentytwentyfour-child.zip" + }, + "options": { + "activate": true + } + }, + { + "step": "setSiteOptions", + "options": { + "blogname": "MakeITeasy popup demo", + "blogdescription": "Popup demo", + "page_on_front": "4", + "users_can_register": "0", + "posts_per_page": "10", + "default_role": "subscriber", + "uploads_use_yearmonth_folders": "1", + "blog_public": "1", + "show_on_front": "page" + } + }, + { + "step": "setSiteOptions", + "options": { + "thumbnail_size_w": "150", + "thumbnail_size_h": "150", + "thumbnail_crop": "1", + "medium_size_w": "300", + "medium_size_h": "300", + "avatar_default": "mystery", + "large_size_w": "1024", + "large_size_h": "1024" + } + }, + { + "step": "unzip", + "zipFile": { + "resource": "url", + "url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/showcase-plugin-with-media/assets/2024.zip" + }, + "extractToPath": "/wordpress/wp-content/uploads" + }, + { + "step": "importWxr", + "file": { + "resource": "url", + "url": "https://raw.githubusercontent.com/wordpress/blueprints/trunk/blueprints/showcase-plugin-with-media/assets/makeiteasypopupblock.WordPress.2024-06-20.xml" + } + } + ] +} diff --git a/blueprints/showcase-plugin-with-media/readme.md b/blueprints/showcase-plugin-with-media/readme.md new file mode 100644 index 0000000..49d1372 --- /dev/null +++ b/blueprints/showcase-plugin-with-media/readme.md @@ -0,0 +1,33 @@ +# Showcase custom plugin from own server with media files and custom theme + +➡ Custom theme is customized child theme of twentytwentyfour + +### Installing theme + +Custom child theme is zipped and installed as [URLReference](https://wordpress.github.io/wordpress-playground/blueprints/steps/resources#urlreference) with +[InstallTheme](https://wordpress.github.io/wordpress-playground/blueprints/steps#InstallThemeStep) step. + +### Installing plugin + +Plugin is installed from *WordPress.org* repository. If your plugin is not (yet) there, you could self-host it and install id as [URLReference](https://wordpress.github.io/wordpress-playground/blueprints/steps/resources#urlreference) resource. + +### Importing media files into file system + +Here, the [unzip](https://wordpress.github.io/wordpress-playground/blueprints/steps#UnzipStep) step is used: +zip all the folders in upload folder and in unzip step unpack them to respective path `/site-slug/wp-content/uploads`, where slug +is the custom slug if given, e.g. for `site-slug=mysite` in URL query, path would be `/site-mysite/wp-content/uploads`. If custom slug is not given, replace site-slug +with `wordpress`. In this example, all media content from 2024 year is packed as 2024 folder in *.zip* file, just as it appears in WordPress content directory. + +### Setting defaults + +`setSiteOptions` step is used to set home page and other default WP options, and `landingPage` json property is used to start on front page instead of admin. +In your example, you would replace `page_on_front` option with page ID which is front page (if you have front page and not blog list as homepage). + +### Transfering content + +> For transferring content, WXR file is used. The same could be probably achieved with sql dump and runsql step. + +After exporting WXR from standard WordPress installation, URL-s in file have to be adjusted. For example, do search-replace to replace +`https://myserver.com/` into `/`, which is the url root in playground. + +If sql export-import is used, I propose similarly to use wp-cli search-replace command with export option to do same url string replacement.