删除 WordPress Gutenberg 按钮默认样式

Question

尝试使用 WordPress + Gutenberg 和 Tailwind 构建站点。

它在每个按钮中都包含一堆蹩脚的内联样式，我不想不断地用 !important 或特定的战斗来覆盖它们。

例子...

<style id='global-styles-inline-css' type='text/css'>
...
...

a:where(:not(.wp-element-button)) {
    text-decoration: underline;
}

.wp-element-button, .wp-block-button__link {
                background-color: #32373c;
                border-width: 0;
                color: #fff;
                font-family: inherit;
                font-size: inherit;
                line-height: inherit;
                padding: calc(0.667em + 2px) calc(1.333em + 2px);
                text-decoration: none;
}

你如何阻止 Wordpress 将这些垃圾注入你的主题？

Answer 1

为了避免处理内联样式和特异性之争，您可以取消注册或出列默认的 WordPress Gutenberg 样式，然后使用您自己的 Tailwind CSS 类来设置按钮的样式。

以下是如何使默认的古腾堡样式出队：

将以下代码添加到主题的

functions.php

文件中：

function remove_gutenberg_styles() {
    wp_dequeue_style('wp-block-library');
    wp_dequeue_style('wp-block-library-theme');
}

add_action('wp_enqueue_scripts', 'remove_gutenberg_styles', 100);

此代码将删除默认的 Gutenberg 样式，因此它们不会干扰您的 Tailwind CSS 类。

然后，在删除默认样式后，您可以使用 Tailwind CSS 类创建自己的按钮样式。将这些样式添加到您的样式表或主题中的

<style>

标签内。

/* Custom button styles using Tailwind CSS */
.custom-button {
    @apply bg-gray-800;
    @apply border-none;
    @apply text-white;
    @apply font-inherit;
    @apply text-base;
    @apply leading-inherit;
    @apply py-2 px-4;
    @apply no-underline;
}

.custom-button:hover {
    @apply bg-gray-700;
}

最后，当您使用 WordPress Gutenberg 编辑器向您的网站添加按钮时，将自定义类 custom-button 应用于该按钮。这将根据您的 Tailwind CSS 类设置按钮的样式，您无需处理内联样式或特异性问题。