WordPress/wp-content/themes/twentytwentyfour/functions.php

150 lines
4.3 KiB
PHP

<?php
/**
* Twenty Twenty Four functions and definitions
*
* @link https://developer.wordpress.org/themes/basics/theme-functions/
*
* @package Twenty Twenty-Four
* @since Twenty Twenty-Four 1.0
*/
/**
* Register block Styles
*/
if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :
/**
* Register custom block styles
*
* @return void
* @since Twenty Twenty-Four 1.0
*
*/
function twentytwentyfour_block_styles() {
/**
* The wp_enqueue_block_style() function allows us to enqueue a stylesheet
* for a specific block. These will only get loaded when the block is rendered
* (both in the editor and on the front end), improving performance
* and reducing the amount of data requested by visitors.
*
* See https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/ for more info.
*/
wp_enqueue_block_style(
'core/button',
array(
'handle' => 'twentytwentyfour-button-style-outline',
'src' => get_template_directory_uri() . '/assets/css/button-outline.css',
'ver' => wp_get_theme()->get( 'Version' ),
)
);
/**
* Add the `path` data to our stylesheet.
*
* This will let WordPress determine the best loading strategy for the stylesheet:
* Small stylesheets will get inlined, while larger stylesheets will be loaded separately.
*
* See https://make.wordpress.org/core/2021/07/01/block-styles-loading-enhancements-in-wordpress-5-8/#inlining-small-assets for more info.
*/
wp_style_add_data( 'twentytwentyfour-button-style-outline', 'path', get_theme_file_path( 'assets/css/button-outline.css' ) );
register_block_style(
'core/details',
array(
'name' => 'arrow-icon-details',
'label' => __( 'Arrow icon', 'twentytwentyfour' ),
/*
* Styles for the custom Arrow icon style of the Details block
* https://github.com/WordPress/twentytwentyfour/issues/46
*/
'inline_style' => '
.is-style-arrow-icon-details {
padding-top: var(--wp--preset--spacing--10);
padding-bottom: var(--wp--preset--spacing--10);
border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}
.is-style-arrow-icon-details summary {
list-style-type: "\2193\00a0\00a0\00a0";
}
.is-style-arrow-icon-details[open]>summary {
list-style-type: "\2192\00a0\00a0\00a0";
}',
)
);
register_block_style(
'core/post-terms',
array(
'name' => 'pill',
'label' => __( 'Pill', 'twentytwentyfour' ),
/*
* Styles variation for post terms
* https://github.com/WordPress/gutenberg/issues/24956
*/
'inline_style' => '
.is-style-pill a,
.is-style-pill span:not([class], [data-rich-text-placeholder]) {
display: inline-block;
background-color: var(--wp--preset--color--base-2);
padding: 0.375rem 0.875rem;
border-radius: var(--wp--preset--spacing--20);
}
.is-style-pill a:hover {
background-color: var(--wp--preset--color--contrast-3);
}',
)
);
register_block_style(
'core/list',
array(
'name' => 'checkmark-list',
'label' => __( 'Checkmark', 'twentytwentyfour' ),
/*
* Styles for the custom checkmark list block style
* https://github.com/WordPress/gutenberg/issues/51480
*/
'inline_style' => '
ul.is-style-checkmark-list {
list-style-type: "\2713";
}
ul.is-style-checkmark-list li {
padding-inline-start: 1ch;
}',
)
);
register_block_style(
'core/heading',
array(
'name' => 'asterisk',
'label' => __( 'With asterisk', 'twentytwentyfour' ),
'inline_style' => "
.is-style-asterisk:before {
content: '';
width: 1.5rem;
height: 3rem;
background: var(--wp--preset--color--contrast-2, currentColor);
clip-path: path('M11.93.684v8.039l5.633-5.633 1.216 1.23-5.66 5.66h8.04v1.737H13.2l5.701 5.701-1.23 1.23-5.742-5.742V21h-1.737v-8.094l-5.77 5.77-1.23-1.217 5.743-5.742H.842V9.98h8.162l-5.701-5.7 1.23-1.231 5.66 5.66V.684h1.737Z');
display: block;
}
.is-style-asterisk.has-text-align-center:before {
margin: 0 auto;
}
.is-style-asterisk.has-text-align-right:before {
margin-left: auto;
}
.rtl .is-style-asterisk.has-text-align-left:before {
margin-right: auto;
}",
)
);
}
endif;
add_action( 'init', 'twentytwentyfour_block_styles' );