Skip to content

Commit 9b5249e

Browse files
adekbadekadekbadek
authored
Merge pull request #432 from Automattic/master
Release 4/21/2020
2 parents 31c0575 + d2dfda3 commit 9b5249e

File tree

9 files changed

+89
-21
lines changed

9 files changed

+89
-21
lines changed

‎newspack-blocks-patterns.php

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -423,6 +423,58 @@ function( $patterns, $post_type ) {
423423
2
424424
);
425425

426+
add_filter(
427+
'newspack_blocks_patterns',
428+
function( $patterns, $post_type ) {
429+
if ( in_array( $post_type, [ 'page', 'post', 'newspack_popups_cpt' ], true ) ) {
430+
$decode = json_decode( file_get_contents( NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/patterns/markup/subscribe/style-3.json'), true ); //phpcs:ignore
431+
$patterns[] = [
432+
'category' => __( 'Subscribe', 'newspack-blocks' ),
433+
'content' => str_replace(
434+
[
435+
'Subscribe to our newsletter',
436+
],
437+
[
438+
__( 'Subscribe to our newsletter', 'newspack-blocks' ),
439+
],
440+
$decode['content']
441+
),
442+
'image' => plugins_url( 'src/patterns/images/subscribe/style-3.png', __FILE__ ),
443+
'title' => __( 'Style 3', 'newspack-blocks' ),
444+
];
445+
}
446+
return $patterns;
447+
},
448+
10,
449+
2
450+
);
451+
452+
add_filter(
453+
'newspack_blocks_patterns',
454+
function( $patterns, $post_type ) {
455+
if ( in_array( $post_type, [ 'page', 'post', 'newspack_popups_cpt' ], true ) ) {
456+
$decode = json_decode( file_get_contents( NEWSPACK_BLOCKS__PLUGIN_DIR . 'src/patterns/markup/subscribe/style-4.json'), true ); //phpcs:ignore
457+
$patterns[] = [
458+
'category' => __( 'Subscribe', 'newspack-blocks' ),
459+
'content' => str_replace(
460+
[
461+
'Subscribe to our newsletter',
462+
],
463+
[
464+
__( 'Subscribe to our newsletter', 'newspack-blocks' ),
465+
],
466+
$decode['content']
467+
),
468+
'image' => plugins_url( 'src/patterns/images/subscribe/style-4.png', __FILE__ ),
469+
'title' => __( 'Style 4', 'newspack-blocks' ),
470+
];
471+
}
472+
return $patterns;
473+
},
474+
10,
475+
2
476+
);
477+
426478
/**
427479
* Donation.
428480
*/

‎src/blocks/carousel/editor.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,19 +18,19 @@
1818
}
1919
.swiper-pagination-bullet.swiper-pagination-bullet-active {
2020
opacity: 1;
21-
transform: scale( 1 );
21+
width: 24px;
2222
}
2323
.amp-carousel-button {
2424
&.amp-carousel-button-next,
2525
&.amp-carousel-button-prev {
26-
left: 16px;
27-
margin-top: -18px; // bullets height / 2
26+
left: 1.5em;
27+
margin-top: -24px; // buttons height / 2
2828
transform: translateY( -50% );
2929
}
3030

3131
&.amp-carousel-button-next {
3232
left: auto;
33-
right: 16px;
33+
right: 1.5em;
3434
}
3535
}
3636
}

‎src/blocks/carousel/view.scss

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
}
5252
.entry-wrapper {
5353
bottom: 0;
54-
background-color: rgba( 0, 0, 0, 0.5 );
54+
background-color: rgba( black, 0.5 );
5555
color: white;
5656
left: 0;
5757
padding: 1.5em;
@@ -89,36 +89,38 @@
8989
white-space: normal;
9090
}
9191
.swiper-pagination-bullets {
92+
align-items: flex-end;
9293
bottom: 0;
93-
line-height: 24px;
94-
padding: 10px 0 2px;
94+
display: flex;
95+
flex-wrap: wrap;
96+
height: calc( 1.5em + 12px );
97+
justify-content: center;
98+
padding: 0;
9599
position: relative;
96-
text-align: center;
97100
}
98101
.swiper-pagination-bullet {
99102
background: black;
103+
border-radius: 6px;
100104
display: inline-block;
101-
height: 16px;
105+
height: 12px;
106+
margin: 0 4px;
102107
opacity: 0.5;
103-
transform: scale( 0.75 );
104-
transition: box-shadow 250ms, opacity 250ms, transform 250ms;
105-
width: 16px;
106-
border-radius: 100%;
107108
padding: 0;
108-
margin: 0 4px;
109+
transition: box-shadow 250ms, opacity 250ms, width 250ms;
110+
width: 12px;
109111
&:focus {
110112
box-shadow: 0 0 0 2px white, 0 0 0 4px black;
111113
outline: 0;
112114
}
113115
&[selected] {
114116
opacity: 1;
115117
outline: 0;
116-
transform: scale( 1 );
118+
width: 24px;
117119
}
118120
}
119121

120122
.amp-carousel-button {
121-
background-color: rgba( 0, 0, 0, 0.5 );
123+
background-color: rgba( black, 0.5 );
122124
background-position: center;
123125
background-repeat: no-repeat;
124126
background-size: 24px;
@@ -133,15 +135,16 @@
133135
width: 48px;
134136
&:focus,
135137
&:hover {
136-
background-color: rgba( 0, 0, 0, 0.75 );
138+
background-color: rgba( black, 0.75 );
137139
}
138140
&:focus {
139-
box-shadow: inset 0 0 0 2px rgba( 0, 0, 0, 0.75 ), inset 0 0 0 4px white;
141+
box-shadow: inset 0 0 0 2px rgba( black, 0.75 ), inset 0 0 0 4px white;
140142
outline: 0;
141143
}
142144
}
143145
.amp-carousel-button-next,
144146
.amp-carousel-button-prev {
147+
left: 1.5em;
145148
display: none;
146149

147150
@include media( mobile ) {
@@ -150,6 +153,8 @@
150153
}
151154
.amp-carousel-button-next {
152155
background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5.88%204.12L13.76%2012l-7.88%207.88L8%2022l10-10L8%202z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
156+
left: auto;
157+
right: 1.5em;
153158
}
154159
.amp-carousel-button-prev {
155160
background-image: url( "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M18%204.12L10.12%2012%2018%2019.88%2015.88%2022l-10-10%2010-10z'%20fill='white'/%3E%3Cpath%20fill='none'%20d='M0 0h24v24H0z'/%3E%3C/svg%3E" );
@@ -160,8 +165,8 @@
160165
display: none;
161166
margin-top: 0;
162167
position: absolute;
163-
right: 16px;
164-
top: 16px;
168+
right: 1.5em;
169+
top: 1.5em;
165170
transform: none;
166171
z-index: 1;
167172
}

‎src/patterns/images/subscribe/style-3.png

125 KB
Loading

‎src/patterns/images/subscribe/style-4.png

18.9 KB
Loading

‎src/patterns/markup/subscribe/style-1.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"__file": "wp_block",
33
"title": "Style 1",
4-
"content": "<!-- wp:group {\"className\":\"newspack-pattern subscribe__style-1\"} -->\n<div class=\"wp-block-group newspack-pattern subscribe__style-1\"><div class=\"wp-block-group__inner-container\"><!-- wp:media-text {\"align\":\"\",\"backgroundColor\":\"light-gray\",\"mediaPosition\":\"right\",\"mediaId\":131,\"mediaLink\":\"https://newspack.newspackstaging.com/automated_upload-62/\",\"mediaType\":\"image\",\"verticalAlignment\":\"center\",\"imageFill\":true} -->\n<div class=\"wp-block-media-text has-media-on-the-right has-background has-light-gray-background-color is-stacked-on-mobile is-vertically-aligned-center is-image-fill\"><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https://newspack.newspackstaging.com/wp-content/uploads/2020/03/automated_upload-62-1024x683.jpg);background-position:50% 50%\"><img src=\"https://newspack.newspackstaging.com/wp-content/uploads/2020/03/automated_upload-62-1024x683.jpg\" alt=\"\" class=\"wp-image-131\"/></figure><div class=\"wp-block-media-text__content\"><!-- wp:spacer {\"height\":32} -->\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:heading -->\n<h2>Subscribe to our newsletter</h2>\n<!-- /wp:heading -->\n\n<!-- wp:jetpack/mailchimp /-->\n\n<!-- wp:spacer {\"height\":32} -->\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div></div>\n<!-- /wp:media-text --></div></div>\n<!-- /wp:group -->"
4+
"content": "<!-- wp:group {\"className\":\"newspack-pattern subscribe__style-1\"} -->\n<div class=\"wp-block-group newspack-pattern subscribe__style-1\"><div class=\"wp-block-group__inner-container\"><!-- wp:media-text {\"align\":\"\",\"backgroundColor\":\"light-gray\",\"mediaPosition\":\"right\",\"mediaId\":131,\"mediaLink\":\"https://newspack.newspackstaging.com/automated_upload-62/\",\"mediaType\":\"image\",\"verticalAlignment\":\"center\",\"imageFill\":true} -->\n<div class=\"wp-block-media-text has-media-on-the-right has-background has-light-gray-background-color is-stacked-on-mobile is-vertically-aligned-center is-image-fill\"><figure class=\"wp-block-media-text__media\" style=\"background-image:url(https://newspack.newspackstaging.com/wp-content/uploads/2020/03/automated_upload-62.jpg);background-position:50% 50%\"><img src=\"https://newspack.newspackstaging.com/wp-content/uploads/2020/03/automated_upload-62.jpg\" alt=\"\" class=\"wp-image-131\"/></figure><div class=\"wp-block-media-text__content\"><!-- wp:spacer {\"height\":32} -->\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer -->\n\n<!-- wp:heading -->\n<h2>Subscribe to our newsletter</h2>\n<!-- /wp:heading -->\n\n<!-- wp:jetpack/mailchimp /-->\n\n<!-- wp:spacer {\"height\":32} -->\n<div style=\"height:32px\" aria-hidden=\"true\" class=\"wp-block-spacer\"></div>\n<!-- /wp:spacer --></div></div>\n<!-- /wp:media-text --></div></div>\n<!-- /wp:group -->"
55
}

‎src/patterns/markup/subscribe/style-3.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"__file": "wp_block",
3+
"title": "Style 3",
4+
"content": "<!-- wp:group {\"className\":\"newspack-pattern subscribe__style-4\"} -->\n<div class=\"wp-block-group newspack-pattern subscribe__style-4\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:cover {\"url\":\"https://newspack.newspackstaging.com/wp-content/uploads/2020/03/automated_upload-62.jpg\",\"id\":131} -->\n<div class=\"wp-block-cover has-background-dim\" style=\"background-image:url(https://newspack.newspackstaging.com/wp-content/uploads/2020/03/automated_upload-62.jpg)\"><div class=\"wp-block-cover__inner-container\"><!-- wp:heading -->\n<h2>Subscribe to our newsletter</h2>\n<!-- /wp:heading --></div></div>\n<!-- /wp:cover --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:jetpack/mailchimp /--></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->"
5+
}

‎src/patterns/markup/subscribe/style-4.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"__file": "wp_block",
3+
"title": "Style 4",
4+
"content": "<!-- wp:group {\"className\":\"newspack-pattern subscribe__style-3\"} -->\n<div class=\"wp-block-group newspack-pattern subscribe__style-3\"><div class=\"wp-block-group__inner-container\"><!-- wp:columns {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-columns are-vertically-aligned-center\"><!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:heading -->\n<h2>Subscribe to our newsletter</h2>\n<!-- /wp:heading --></div>\n<!-- /wp:column -->\n\n<!-- wp:column {\"verticalAlignment\":\"center\"} -->\n<div class=\"wp-block-column is-vertically-aligned-center\"><!-- wp:jetpack/mailchimp /--></div>\n<!-- /wp:column --></div>\n<!-- /wp:columns --></div></div>\n<!-- /wp:group -->"
5+
}

‎src/patterns/style.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
*/
66

77
.newspack-patterns-block-styles {
8+
background: transparent;
89
padding: 0;
910
margin-bottom: -16px;
1011

0 commit comments

Comments
 (0)