Gutenberg trong Genesis

Cả Genesis gốc và bất kỳ chủ đề con StudioPress chính thức nào đều không sẵn sàng cho Gutenberg kể từ hôm nay.

Chắc chắn điều này sẽ thay đổi nhưng trong thời gian chờ đợi, chúng tôi có thể thêm hỗ trợ cho Gutenberg trong các chủ đề Genesis của chúng tôi và tạo kiểu các khối để phù hợp với phần còn lại của trang web trên giao diện người dùng.

Bài viết này cung cấp các bước để sẵn sàng cho Genesis Sample 2.6.0 Gutenberg.

Mặc dù hướng dẫn đã được viết cho Genesis Sample 2.6.0, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào.

Bước 1

Cài đặt và kích hoạt plugin Gutenberg nếu bạn chưa có.

[Tùy chọn] Thêm một trang có nội dung thử nghiệm Gutenberg với một số khối.

Bạn có thể muốn cuộn xuống và chọn Bố cục nội dung đầy đủ trong metabox Cài đặt bố cục nếu bạn không muốn thanh bên.

Bước 2

Hãy thêm hỗ trợ chủ đề cho các khối Gutenberg rộng và đầy đủ và một lớp cho các trang sử dụng Gutenberg.gutenberg-page

Thêm phần sau vào functions.php của chủ đề con :

// Adds theme support for wide and full Gutenberg blocks.
add_theme_support( 'align-wide' );

/**
 * Adds a `gutenberg-page` class to the pages using Gutenberg.
 */
add_action(
    'body_class', function( $classes ) {
        if ( function_exists( 'the_gutenberg_project' ) && gutenberg_post_has_blocks( get_the_ID() ) ) {
            $classes[] = 'gutenberg-page';
        }

        return $classes;
    }
);

[Tùy chọn] Trong trang web thử nghiệm của mình, tôi đã tải phông chữ Noto Serif của Google và áp dụng nó cho các tiêu đề và nội dung trích dẫn trong CSS.

Nếu bạn muốn làm như vậy, hãy thay thế

wp_enqueue_style(
    'genesis-sample-fonts',
    '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700',
    array(),
    CHILD_THEME_VERSION
);

với

wp_enqueue_style(
    'genesis-sample-fonts',
    '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700|Noto+Serif:400,400i,700,700i',
    array(),
    CHILD_THEME_VERSION
);

trong functions.php.

Bước 3

Thêm phần sau vào style.css của chủ đề con và sửa đổi cho phù hợp:

.gutenberg-page .entry-header {
    margin-bottom: 60px;
    text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Noto Serif", serif;
    font-weight: 700;
}

blockquote,
cite,
em,
i {
    font-family: "Noto Serif", serif;
}

h3 + h2,
.has-top-margin {
    margin-top: 60px;
}

p.wp-block-subhead,
.entry-content .wp-block-cover-image,
.wp-block-image,
.entry-content ul.wp-block-gallery,
.wp-block-text-columns,
.entry-content .wp-block-button,
blockquote.wp-block-quote,
.entry-content .wp-block-quote.is-large,
.wp-block-code,
.wp-block-audio,
.entry-content .wp-block-video,
.wp-block-preformatted,
.wp-block-verse,
.wp-block-table,
.wp-block-categories,
.entry-content .wp-block-latest-posts,
.wp-block-embed {
    margin-bottom: 60px;
}

.wp-block-columns {

    /* not using because of overflow */

    /* grid-gap: 40px; */

    margin-bottom: 60px;
}

.wp-block-columns .wp-block-image {
    margin-bottom: 0;
}

@media only screen and (min-width: 501px) {

    .wp-block-columns > *:not(.layout-column-1) {
        margin-left: 40px;
    }
}

.wp-block-columns p:last-child,
.wp-block-text-columns p:last-child {
    margin-bottom: 0;
}

.entry-content .alignwide {
    width: auto;
    max-width: 1000%;
    margin-right: calc(25% - 25vw);
    margin-left: calc(25% - 25vw);
}

.entry-content .alignfull {
    width: auto;
    max-width: 1000%;

    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
}

.entry-content .alignwide > *,
.entry-content .alignfull > * {
    width: 100%;
}

.entry-content ul.wp-block-gallery {
    margin-left: 0;
}

.entry-content .wp-block-button__link:not(.has-background) {
    background-color: #333;
}

.entry-content .wp-block-button .wp-block-button__link {
    padding: 15px 30px;
    border-radius: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
}

.entry-content .wp-block-button .wp-block-button__link:hover,
.entry-content .wp-block-button .wp-block-button__link:focus {
    background-color: #0073e5;
}

blockquote {
    margin-left: 0;
}

blockquote::before {
    display: none;
}

blockquote p {
    margin-bottom: 16px;
}

.wp-block-quote:not(.is-large) {
    padding-left: 16px;
    border-left: 4px solid #000;
}

.wp-block-quote cite {
    font-weight: bold;
}

.entry-content .wp-block-quote.is-large cite,
.entry-content .wp-block-quote.is-large footer {
    display: block;
}

code,
kbd,
pre,
samp {
    font-size: 16px;
}

.entry-content code {
    display: block;
    padding: 11px 22px;
    border: 1px solid #e2e4e7;
    border-radius: 4px;
    background-color: transparent;
}

.entry-content .wp-block-table {
    display: table;
}

tbody {
    border-bottom: none;
}

td {
    border: 1px solid #444;
}

td:first-child,
th:first-child {
    padding-left: 8px;
}

.wp-block-categories.aligncenter,
.wp-block-latest-posts.aligncenter {
    text-align: left;
}

@media only screen and (max-width: 500px) {

    .entry-content .wp-block-columns {
        display: block;
    }

    .wp-block-columns > *:not(:last-child) {
        margin-bottom: 20px;
    }

    .wp-block-text-columns {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .entry-content .wp-block-text-columns.columns-2 .wp-block-column {
        width: 100%;
    }

    .entry-content .wp-block-text-columns .wp-block-column {
        margin: 0;
    }

    .wp-block-text-columns .wp-block-column:not(:last-child) {
        margin-bottom: 40px;
    }
}