Adds two new section patterns for Tainacan Interface.
This commit is contained in:
mateuswetah
parent
d7a0ba01b9
commit
961fef80eb
|
|
@ -29,11 +29,16 @@
|
|||
// 1400px is the maximum the inner cointainer should get, so we
|
||||
// use 1526px - 1 column - 1 column;
|
||||
@media only screen and (min-width: 1526px) {
|
||||
margin-left: calc(-1*(87.5vw - 1400px)/2) !important !important;
|
||||
margin-right: calc(-1*(87.5vw - 1400px)/2) !important !important;
|
||||
margin-left: calc(-1*(87.5vw - 1400px)/2) !important;
|
||||
margin-right: calc(-1*(87.5vw - 1400px)/2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.has-text-color>a,
|
||||
.has-text-color>a:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
// 1400px is the maximum the inner cointainer should get, so we
|
||||
// use 1526px - 1 column - 1 column;
|
||||
.wp-block-image.alignwide>img {
|
||||
|
|
|
|||
|
|
@ -150,6 +150,11 @@
|
|||
|
||||
/* Links */
|
||||
a { text-decoration: none; }
|
||||
.has-text-color>a,
|
||||
.has-text-color>a:hover {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
/* Buttons */
|
||||
.components-button.is-button {
|
||||
|
|
@ -259,6 +264,22 @@
|
|||
color: black;
|
||||
}
|
||||
|
||||
/* Cover block */
|
||||
:not([data-align="wide"]):not([data-align="full"])>.wp-block-cover {
|
||||
width: auto;
|
||||
}
|
||||
[data-align="full"] .wp-block-cover__inner-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 8.3333333333%;
|
||||
padding: 0 8.3333333333vw;
|
||||
|
||||
&>.wp-block {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modal container */
|
||||
.components-modal__content {
|
||||
padding: 32px;
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@
|
|||
/* Buttons */
|
||||
/* Text input */
|
||||
/* Labels */
|
||||
/* Cover block */
|
||||
/* Modal container */
|
||||
/* Modal Header */
|
||||
/* Checkboxes and Radio Buttons*/
|
||||
|
|
@ -179,6 +180,11 @@
|
|||
.edit-post-visual-editor.editor-styles-wrapper a,
|
||||
.components-modal__screen-overlay a {
|
||||
text-decoration: none; }
|
||||
.edit-post-visual-editor.editor-styles-wrapper .has-text-color > a,
|
||||
.edit-post-visual-editor.editor-styles-wrapper .has-text-color > a:hover,
|
||||
.components-modal__screen-overlay .has-text-color > a,
|
||||
.components-modal__screen-overlay .has-text-color > a:hover {
|
||||
color: inherit; }
|
||||
.edit-post-visual-editor.editor-styles-wrapper .components-button.is-button,
|
||||
.components-modal__screen-overlay .components-button.is-button {
|
||||
border: none;
|
||||
|
|
@ -375,6 +381,19 @@
|
|||
.components-modal__screen-overlay .components-base-control__label {
|
||||
font-weight: 600;
|
||||
color: black; }
|
||||
.edit-post-visual-editor.editor-styles-wrapper :not([data-align="wide"]):not([data-align="full"]) > .wp-block-cover,
|
||||
.components-modal__screen-overlay :not([data-align="wide"]):not([data-align="full"]) > .wp-block-cover {
|
||||
width: auto; }
|
||||
.edit-post-visual-editor.editor-styles-wrapper [data-align="full"] .wp-block-cover__inner-container,
|
||||
.components-modal__screen-overlay [data-align="full"] .wp-block-cover__inner-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 8.3333333333%;
|
||||
padding: 0 8.3333333333vw; }
|
||||
.edit-post-visual-editor.editor-styles-wrapper [data-align="full"] .wp-block-cover__inner-container > .wp-block,
|
||||
.components-modal__screen-overlay [data-align="full"] .wp-block-cover__inner-container > .wp-block {
|
||||
max-width: 100%;
|
||||
margin: 0; }
|
||||
.edit-post-visual-editor.editor-styles-wrapper .components-modal__content,
|
||||
.components-modal__screen-overlay .components-modal__content {
|
||||
padding: 32px;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -222,7 +222,103 @@ function tainacan_block_patterns_init() {
|
|||
array(
|
||||
'title' => __( 'Tainacan heading section', 'tainacan-interface' ),
|
||||
'description' => _x( 'A left-aligned heading section containing a light sub-heading and an underline bellow the title.', 'Block pattern description', 'tainacan-interface' ),
|
||||
'content' => '<!-- wp:group {"className":"tainacan-heading-section-pattern-pattern"} --><div class="wp-block-group tainacan-heading-section-pattern-pattern"><div class="wp-block-group__inner-container"><!-- wp:heading {"textColor":"default","style":{"typography":{"fontSize":24}}} --><h2 class="has-default-color has-text-color" style="font-size:24px">' . esc_html__( 'Section heading', 'tainacan-interface' ) . '</h2><!-- /wp:heading --><!-- wp:paragraph {"style":{"color":{"text":"#838386"}}} --><p class="has-text-color" style="color:#898d8f">' . esc_html__( 'Section optional description...', 'tainacan-interface' ) . '</p><!-- /wp:paragraph --><!-- wp:separator {"color":"default"} --><hr class="wp-block-separator has-text-color has-background has-default-background-color has-default-color"/><!-- /wp:separator --><!-- wp:spacer {"height":32} --><div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer --></div></div><!-- /wp:group -->',
|
||||
'content' => '<!-- wp:group {"className":"tainacan-heading-section-pattern-pattern"} --><div class="wp-block-group tainacan-heading-section-pattern-pattern"><div class="wp-block-group__inner-container"><!-- wp:heading {"textColor":"default","style":{"typography":{"fontSize":24}}} --><h2 class="has-default-color has-text-color" style="font-size:24px">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2><!-- /wp:heading --><!-- wp:paragraph {"style":{"color":{"text":"#838386"}}} --><p class="has-text-color" style="color:#898d8f">' . esc_html__( 'Section optional description...', 'tainacan-interface' ) . '</p><!-- /wp:paragraph --><!-- wp:separator {"color":"default"} --><hr class="wp-block-separator has-text-color has-background has-default-background-color has-default-color"/><!-- /wp:separator --><!-- wp:spacer {"height":32} --><div style="height:32px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer --></div></div><!-- /wp:group -->',
|
||||
'categories' => array('tainacan-interface')
|
||||
)
|
||||
);
|
||||
register_block_pattern(
|
||||
'tainacan-interface/tainacan-highlight-section-pattern',
|
||||
array(
|
||||
'title' => __( 'Tainacan highlight section', 'tainacan-interface' ),
|
||||
'description' => _x( 'A hero section with a background color and columns for image and text.', 'Block pattern description', 'tainacan-interface' ),
|
||||
'content' => '
|
||||
<!-- wp:cover {"overlayColor":"default","align":"full"} -->
|
||||
<div class="wp-block-cover alignfull has-default-background-color has-background-dim">
|
||||
|
||||
<div class="wp-block-cover__inner-container">
|
||||
<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
|
||||
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
|
||||
<!-- /wp:heading -->
|
||||
<!-- wp:spacer {"height": 16} -->
|
||||
<div style="height:16px" aria-hidden="true" class="wp-block-spacer"></div>
|
||||
<!-- /wp:spacer -->
|
||||
<!-- wp:columns -->
|
||||
<div class="wp-block-columns">
|
||||
<!-- wp:column {"width":33.33} -->
|
||||
<div class="wp-block-column" style="flex-basis:33.33%">
|
||||
<!-- wp:image {"id":152274,"sizeSlug":"large"} -->
|
||||
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure>
|
||||
<!-- /wp:image -->
|
||||
</div>
|
||||
<!-- /wp:column -->
|
||||
|
||||
<!-- wp:column {"width":66.66} -->
|
||||
<div class="wp-block-column" style="flex-basis:66.66%">
|
||||
<!-- wp:paragraph {"fontSize":"normal"} -->
|
||||
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<!-- /wp:paragraph -->
|
||||
|
||||
<!-- wp:paragraph {"align":"right","style":{"color":{"text":"#ffffff"}}} -->
|
||||
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
|
||||
<!-- /wp:paragraph -->
|
||||
</div>
|
||||
<!-- /wp:column -->
|
||||
</div>
|
||||
<!-- /wp:columns -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /wp:cover -->',
|
||||
'categories' => array('tainacan-interface')
|
||||
)
|
||||
);
|
||||
register_block_pattern(
|
||||
'tainacan-interface/tainacan-highlight-section-pattern-alt',
|
||||
array(
|
||||
'title' => __( 'Tainacan highlight section (alt)', 'tainacan-interface' ),
|
||||
'description' => _x( 'Another hero section with a background color and columns for image headings and text.', 'Block pattern description', 'tainacan-interface' ),
|
||||
'content' => '
|
||||
<!-- wp:cover {"customOverlayColor":"#01295c","align":"full"} -->
|
||||
<div class="wp-block-cover alignfull has-background-dim" style="background-color:#01295c">
|
||||
<div class="wp-block-cover__inner-container">
|
||||
|
||||
<!-- wp:columns -->
|
||||
<div class="wp-block-columns">
|
||||
<!-- wp:column {"width":33.33} -->
|
||||
<div class="wp-block-column" style="flex-basis:33.33%">
|
||||
<!-- wp:image {"id":152274,"sizeSlug":"large"} -->
|
||||
<figure class="wp-block-image size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/thumbnail_placeholder.png' . '" alt="" class="wp-image-152274"/></figure>
|
||||
<!-- /wp:image -->
|
||||
</div>
|
||||
<!-- /wp:column -->
|
||||
|
||||
<!-- wp:column {"width":33.33} -->
|
||||
<div class="wp-block-column" style="flex-basis:33.33%">
|
||||
<!-- wp:heading {"style":{"color":{"text":"#ffffff"}}} -->
|
||||
<h2 class="has-text-color" style="color:#ffffff">' . esc_html__( 'Section title', 'tainacan-interface' ) . '</h2>
|
||||
<!-- /wp:heading -->
|
||||
|
||||
<!-- wp:paragraph {"fontSize":"normal"} -->
|
||||
<p class="has-normal-font-size">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
||||
<!-- /wp:paragraph -->
|
||||
</div>
|
||||
<!-- /wp:column -->
|
||||
|
||||
<!-- wp:column {"width":33.33} -->
|
||||
<div class="wp-block-column" style="flex-basis:33.33%">
|
||||
<!-- wp:paragraph {"fontSize":"normal"} -->
|
||||
<p class="has-normal-font-size">Sed at orci ex. Nulla pulvinar, lorem vel eleifend maximus, nunc elit porta felis, id placerat orci dui sit amet ligula. Mauris fermentum dui quam, eget blandit ligula vulputate sit amet. Integer aliquet eget urna ac tempor. Nunc viverra faucibus magna ac aliquet. Integer ullamcorper lacinia elit quis gravida. Duis placerat pulvinar arcu nec faucibus. Sed sit amet enim iaculis, facilisis est non, venenatis nibh.</p>
|
||||
<!-- /wp:paragraph -->
|
||||
|
||||
<!-- wp:paragraph {"align":"right","style":{"color":{"text":"#ffffff"}}} -->
|
||||
<p class="has-text-align-right has-text-color" style="color:#ffffff"><a href="/"> ' .esc_html__( 'View more...', 'tainacan-interface' ) . '</a></p>
|
||||
<!-- /wp:paragraph -->
|
||||
</div>
|
||||
<!-- /wp:column -->
|
||||
</div>
|
||||
<!-- /wp:columns -->
|
||||
</div>
|
||||
</div>
|
||||
<!-- /wp:cover -->',
|
||||
'categories' => array('tainacan-interface')
|
||||
)
|
||||
);
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue