editPost( { meta: { custom_css: instance.getValue() } } ) }
- options={ {
- gutters: [ 'CodeMirror-lint-markers' ],
- height: 'auto',
- indentWithTabs: true,
- mode: 'css',
- lint: true,
- } }
+ onChange={ content => editPost( { meta: { custom_css: content } } ) }
+ aria-label={ __( 'Custom CSS', 'newspack-newsletters' ) }
+ placeholder={ __( 'Write custom CSS…', 'newspack-newsletters' ) }
/>
diff --git a/src/newsletter-editor/styling/style.scss b/src/newsletter-editor/styling/style.scss
index 06da1b24d..c721f80fb 100644
--- a/src/newsletter-editor/styling/style.scss
+++ b/src/newsletter-editor/styling/style.scss
@@ -26,8 +26,28 @@
.components-base-control {
max-width: 100%;
}
- .CodeMirror {
- border: 1px solid wp-colors.$gray-700;
+ .block-editor-plain-text {
+ background: #fff !important;
+ border: 1px solid #1e1e1e !important;
+ border-radius: 2px !important;
+ box-shadow: none !important;
+ box-sizing: border-box;
+ color: #1e1e1e !important;
+ direction: ltr;
+ font-family: Menlo, Consolas, monaco, monospace !important;
+ font-size: 16px !important;
+ max-height: 250px;
+ padding: 12px !important;
+ }
+ @media (min-width: 600px) {
+ .block-editor-plain-text {
+ font-size: 13px !important;
+ }
+ }
+ .block-editor-plain-text:focus {
+ border-color: var(--wp-admin-theme-color) !important;
+ box-shadow: 0 0 0 1px var(--wp-admin-theme-color) !important;
+ outline: 2px solid #0000 !important;
}
}
}
diff --git a/tests/test-renderer.php b/tests/test-renderer.php
index 97546f830..1c2897d67 100755
--- a/tests/test-renderer.php
+++ b/tests/test-renderer.php
@@ -57,28 +57,48 @@ public function test_render_mjml_component() {
}
/**
- * Test embed blocks rendering.
+ * Filter the OEmbed return value.
+ *
+ * @param array $data The data to return.
*/
- public function test_render_embed_blocks() {
- // Make the embed request return a static custom response.
+ public function set_oembed_value( $data = [] ) {
+ global $newspack_newsletters_test_oembed_data;
+ $newspack_newsletters_test_oembed_data = $data;
add_filter(
- 'http_response',
- function( $response ) {
- $response['body'] = wp_json_encode(
- array_merge(
- json_decode( $response['body'], true ),
- [
- 'title' => 'Embed',
- 'url' => 'embed.com',
- 'thumbnail_url' => 'embed.com/image',
- 'html' => 'Embed
',
- ]
- )
- );
- return $response;
+ 'newspack_newsletters_get_oembed_object',
+ function() {
+ return new class() {
+ public function get_data() { // phpcs:disable Squiz.Commenting.FunctionComment.Missing
+ global $newspack_newsletters_test_oembed_data;
+ return (object) array_merge(
+ [
+ 'title' => 'Embed',
+ 'url' => 'embed.com',
+ 'width' => 480,
+ 'height' => 360,
+ 'thumbnail_url' => 'embed.com/image',
+ 'thumbnail_width' => 480,
+ 'thumbnail_height' => 360,
+ 'html' => 'Embed',
+ ],
+ $newspack_newsletters_test_oembed_data
+ );
+ }
+ };
}
);
+ }
+ /**
+ * Test embed blocks rendering.
+ */
+ public function test_render_embed_blocks() {
+ $this->set_oembed_value(
+ [
+ 'type' => 'video',
+ 'provider_name' => 'YouTube',
+ ]
+ );
// Video embed.
$inner_html = '';
$this->assertEquals(
@@ -97,6 +117,12 @@ function( $response ) {
'Renders image from video embed block with title as caption'
);
+ $this->set_oembed_value(
+ [
+ 'type' => 'photo',
+ 'provider_name' => 'Flickr',
+ ]
+ );
// Image with custom caption.
$inner_html = '';
$this->assertEquals(
@@ -111,13 +137,19 @@ function( $response ) {
'innerHTML' => $inner_html,
]
),
- 'Automattic - Flickr',
+ 'Automattic - Flickr',
'Renders image with inline figcaption as caption'
);
// Rich embed as HTML.
- $inner_html = '';
- $rendered_string = Newspack_Newsletters_Renderer::render_mjml_component(
+ $inner_html = '';
+ $this->set_oembed_value(
+ [
+ 'type' => 'rich',
+ 'provider_name' => 'Twitter',
+ ]
+ );
+ $rendered_string = Newspack_Newsletters_Renderer::render_mjml_component(
[
'blockName' => 'core/embed',
'attrs' => [