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

ronalfy commented Mar 26, 2022

Copy link
Copy Markdown

THANK YOU!

@cdils

cdils commented Mar 27, 2022

Copy link
Copy Markdown
Author

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

@ronalfy

ronalfy commented Mar 27, 2022

Copy link
Copy Markdown

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

@cdils

cdils commented Mar 27, 2022 via email

Copy link
Copy Markdown
Author

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