MyRentBook

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 */

// 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"
document.addEventListener('click', function(e){
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
document.addEventListener('keydown', function(e){
if(e.key === 'Escape'){
document.querySelectorAll('.myrentbook-modal.myrentbook--open')
.forEach(function(m){ m.classList.remove('myrentbook--open'); });
}
});

How it works
– 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.
Does it expose anything publicly?
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.
How do partial payments work?
When you record a payment smaller than the charge, the remaining balance stays open; totals and statuses are recalculated per lease.
What is “credit auto-apply”?
When enabled, overpayments (credit) are automatically applied to the nearest open debt of the lease. You can also trigger “Apply credit now” manually from the landlord panel.
Multilingual support?
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.
Does it send data to third parties?
No. Everything runs on your WordPress (including reminders via WP-Cron).