Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TT1 blocks: cleanup CSS #28

Closed
wants to merge 4 commits into from
Closed

TT1 blocks: cleanup CSS #28

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f636c34
removed obvious unnecesary css
MaggieCabrera Mar 30, 2023
d04760a
removed border block style from patterns
MaggieCabrera Mar 30, 2023
c22ec9d
updated minimum WP version
MaggieCabrera Mar 30, 2023
3148678
removed alignments CSS
MaggieCabrera Mar 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 2 additions & 35 deletions tt1-blocks/assets/css/blocks.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
/*--------------------------------------------------------------
# Cover
# Border, for backwards compatibility
--------------------------------------------------------------*/

.wp-block-cover.is-style-twentytwentyone-border {
.is-style-twentytwentyone-border {
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is needed so we don't lose the border on already inserted patterns with the old markup. I hope by the end of this PR we can move this to style.css

border: 3px solid var(--wp--preset--color--dark-gray);
}

Expand Down Expand Up @@ -50,15 +50,6 @@
# Image
--------------------------------------------------------------*/

.wp-block-image img {
height: auto;
}

.wp-block-image.is-style-twentytwentyone-border img,
.wp-block-image.is-style-twentytwentyone-image-frame img {
border: 3px solid var(--wp--preset--color--dark-gray);
}

.wp-block-image.is-style-twentytwentyone-image-frame img {
padding: var(--wp--custom--spacing--unit);
}
Expand Down Expand Up @@ -137,14 +128,6 @@
margin-bottom: var(--wp--custom--spacing--horizontal);
}

/*--------------------------------------------------------------
# Media & Text
--------------------------------------------------------------*/

.wp-block-media-text.is-style-twentytwentyone-border {
border: 3px solid var(--wp--preset--color--dark-gray);
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
Expand Down Expand Up @@ -179,23 +162,7 @@ hr.is-style-twentytwentyone-separator-thick,
border-bottom-width: 3px;
}

.wp-block-separator.is-style-dots {
border-bottom: none;
}

.wp-block-separator.is-style-dots > hr {
display: none;
}

/* In Twenty Twenty-One, separators are 100% wide. This replicates that approach */
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
width: 100%;
}

/*--------------------------------------------------------------
# Site Title
--------------------------------------------------------------*/

h1.wp-block-site-title a:not(:hover):not(:focus):not(:active) {
text-decoration: none;
}
7 changes: 0 additions & 7 deletions tt1-blocks/assets/css/style-shared.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,6 @@ a:hover {
text-decoration-skip-ink: none;
}

/*
* Gutenberg remotes this underline, but Twenty Twenty-One uses it.
*/
.site-header h1.wp-block-site-title a:not(:hover):not(:focus):not(:active) {
text-decoration: underline;
}

/*
* Alignment styles.
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We will add the theme.json for the global padding on this issue

* These rules are temporary, and should not be relied on or
Expand Down
38 changes: 18 additions & 20 deletions tt1-blocks/patterns/links-area.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,26 +13,24 @@
*/

?>
<!-- wp:cover {"overlayColor":"green","contentPosition":"center center","align":"wide","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-cover alignwide has-green-background-color has-background-dim is-style-twentytwentyone-border">
<div class="wp-block-cover__inner-container">
<!-- wp:spacer {"height":20} --><div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer -->
<!-- wp:paragraph {"fontSize":"huge"} --><p class="has-huge-font-size"><?php echo wp_kses_post( __( 'Let&#8217;s Connect.', 'tt1-blocks' ) ); ?></p><!-- /wp:paragraph -->
<!-- wp:spacer {"height":75} --><div style="height:75px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer -->
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph --><p><a href="#" data-type="URL"><?php esc_html_e( 'Twitter', 'tt1-blocks' ); ?></a> / <a href="#" data-type="URL"><?php esc_html_e( 'Instagram', 'tt1-blocks' )?> </a> / <a href="#" data-type="URL"> <?php esc_html_e( 'Dribbble', 'tt1-blocks' ); ?></a></p><!-- /wp:paragraph -->
</div><!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph --><p><a href="#"><?php esc_html_e( '[email protected]', 'tt1-blocks' ); ?></a></p><!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:group {"align":"wide","style":{"border":{"top":{"color":"var:preset|color|gray","style":"solid"},"right":{"color":"var:preset|color|gray","style":"solid"},"bottom":{"color":"var:preset|color|gray","style":"solid"},"left":{"color":"var:preset|color|gray","style":"solid"}},"spacing":{"padding":{"top":"20px","right":"20px","bottom":"20px","left":"20px"}}},"backgroundColor":"green"} -->
<div class="wp-block-group alignwide has-green-background-color has-background" style="border-top-color:var(--wp--preset--color--gray);border-top-style:solid;border-right-color:var(--wp--preset--color--gray);border-right-style:solid;border-bottom-color:var(--wp--preset--color--gray);border-bottom-style:solid;border-left-color:var(--wp--preset--color--gray);border-left-style:solid;padding-top:20px;padding-right:20px;padding-bottom:20px;padding-left:20px">
<!-- wp:spacer {"height":20} --><div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer -->
<!-- wp:paragraph {"fontSize":"huge"} --><p class="has-huge-font-size"><?php echo wp_kses_post( __( 'Let&#8217;s Connect.', 'tt1-blocks' ) ); ?></p><!-- /wp:paragraph -->
<!-- wp:spacer {"height":75} --><div style="height:75px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer -->
<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph --><p><a href="#" data-type="URL"><?php esc_html_e( 'Twitter', 'tt1-blocks' ); ?></a> / <a href="#" data-type="URL"><?php esc_html_e( 'Instagram', 'tt1-blocks' )?> </a> / <a href="#" data-type="URL"> <?php esc_html_e( 'Dribbble', 'tt1-blocks' ); ?></a></p><!-- /wp:paragraph -->
</div><!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:paragraph --><p><a href="#"><?php esc_html_e( '[email protected]', 'tt1-blocks' ); ?></a></p><!-- /wp:paragraph -->
</div>
<!-- /wp:columns -->
<!-- wp:spacer {"height":20} --><div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer -->
<!-- /wp:column -->
</div>
<!-- /wp:columns -->
<!-- wp:spacer {"height":20} --><div style="height:20px" aria-hidden="true" class="wp-block-spacer"></div><!-- /wp:spacer -->
</div>
<!-- /wp:cover -->
<!-- /wp:group -->
25 changes: 14 additions & 11 deletions tt1-blocks/patterns/media-text-article.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,17 @@
* @since 0.4.9
*/
?>

<!-- wp:media-text {"mediaId":1752,"mediaLink":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/playing-in-the-sand.jpg","mediaType":"image","className":"is-style-twentytwentyone-border"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile is-style-twentytwentyone-border">
<figure class="wp-block-media-text__media"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/playing-in-the-sand.jpg" alt="<?php esc_attr_e( '&#8220;Playing in the Sand&#8221; by Berthe Morisot', 'tt1-blocks' ); ?>" class="wp-image-1752"/></figure><div class="wp-block-media-text__content">
<!-- wp:heading {"align":"center"} --><h2 class="has-text-align-center"><?php esc_html_e( 'Playing in the Sand', 'tt1-blocks' ); ?></h2><!-- /wp:heading -->
<!-- wp:separator {"className":"is-style-dots"} --><hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size"><?php echo wp_kses_post( __( 'Berthe Morisot<br>(French, 1841-1895)', 'tt1-blocks' ) ); ?></p><!-- /wp:paragraph -->
</div>
</div><!-- /wp:media-text -->
<!-- wp:group {"align":"wide","style":{"border":{"top":{"color":"var:preset|color|gray","style":"solid","width":"3px"},"right":{"color":"var:preset|color|gray","style":"solid","width":"3px"},"bottom":{"color":"var:preset|color|gray","style":"solid","width":"3px"},"left":{"color":"var:preset|color|gray","style":"solid","width":"3px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignwide" style="border-top-color:var(--wp--preset--color--gray);border-top-style:solid;border-top-width:3px;border-right-color:var(--wp--preset--color--gray);border-right-style:solid;border-right-width:3px;border-bottom-color:var(--wp--preset--color--gray);border-bottom-style:solid;border-bottom-width:3px;border-left-color:var(--wp--preset--color--gray);border-left-style:solid;border-left-width:3px">
<!-- wp:media-text {"mediaId":1752,"mediaLink":"<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/playing-in-the-sand.jpg","mediaType":"image"} -->
<div class="wp-block-media-text alignwide is-stacked-on-mobile">
<figure class="wp-block-media-text__media"><img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/playing-in-the-sand.jpg" alt="<?php esc_attr_e( '&#8220;Playing in the Sand&#8221; by Berthe Morisot', 'tt1-blocks' ); ?>" class="wp-image-1752"/></figure><div class="wp-block-media-text__content">
<!-- wp:heading {"align":"center"} --><h2 class="has-text-align-center"><?php esc_html_e( 'Playing in the Sand', 'tt1-blocks' ); ?></h2><!-- /wp:heading -->
<!-- wp:separator {"className":"is-style-dots"} --><hr class="wp-block-separator is-style-dots"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size"><?php echo wp_kses_post( __( 'Berthe Morisot<br>(French, 1841-1895)', 'tt1-blocks' ) ); ?></p><!-- /wp:paragraph -->
</div>
</div><!-- /wp:media-text -->
</div>
<!-- /wp:group -->