diff --git a/mu-plugins/blocks/modal/icons/close.svg b/mu-plugins/blocks/modal/icons/close.svg new file mode 100644 index 000000000..1c7123ec0 --- /dev/null +++ b/mu-plugins/blocks/modal/icons/close.svg @@ -0,0 +1,3 @@ + diff --git a/mu-plugins/blocks/modal/index.php b/mu-plugins/blocks/modal/index.php new file mode 100644 index 000000000..527f61d7a --- /dev/null +++ b/mu-plugins/blocks/modal/index.php @@ -0,0 +1,137 @@ + __NAMESPACE__ . '\render', + ) + ); + register_block_type( + __DIR__ . '/build/inner-content', + array( + 'render_callback' => __NAMESPACE__ . '\render_inner_content', + ) + ); +} + +/** + * Returns a local SVG icon. + * + * @param string $icon Name of the icon to render, corresponds to file name. + * @return string + */ +function render_icon( $icon ) { + $file_path = __DIR__ . '/icons/' . $icon . '.svg'; + if ( file_exists( $file_path ) ) { + return file_get_contents( $file_path ); + } +} + +/** + * Render the block content for the modal/popover/inline container. + * + * The modal requires more HTML for micromodal support, but inline and popover + * use the same markup with slightly different CSS. + * + * @param array $attributes Block attributes. + * @param string $content Block default content. + * @param WP_Block $block Block instance. + * + * @return string Returns the block markup. + */ +function render_inner_content( $attributes, $content, $block ) { + // Fetch the type from the parent block. + $type = $block->context['wporg/modal/type'] ?? ''; + if ( ! $type ) { + return; + } + + if ( 'inline' === $type || 'popover' === $type ) { + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => 'wporg-modal__modal alignwide' ) ); + return sprintf( + '