Skip to content

Instantly share code, notes, and snippets.

@mrwweb
Created July 9, 2020 01:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mrwweb/6f7989b641cafb8e6c1fbf230a3daf32 to your computer and use it in GitHub Desktop.
Save mrwweb/6f7989b641cafb8e6c1fbf230a3daf32 to your computer and use it in GitHub Desktop.
Create a WordPress block editor style variation for the cover block to turn it into a knockout effect. Screenshot: https://cloudup.com/cGrfbjVS8q5
// we load the other CSS styles into the block editor and then override some of them here
// at present, the color overlay is not knocked out in the block editor
.is-style-knockout-text {
.wp-block-cover__inner-container {
z-index: 1;
}
.wp-block > * {
font-size: 160px !important;
font-weight: 900 !important;
color: transparent !important;
margin-bottom: 0;
}
.block-list-appender {
display: none;
}
}
<?php
add_action( 'after_setup_theme', 'block_editor_support' );
/**
* Registers the cover block style variation
*/
function block_editor_support() {
/* Cover */
register_block_style(
'core/cover',
array(
'name' => 'knockout-text',
'label' => 'Knockout Text'
)
);
}
// see: https://css-tricks.com/css-techniques-and-effects-for-knockout-text/
.is-style-knockout-text {
min-height: 0 !important;
.wp-block-cover__inner-container {
padding: 0;
z-index: auto; // fixes a chrome bug I do not understand
}
.wp-block-cover__inner-container > * {
max-width: 100% !important;
font-family: 'Rubik', sans; // free Google font. looks great at 900!
font-weight: 900 !important;
line-height: 1;
text-transform: uppercase;
font-size: 6rem !important;
font-size: 22vw !important;
color: #fff !important;
text-shadow: 2px 2px rgba(#000,.3);
// try to prevent words wrapping
@include mq768 {
font-size: 15vw !important;
}
@include mq1100 {
font-size: 10rem !important;
}
}
// especially because we set color to transparent, it's really important to test for feature support
@supports( background-clip: text ) and ( mix-blend-mode: color ) {
background-clip: text;
-webkit-background-clip: text;
.wp-block-cover__inner-container > * {
color: transparent !important;
text-shadow: none !important;
margin: 0 !important
}
&::before {
mix-blend-mode: color;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment