Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gutenberg
/* Support column layouts. */
.wp-block-columns .wp-block-column {
margin-left: 12px;
}
.has-2-columns .wp-block-column:nth-of-type(2n+1),
.has-3-columns .wp-block-column:nth-of-type(3n+1),
.has-4-columns .wp-block-column:nth-of-type(4n+1),
.has-5-columns .wp-block-column:nth-of-type(5n+1),
.has-6-columns .wp-block-column:nth-of-type(6n+1) {
margin-left: 0;
}
.wp-block-column > p:first-of-type {
margin-top: 0;
}
.wp-block-column > p:last-of-type {
margin-bottom: 0;
}
/* Add hover effect to buttons. */
.wp-block-button a:hover {
box-shadow: 0 2px 2px #ccc;
transition: 400ms;
}
/* Increase button color specificity so links remain the default color: white. */
.wp-block-file a.wp-block-file__button {
color: #fff;
text-decoration: none;
}
/* Style code blocks to look like boring ol' code. */
.wp-block-code code {
display: block;
padding: 4px 8px;
background: #000;
color: #fff;
}
/* Force most embeds to display centered. */
.wp-block-embed {
text-align: center;
}
/* Force Facebook embeds to display centered. */
.fb_iframe_widget {
display: block;
text-align: center;
}
/* Force Instagram embeds to display centered. */
.instagram-media {
margin-left: auto !important;
margin-right: auto !important;
}
/* Force Twitter embeds to display centered. */
.twitter-tweet {
margin-left: auto;
margin-right: auto;
}
/* Force audio players to display at the full width of the content area. */
audio {
width: 100%;
}
/* Force videos to display at the full width of the content area. */
.wp-block-video video {
width: 100%;
height: auto;
}
/* Force image embeds to display at the full width of the content area. */
.wp-block-embed img {
width: 100%;
height: auto;
}
/* Force Facebook embeds to display at the full width of the content area. */
.fb_iframe_widget > span,
.fb_iframe_widget > span > iframe {
width: 100% !important;
}
/* Force Instagram & Reddit embeds to display at the full width of the content area. */
.instagram-media,
.embedly-card-hug {
max-width: 100% !important;
}
/* Force Reddit embeds to display at the full width of the content area. */
.embedly-card-hug {
max-width: 100% !important;
}
.embedly-card-hug > iframe {
width: 100%;
}
/* Force SoundCloud embeds to display at the full width of the content area. */
.wp-block-embed-soundcloud iframe {
width: 100%;
}
/* Force Spotify embeds to display at the full width of the content area. */
.wp-block-embed-spotify iframe {
width: 100%;
}
/* Force URL embeds to display at the full width of the content area. */
.wp-embedded-content {
width: 100%;
}
/* Force YouTube embeds to display at the full width of the content area. */
.wp-block-embed-youtube > iframe {
width: 100%;
}
/* Remove webkit margins so images display at full width. */
figure {
margin: 0;
}
/* Force audio players to display at the full width of the content area. */
audio {
width: 100%;
}
/* Increase button color specificity so links remain the default color: white. */
.wp-block-file a.wp-block-file__button {
color: #fff;
text-decoration: none;
}
/* Remove webkit margins so images display at full width. */
figure {
margin: 0;
}
/* Remove spacing in nested lists. */
ul ul,
ul ol,
ol ol,
ol ul {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Force videos to display at the full width of the content area. */
.wp-block-video video {
width: 100%;
height: auto;
}
/* Force most embeds to display centered. */
.wp-block-embed {
text-align: center;
}
/* Force Facebook embeds to display centered. */
.fb_iframe_widget {
display: block;
text-align: center;
}
/* Force Instagram embeds to display centered. */
.instagram-media {
margin-left: auto !important;
margin-right: auto !important;
}
/* Force Twitter embeds to display centered. */
.twitter-tweet {
margin-left: auto;
margin-right: auto;
}
/* Force image embeds to display at the full width of the content area. */
.wp-block-embed img {
width: 100%;
height: auto;
}
/* Force Facebook embeds to display at the full width of the content area. */
.fb_iframe_widget > span,
.fb_iframe_widget > span > iframe {
width: 100% !important;
}
/* Force Instagram & Reddit embeds to display at the full width of the content area. */
.instagram-media,
.embedly-card-hug {
max-width: 100% !important;
}
/* Force Reddit embeds to display at the full width of the content area. */
.embedly-card-hug {
max-width: 100% !important;
}
.embedly-card-hug > iframe {
width: 100%;
}
/* Force SoundCloud embeds to display at the full width of the content area. */
.wp-block-embed-soundcloud iframe {
width: 100%;
}
/* Force Spotify embeds to display at the full width of the content area. */
.wp-block-embed-spotify iframe {
width: 100%;
}
/* Force URL embeds to display at the full width of the content area. */
.wp-embedded-content {
width: 100%;
}
/* Force YouTube embeds to display at the full width of the content area. */
.wp-block-embed-youtube > iframe {
width: 100%;
}
/* Style code blocks to look like boring ol' code. */
.wp-block-code code {
display: block;
padding: 4px 8px;
background: #000;
color: #fff;
}
/* Style preformatted code (and therefore also code blocks and verses) with typewriter-like text. */
pre {
font-family: monospace;
}
/* Style preformatted code (and therefore also code blocks and verses) with a text-wrap. */
pre {
white-space: pre-wrap;
}
/* Add white space to cluttered tables. */
td {
padding: 4px 8px;
}
/* Ditch common <pre> styles for verses (which are wrapped in <pre> tags). */
.wp-block-verse {
font-family: inherit;
background: inherit;
color: inherit;
padding: 0;
}
/* Add hover effect to buttons. */
.wp-block-button a:hover {
box-shadow: 0 2px 2px #ccc;
transition: 400ms;
}
/* Support column layouts. */
.wp-block-columns .wp-block-column {
margin-left: 12px;
}
.has-2-columns .wp-block-column:nth-of-type(2n+1),
.has-3-columns .wp-block-column:nth-of-type(3n+1),
.has-4-columns .wp-block-column:nth-of-type(4n+1),
.has-5-columns .wp-block-column:nth-of-type(5n+1),
.has-6-columns .wp-block-column:nth-of-type(6n+1) {
margin-left: 0;
}
.wp-block-column > p:first-of-type {
margin-top: 0;
}
.wp-block-column > p:last-of-type {
margin-bottom: 0;
}
/* Add style for short line hr. */
.wp-block-separator:not(.is-style-wide) {
width: 40%;
margin-left: auto;
margin-right: auto;
}
/* Remove spacing between items when category lists have hierarchy. */
.wp-block-categories .children {
margin-top: 0;
}
/* Remove spacing in nested lists. */
ul ul,
ul ol,
ol ol,
ol ul {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Style preformatted code (and therefore also code blocks and verses) with typewriter-like text. */
pre {
font-family: monospace;
}
/* Style preformatted code (and therefore also code blocks and verses) with a text-wrap. */
pre {
white-space: pre-wrap;
}
/* Add style for short line hr. */
.wp-block-separator:not(.is-style-wide) {
width: 40%;
margin-left: auto;
margin-right: auto;
}
/* Add white space to cluttered tables. */
td {
padding: 4px 8px;
}
/* Ditch common <pre> styles for verses (which are wrapped in <pre> tags). */
.wp-block-verse {
font-family: inherit;
background: inherit;
color: inherit;
padding: 0;
}
/* Remove spacing between items when category lists have hierarchy. */
.wp-block-categories .children {
margin-top: 0;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.