Skip to content

Instantly share code, notes, and snippets.

@cdils
Created May 9, 2018 13:48
Show Gist options
  • Select an option

  • Save cdils/a2f1d4f9408b4870f82f5c96e6f62c65 to your computer and use it in GitHub Desktop.

Select an option

Save cdils/a2f1d4f9408b4870f82f5c96e6f62c65 to your computer and use it in GitHub Desktop.
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
Copy link
Copy Markdown

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

@ronalfy
Copy link
Copy Markdown

ronalfy commented Mar 26, 2022

THANK YOU!

@cdils
Copy link
Copy Markdown
Author

cdils commented Mar 27, 2022

@ronalfy Use at your own risk. I would assume this is outdated. :)

@ronalfy
Copy link
Copy Markdown

ronalfy commented Mar 27, 2022

@cdils it helped get my colors back πŸ€—

@cdils
Copy link
Copy Markdown
Author

cdils commented Mar 27, 2022 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment