MyRentBook

Short version: add one Group block with id=msg1 and class myrentbook-modal, nest one inner Group with class myrentbook-modal__dialog, place your Shortcode block and a Close button underneath. Paste a small CSS snippet above the modal block and a JS snippet in the site footer. Steps 1) In the target page, create a Group block → in “HTML Anchor” enter: msg1 (this yields id="msg1"). In “Additional CSS class(es)” enter: myrentbook-modal 2) Inside this group, add another Group block → in “Additional CSS class(es)” enter: myrentbook-modal__dialog 3) Inside the inner group (“card”), add: – a Shortcode block (important: NOT “Custom HTML”), – below it, a Buttons block with a single button whose link (URL) is #close. Resulting structure: Group (id=msg1, class=myrentbook-modal) └─ Group (class=myrentbook-modal__dialog) ├─ Shortcode [your plugin prints the message here] └─ Buttons [one button with URL #close] 4) Directly ABOVE the modal, add a “Custom HTML” block and paste this CSS: /* Hide modal by default; show when class is added */ .myrentbook-modal{ display:none; } .myrentbook-modal.myrentbook--open{ display:block; } /* Full-surface overlay and positioning */ .myrentbook-modal{ position:fixed !important; inset:0 !important; display:none; align-items:flex-start; justify-content:center; padding-top:10vh; background:transparent !important; z-index:2147483647; margin:0 !important; max-width:none !important; } .myrentbook-modal.myrentbook--open{ display:flex !important; } .myrentbook-modal::before{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.6); } /* Dialog “card” (inner group = message + button) */ .myrentbook-modal__dialog{ position:relative; z-index:1; width:min(720px, calc(100% - 32px)); background:#fff; border-radius:12px; padding:20px 24px 18px; box-shadow:0 18px 50px rgba(0,0,0,.30); margin:0 !important; } /* Tame Gutenberg layout wrappers inside the card */ .myrentbook-modal__dialog [class*="is-layout-"], .myrentbook-modal__dialog [class*="wp-container-"]{ margin:0 !important; max-width:none !important; gap:0 !important; } /* Center the shortcode/text content */ .myrentbook-modal__dialog .myrentbook-notice__inner, .myrentbook-modal__dialog .wp-block-shortcode{ text-align:center !important; } .myrentbook-modal__dialog .myrentbook-notice__inner > *, .myrentbook-modal__dialog .wp-block-shortcode > *{ margin-left:auto !important; margin-right:auto !important; } .myrentbook-modal__dialog p{ text-align:center !important; } /* Button(s) under the message */ .myrentbook-modal__dialog > .wp-block-buttons{ display:flex; justify-content:center; /* change to flex-end if you prefer right-aligned */ margin-top:12px !important; } 5) Paste this JS into the site footer (choose one: Site Editor → Footer → “Custom HTML” block; or a “headers & footers” helper plugin; or directly into footer.php before ): /* ===== MyRentBook: auto-modal when a message exists ===== */ /* No design changes here — just show/hide */

var modal = document.getElementById('msg1'); if(!modal) return; // If there is any notice inside — open the modal if(modal.querySelector('.myrentbook-notice')){ modal.classList.add('myrentbook--open'); // Optional: auto-close success after 3 seconds if(modal.querySelector('.myrentbook-notice--success')){ setTimeout(function(){ modal.classList.remove('myrentbook--open'); }, 3000); } } }); // Close on link with href="#close"

var a = e.target.closest('a[href="#close"]'); if(!a) return; e.preventDefault(); var modal = a.closest('.myrentbook-modal'); if(modal){ modal.classList.remove('myrentbook--open'); } }); // Close on Esc

if(e.key === 'Escape'){

.forEach(function(m){ m.classList.remove('myrentbook--open'); }); } });

– On page load, the script looks for #msg1. If it contains .myrentbook-notice (success or error), the modal opens with a dark overlay. – Closing works via the #close button and the Esc key. – Shortcodes must be added via the “Shortcode” block (NOT “Custom HTML”), or WordPress will not render them. Troubleshooting – Modal doesn’t open: ensure the outer group has id="msg1" and class myrentbook-modal, and that the inner content actually outputs a .myrentbook-notice element. – Button does nothing: its link must be exactly #close. – Shortcode shows as plain text: replace “Custom HTML” with the “Shortcode” block. – Cache/minification: clear caches after adding CSS/JS. – Polylang: create the modal on each language version of the page (content is just regular blocks). Multiple modals (optional) Duplicate the structure with different anchors (msg2, msg3). Then either duplicate the JS block with the new IDs or generalize the code to loop over all .myrentbook-modal elements. For most setups, one modal (msg1) is enough. Notes – You can adjust the auto-close timeout (3000 ms) or remove that block if you don’t want auto-closing for success. – If your theme has very aggressive styles, the provided CSS already neutralizes common layout wrappers inside the dialog card without affecting the rest of the site.

Only the pages where you place shortcodes will render dashboards. Typically you keep tenant pages behind login; the plugin does not publish public archives for sensitive CPTs by default.

The plugin is fully localized. English (en_US), Spanish (es_ES) and Russian (ru_RU) are included; you can add more via translate.wordpress.org or tools like Loco Translate / Poedit.

No. Everything runs on your WordPress (including reminders via WP-Cron).