Atualiza para nova lógica de modals do tema

public/dist/css/glossario.css

@@ -1 +1 @@
-.rg-container{width:100%}@media (min-width:640px){.rg-container{max-width:640px}}@media (min-width:768px){.rg-container{max-width:768px}}@media (min-width:1024px){.rg-container{max-width:1024px}}@media (min-width:1280px){.rg-container{max-width:1280px}}.rg-bg-yellow-100{--bg-opacity:1!important;background-color:#faf9f5!important;background-color:rgba(250,249,245,var(--bg-opacity))!important}.rg-border-red-400{--border-opacity:1!important;border-color:#ff746e!important;border-color:rgba(255,116,110,var(--border-opacity))!important}.rg-border-l-8{border-left-width:8px!important}.rg-font-bold{font-weight:700!important}.rg-h-full{height:100%!important}.rg-text-xl{font-size:1.25rem!important}.rg-text-2xl{font-size:1.5rem!important}.rg-leading-tight{line-height:1.25!important}.rg-mt-2{margin-top:.5rem!important}.rg-mr-2{margin-right:.5rem!important}.rg-mt-5{margin-top:1.25rem!important}.rg-max-w-2xl{max-width:42rem!important}.hover\:rg-opacity-75:hover{opacity:.75!important}.rg-overflow-y-auto{overflow-y:auto!important}.rg-overflow-x-hidden{overflow-x:hidden!important}.rg-px-3{padding-left:.75rem!important;padding-right:.75rem!important}.rg-px-4{padding-left:1rem!important;padding-right:1rem!important}.rg-py-6{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.rg-pt-4{padding-top:1rem!important}.rg-fixed{position:fixed!important}.rg-absolute{position:absolute!important}.rg-relative{position:relative!important}.rg-inset-0{right:0!important;bottom:0!important;left:0!important}.rg-inset-0,.rg-top-0{top:0!important}.rg-right-0{right:0!important}.rg-text-red-400{--text-opacity:1!important;color:#ff746e!important;color:rgba(255,116,110,var(--text-opacity))!important}.rg-w-full{width:100%!important}.rg-z-40{z-index:40!important}@media (min-width:1024px){.lg\:rg-py-8{padding-top:2rem!important;padding-bottom:2rem!important}.lg\:rg-px-12{padding-left:3rem!important;padding-right:3rem!important}}
+.rg-container{width:100%}@media (min-width:640px){.rg-container{max-width:640px}}@media (min-width:768px){.rg-container{max-width:768px}}@media (min-width:1024px){.rg-container{max-width:1024px}}@media (min-width:1280px){.rg-container{max-width:1280px}}.rg-bg-yellow-100{--bg-opacity:1!important;background-color:#faf9f5!important;background-color:rgba(250,249,245,var(--bg-opacity))!important}.rg-border-red-400{--border-opacity:1!important;border-color:#ff746e!important;border-color:rgba(255,116,110,var(--border-opacity))!important}.rg-border-l-8{border-left-width:8px!important}.rg-font-bold{font-weight:700!important}.rg-text-xl{font-size:1.25rem!important}.rg-text-2xl{font-size:1.5rem!important}.rg-leading-tight{line-height:1.25!important}.rg-mt-2{margin-top:.5rem!important}.rg-mr-2{margin-right:.5rem!important}.rg-mt-5{margin-top:1.25rem!important}.rg-max-w-2xl{max-width:42rem!important}.hover\:rg-opacity-75:hover{opacity:.75!important}.rg-px-4{padding-left:1rem!important;padding-right:1rem!important}.rg-py-6{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.rg-pt-4{padding-top:1rem!important}.rg-absolute{position:absolute!important}.rg-top-0{top:0!important}.rg-right-0{right:0!important}.rg-text-red-400{--text-opacity:1!important;color:#ff746e!important;color:rgba(255,116,110,var(--text-opacity))!important}@media (min-width:1024px){.lg\:rg-py-8{padding-top:2rem!important;padding-bottom:2rem!important}.lg\:rg-px-12{padding-left:3rem!important;padding-right:3rem!important}}

public/views/post-modal.php

@@ -14,19 +14,21 @@ $slug = get_post_field('post_name', $post);
 ?>
 
 <div
-	x-data="{ open: false }"
-	x-bind:class="{ 'hidden': !open }"
-	x-on:modal-open="open = true"
-	x-on:keyup.escape.window="open = false"
+	x-show.transition.opacity="modal === 'glossario-<?php echo $slug ?>'"
 	x-cloak
-	class="rg-fixed rg-inset-0 rg-z-40 rg-px-3 rg-w-full rg-h-full rg-overflow-y-auto rg-overflow-x-hidden"
+	class="modal"
 	id="modal-glossario-<?php echo $slug ?>"
 	role="dialog"
 	aria-labelledby="modal-glossario-<?php echo $slug ?>-label"
 >
-	<div x-on:click.away="open = false" class="rg-relative rg-bg-yellow-100 rg-px-4 lg:rg-px-12 rg-pt-4 rg-py-6 lg:rg-py-8 rg-max-w-2xl rg-border-l-8 rg-border-red-400 modal-dialog">
-
-		<button type="button" x-on:click="open = false" class="rg-absolute rg-top-0 rg-right-0 rg-text-2xl rg-text-red-400 hover:rg-opacity-75 rg-mt-2 rg-mr-2" aria-label="{{ __('Fechar', 'sage') }}">
+	<div @click.away="$dispatch('modal-close')" class="rg-bg-yellow-100 rg-px-4 lg:rg-px-12 rg-pt-4 rg-py-6 lg:rg-py-8 rg-max-w-2xl rg-border-l-8 rg-border-red-400 modal-dialog">
+
+		<button
+			@click="$dispatch('modal-close')"
+			type="button"
+			class="rg-absolute rg-top-0 rg-right-0 rg-text-2xl rg-text-red-400 hover:rg-opacity-75 rg-mt-2 rg-mr-2"
+			aria-label="{{ __('Fechar', 'sage') }}"
+		>
 			<i class="far fa-times-circle"></i>
 		</button>
 

public/views/shortcode-output.php

@@ -13,10 +13,7 @@
 
 <a href="#"
 	x-data
-	x-on:click="
-		$event.preventDefault();
-		document.getElementById('modal-glossario-<?php echo get_post_field('post_name', $post); ?>').dispatchEvent(new Event('modal-open'));
-	"
+	@click.prevent="$dispatch('modal-open', { modal: 'glossario-<?php echo get_post_field('post_name', $post); ?>' })"
 >
 	<?php echo $content; ?>
 </a>