Skip to content

Instantly share code, notes, and snippets.

@nathansmith
Last active May 23, 2020 01:57
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 nathansmith/6906cb3bb4947f1cde384caa512c90b2 to your computer and use it in GitHub Desktop.
Save nathansmith/6906cb3bb4947f1cde384caa512c90b2 to your computer and use it in GitHub Desktop.
WordPress updates inject new/different markup and CSS. This attempts to "fix" it.
div.wp-block-buttons {
/*
=====
NOTE:
=====
I know this code looks a bit gross.
But that is more of a reflection upon
the WordPress block styles themselves.
This is what it takes to override them.
*/
&,
&.alignleft,
&.alignright,
&.aligncenter {
// Undo float.
float: none;
// Flex.
align-content: flex-start;
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
// Offsets.
margin-top: -1 * $gutter--half;
margin-left: -1 * $gutter--quarter;
margin-right: -1 * $gutter--quarter;
margin-bottom: $gutter;
}
// Left aligned.
&,
&.alignleft {
justify-content: flex-start;
}
// Center aligned.
&.aligncenter {
justify-content: center;
}
// Right aligned.
&.alignright {
justify-content: flex-end;
}
// Buttons within.
&,
&.alignleft,
&.alignright,
&.aligncenter {
& > .wp-block-button.wp-block-button {
// Reset.
margin: 0;
// Add margin back.
margin-top: $gutter--half;
margin-left: $gutter--quarter;
margin-right: $gutter--quarter;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment