Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
This is an unminified version of the stylesheet that ships with the WordPress Gutenberg plugin. Original SCSS files are here -> https://github.com/WordPress/gutenberg/tree/master/core-blocks
.wp-block-embed figcaption {
margin-top: .5em;
color: #6c7781;
text-align: center;
font-size: 13px
}
.editor-block-list__block[data-type="core/embed"][data-align=left] .editor-block-list__block-edit,
.editor-block-list__block[data-type="core/embed"][data-align=right] .editor-block-list__block-edit,
.wp-block-embed.alignleft,
.wp-block-embed.alignright {
max-width: 318px;
width: 100%
}
p.is-small-text {
font-size: 14px
}
p.is-regular-text {
font-size: 16px
}
p.is-large-text {
font-size: 36px
}
p.is-larger-text {
font-size: 48px
}
p.has-drop-cap:not(:focus):first-letter {
float: left;
font-size: 4.1em;
line-height: .7;
font-family: serif;
font-weight: 600;
margin: .07em .23em 0 0;
text-transform: uppercase;
font-style: normal
}
p.has-background {
padding: 20px 30px
}
.has-pale-pink-background-color {
background-color: #f78da7
}
.has-vivid-red-background-color {
background-color: #cf2e2e
}
.has-luminous-vivid-orange-background-color {
background-color: #ff6900
}
.has-luminous-vivid-amber-background-color {
background-color: #fcb900
}
.has-light-green-cyan-background-color {
background-color: #7bdcb5
}
.has-vivid-green-cyan-background-color {
background-color: #00d084
}
.has-pale-cyan-blue-background-color {
background-color: #8ed1fc
}
.has-vivid-cyan-blue-background-color {
background-color: #0693e3
}
.has-very-light-gray-background-color {
background-color: #eee
}
.has-cyan-bluish-gray-background-color {
background-color: #abb8c3
}
.has-very-dark-gray-background-color {
background-color: #313131
}
.has-pale-pink-color {
color: #f78da7
}
.has-vivid-red-color {
color: #cf2e2e
}
.has-luminous-vivid-orange-color {
color: #ff6900
}
.has-luminous-vivid-amber-color {
color: #fcb900
}
.has-light-green-cyan-color {
color: #7bdcb5
}
.has-vivid-green-cyan-color {
color: #00d084
}
.has-pale-cyan-blue-color {
color: #8ed1fc
}
.has-vivid-cyan-blue-color {
color: #0693e3
}
.has-very-light-gray-color {
color: #eee
}
.has-cyan-bluish-gray-color {
color: #abb8c3
}
.has-very-dark-gray-color {
color: #313131
}
.wp-block-quote cite,
.wp-block-quote footer {
color: #6c7781;
margin-top: 1em;
position: relative;
font-size: 13px;
font-style: normal
}
.wp-block-quote.is-large {
margin: 0 0 16px;
padding: 0 1em
}
.wp-block-quote.is-large p {
font-size: 24px;
font-style: italic;
line-height: 1.6
}
.wp-block-quote.is-large cite,
.wp-block-quote.is-large footer {
font-size: 19px;
text-align: right
}
.wp-block-gallery {
display: flex;
flex-wrap: wrap;
list-style-type: none;
margin: 0;
padding: 0
}
.wp-block-gallery .blocks-gallery-image,
.wp-block-gallery .blocks-gallery-item {
margin: 8px;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: center;
position: relative
}
.wp-block-gallery .blocks-gallery-image figure,
.wp-block-gallery .blocks-gallery-item figure {
margin: 0;
height: 100%;
display: flex;
align-items: flex-end
}
.wp-block-gallery .blocks-gallery-image img,
.wp-block-gallery .blocks-gallery-item img {
display: block;
max-width: 100%;
height: auto
}
.wp-block-gallery .blocks-gallery-image figcaption,
.wp-block-gallery .blocks-gallery-item figcaption {
padding: 40px 10px 5px;
color: #fff;
text-align: center;
font-size: 13px;
background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, .3) 60%, transparent);
position: absolute;
width: 100%;
max-height: 100%;
overflow: auto
}
.wp-block-gallery.is-cropped .blocks-gallery-image a,
.wp-block-gallery.is-cropped .blocks-gallery-image img,
.wp-block-gallery.is-cropped .blocks-gallery-item a,
.wp-block-gallery.is-cropped .blocks-gallery-item img {
flex: 1;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.wp-block-gallery.is-cropped .blocks-gallery-image _:-ms-lang(x),
.wp-block-gallery.is-cropped .blocks-gallery-image figure,
.wp-block-gallery.is-cropped .blocks-gallery-item _:-ms-lang(x),
.wp-block-gallery.is-cropped .blocks-gallery-item figure {
height: auto;
width: auto
}
.wp-block-gallery .blocks-gallery-image,
.wp-block-gallery .blocks-gallery-item {
width: calc(100% / 2 - 16px)
}
.wp-block-gallery.columns-1 .blocks-gallery-image,
.wp-block-gallery.columns-1 .blocks-gallery-item {
width: calc(100% / 1 - 16px)
}
@media (min-width:600px) {
.wp-block-gallery.columns-3 .blocks-gallery-image,
.wp-block-gallery.columns-3 .blocks-gallery-item {
width: calc(100% / 3 - 16px)
}
.wp-block-gallery.columns-4 .blocks-gallery-image,
.wp-block-gallery.columns-4 .blocks-gallery-item {
width: calc(100% / 4 - 16px)
}
.wp-block-gallery.columns-5 .blocks-gallery-image,
.wp-block-gallery.columns-5 .blocks-gallery-item {
width: calc(100% / 5 - 16px)
}
.wp-block-gallery.columns-6 .blocks-gallery-image,
.wp-block-gallery.columns-6 .blocks-gallery-item {
width: calc(100% / 6 - 16px)
}
.wp-block-gallery.columns-7 .blocks-gallery-image,
.wp-block-gallery.columns-7 .blocks-gallery-item {
width: calc(100% / 7 - 16px)
}
.wp-block-gallery.columns-8 .blocks-gallery-image,
.wp-block-gallery.columns-8 .blocks-gallery-item {
width: calc(100% / 8 - 16px)
}
}
.wp-block-gallery.alignleft,
.wp-block-gallery.alignright,
[data-align=left] .wp-block-gallery,
[data-align=right] .wp-block-gallery {
max-width: 318px;
width: 100%
}
.wp-block-audio figcaption {
margin-top: .5em;
color: #6c7781;
text-align: center;
font-size: 13px
}
.wp-block-button {
margin-bottom: 1.5em
}
.wp-block-button .wp-block-button__link {
border: none;
border-radius: 23px;
box-shadow: none;
cursor: pointer;
display: inline-block;
font-size: 18px;
line-height: 24px;
margin: 0;
padding: 11px 24px;
text-align: center;
text-decoration: none;
white-space: normal;
word-break: break-all
}
.wp-block-button.aligncenter {
text-align: center
}
.wp-block-button.alignright {
text-align: right
}
.wp-block-button__link:not(.has-background),
.wp-block-button__link:not(.has-background):active,
.wp-block-button__link:not(.has-background):focus,
.wp-block-button__link:not(.has-background):hover {
background-color: #32373c
}
.wp-block-button__link:not(.has-text-color),
.wp-block-button__link:not(.has-text-color):active,
.wp-block-button__link:not(.has-text-color):focus,
.wp-block-button__link:not(.has-text-color):hover {
color: #fff
}
.wp-block-categories.alignleft {
margin-right: 2em
}
.wp-block-categories.alignright {
margin-left: 2em
}
.wp-block-columns {
display: grid;
grid-auto-flow: dense
}
.wp-block-columns.has-2-columns {
grid-auto-columns: 50%
}
.wp-block-columns.has-3-columns {
grid-auto-columns: 33.33333%
}
.wp-block-columns.has-4-columns {
grid-auto-columns: 25%
}
.wp-block-columns.has-5-columns {
grid-auto-columns: 20%
}
.wp-block-columns.has-6-columns {
grid-auto-columns: 16.66667%
}
.wp-block-columns .layout-column-1 {
grid-column: 1
}
.wp-block-columns .layout-column-2 {
grid-column: 2
}
.wp-block-columns .layout-column-3 {
grid-column: 3
}
.wp-block-columns .layout-column-4 {
grid-column: 4
}
.wp-block-columns .layout-column-5 {
grid-column: 5
}
.wp-block-columns .layout-column-6 {
grid-column: 6
}
.wp-block-cover-image {
position: relative;
background-size: cover;
min-height: 430px;
width: 100%;
margin: 0 0 1.5em;
display: flex;
justify-content: center;
align-items: center
}
.wp-block-cover-image.has-left-content {
justify-content: flex-start
}
.wp-block-cover-image.has-left-content .wp-block-cover-image-text,
.wp-block-cover-image.has-left-content h2 {
margin-left: 0;
text-align: left
}
.wp-block-cover-image.has-right-content {
justify-content: flex-end
}
.wp-block-cover-image.has-right-content .wp-block-cover-image-text,
.wp-block-cover-image.has-right-content h2 {
margin-right: 0;
text-align: right
}
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image h2 {
color: #fff;
font-size: 2em;
line-height: 1.25;
z-index: 1;
margin-bottom: 0;
max-width: 636px;
padding: 14px;
text-align: center
}
.wp-block-cover-image .wp-block-cover-image-text a,
.wp-block-cover-image .wp-block-cover-image-text a:active,
.wp-block-cover-image .wp-block-cover-image-text a:focus,
.wp-block-cover-image .wp-block-cover-image-text a:hover,
.wp-block-cover-image h2 a,
.wp-block-cover-image h2 a:active,
.wp-block-cover-image h2 a:focus,
.wp-block-cover-image h2 a:hover {
color: #fff
}
.wp-block-cover-image.has-parallax {
background-attachment: fixed
}
.wp-block-cover-image.has-background-dim:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0, 0, 0, .5)
}
.wp-block-cover-image.has-background-dim.has-background-dim-10:before {
background-color: rgba(0, 0, 0, .1)
}
.wp-block-cover-image.has-background-dim.has-background-dim-20:before {
background-color: rgba(0, 0, 0, .2)
}
.wp-block-cover-image.has-background-dim.has-background-dim-30:before {
background-color: rgba(0, 0, 0, .3)
}
.wp-block-cover-image.has-background-dim.has-background-dim-40:before {
background-color: rgba(0, 0, 0, .4)
}
.wp-block-cover-image.has-background-dim.has-background-dim-50:before {
background-color: rgba(0, 0, 0, .5)
}
.wp-block-cover-image.has-background-dim.has-background-dim-60:before {
background-color: rgba(0, 0, 0, .6)
}
.wp-block-cover-image.has-background-dim.has-background-dim-70:before {
background-color: rgba(0, 0, 0, .7)
}
.wp-block-cover-image.has-background-dim.has-background-dim-80:before {
background-color: rgba(0, 0, 0, .8)
}
.wp-block-cover-image.has-background-dim.has-background-dim-90:before {
background-color: rgba(0, 0, 0, .9)
}
.wp-block-cover-image.has-background-dim.has-background-dim-100:before {
background-color: #000
}
.wp-block-cover-image.components-placeholder {
height: inherit
}
.wp-block-cover-image.alignleft,
.wp-block-cover-image.alignright,
[data-align=left] .wp-block-cover-image,
[data-align=right] .wp-block-cover-image {
max-width: 318px;
width: 100%
}
.wp-block-image {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.wp-block-image figcaption {
margin-top: .5em;
color: #6c7781;
text-align: center;
font-size: 13px
}
.wp-block-image.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center
}
.wp-block-latest-posts.alignleft {
margin-right: 2em
}
.wp-block-latest-posts.alignright {
margin-left: 2em
}
.wp-block-latest-posts.is-grid {
display: flex;
flex-wrap: wrap;
padding: 0;
list-style: none
}
.wp-block-latest-posts.is-grid li {
margin: 0 16px 16px 0;
width: 100%
}
@media (min-width:600px) {
.wp-block-latest-posts.columns-2 li {
width: calc(50% - 16px)
}
.wp-block-latest-posts.columns-3 li {
width: calc(33.33333% - 16px)
}
.wp-block-latest-posts.columns-4 li {
width: calc(25% - 16px)
}
.wp-block-latest-posts.columns-5 li {
width: calc(20% - 16px)
}
.wp-block-latest-posts.columns-6 li {
width: calc(16.66667% - 16px)
}
}
.wp-block-latest-posts__post-date {
display: block;
color: #6c7781;
font-size: 13px
}
.wp-block-pullquote {
border-top: 4px solid #555d66;
border-bottom: 4px solid #555d66;
color: #40464d;
padding: 3em 0;
text-align: center
}
.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright {
max-width: 400px
}
.wp-block-pullquote.alignleft>p,
.wp-block-pullquote.alignright>p {
font-size: 20px
}
.wp-block-pullquote>p {
font-size: 24px;
line-height: 1.6
}
.wp-block-pullquote cite,
.wp-block-pullquote footer {
color: #40464d;
position: relative;
text-transform: uppercase;
font-size: 13px
}
.wp-block-separator {
border: none;
border-bottom: 2px solid #8f98a1;
max-width: 100px;
margin: 1.65em auto
}
p.wp-block-subhead {
font-size: 1.1em;
font-style: italic;
opacity: .75
}
.wp-block-table {
overflow-x: auto;
display: block
}
.wp-block-table table {
border-collapse: collapse;
width: 100%
}
.wp-block-text-columns,
.wp-block-text-columns.aligncenter {
display: flex
}
.wp-block-text-columns .wp-block-column {
box-sizing: border-box;
margin: 0 16px;
padding: 0
}
.wp-block-text-columns .wp-block-column:first-child {
margin-left: 0
}
.wp-block-text-columns .wp-block-column:last-child {
margin-right: 0
}
.wp-block-text-columns.columns-2 .wp-block-column {
width: 50%
}
.wp-block-text-columns.columns-3 .wp-block-column {
width: 33.33333%
}
.wp-block-text-columns.columns-4 .wp-block-column {
width: 25%
}
.wp-block-video {
margin: 0
}
.wp-block-video figcaption {
margin-top: .5em;
color: #6c7781;
text-align: center;
font-size: 13px
}
.wp-block-video.aligncenter {
text-align: center
}
.shared-block-edit-panel {
align-items: center;
background: #f8f9f9;
color: #555d66;
display: flex;
flex-wrap: wrap;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
font-size: 13px;
margin: 0 -14px;
padding: 10px 14px;
position: relative;
top: 14px
}
.shared-block-edit-panel .shared-block-edit-panel__spinner {
margin: 0 5px
}
.shared-block-edit-panel .shared-block-edit-panel__info {
margin-right: auto
}
.shared-block-edit-panel .shared-block-edit-panel__label {
margin-right: 10px;
white-space: nowrap;
font-weight: 600
}
.shared-block-edit-panel .shared-block-edit-panel__title {
flex: 1 1 100%;
font-size: 14px;
height: 30px;
margin: 5px 0 10px
}
.wp-core-ui .shared-block-edit-panel .shared-block-edit-panel__button {
margin: 0 5px 0 0
}
@media (min-width:960px) {
.shared-block-edit-panel {
flex-wrap: nowrap
}
.shared-block-edit-panel .shared-block-edit-panel__title {
margin: 0
}
.wp-core-ui .shared-block-edit-panel .shared-block-edit-panel__button {
margin: 0 0 0 5px
}
}
.shared-block-indicator {
background: #fff;
border-left: 1px dashed #e2e4e7;
color: #555d66;
border-top: 1px dashed #e2e4e7;
bottom: -14px;
height: 30px;
padding: 5px;
position: absolute;
right: -14px;
width: 30px
}
@sandrowuermli

This comment has been minimized.

Copy link

commented May 24, 2019

Is there a working link, https://github.com/WordPress/gutenberg/tree/master/core-blocks does not work anymore.

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.