[Summary view] [Print] [Text view]

   1  <?php
   2  /**
   3   * Twenty Twenty-Four functions and definitions
   4   *
   5   * @link https://developer.wordpress.org/themes/basics/theme-functions/
   6   *
   7   * @package WordPress
   8   * @subpackage Twenty_Twenty_Four
   9   * @since Twenty Twenty-Four 1.0
  10   */
  11  
  12  if ( ! function_exists( 'twentytwentyfour_block_styles' ) ) :
  13      /**
  14       * Registers custom block styles.
  15       *
  16       * @since Twenty Twenty-Four 1.0
  17       * @return void
  18       */
  19  	function twentytwentyfour_block_styles() {
  20  
  21          register_block_style(
  22              'core/details',
  23              array(
  24                  'name'         => 'arrow-icon-details',
  25                  'label'        => __( 'Arrow icon', 'twentytwentyfour' ),
  26                  /*
  27                   * Styles for the custom Arrow icon style of the Details block
  28                   */
  29                  'inline_style' => '
  30                  .is-style-arrow-icon-details {
  31                      padding-top: var(--wp--preset--spacing--10);
  32                      padding-bottom: var(--wp--preset--spacing--10);
  33                  }
  34  
  35                  .is-style-arrow-icon-details summary {
  36                      list-style-type: "\2193\00a0\00a0\00a0";
  37                  }
  38  
  39                  .is-style-arrow-icon-details[open]>summary {
  40                      list-style-type: "\2192\00a0\00a0\00a0";
  41                  }',
  42              )
  43          );
  44          register_block_style(
  45              'core/post-terms',
  46              array(
  47                  'name'         => 'pill',
  48                  'label'        => __( 'Pill', 'twentytwentyfour' ),
  49                  /*
  50                   * Styles variation for post terms
  51                   * https://github.com/WordPress/gutenberg/issues/24956
  52                   */
  53                  'inline_style' => '
  54                  .is-style-pill a,
  55                  .is-style-pill span:not([class], [data-rich-text-placeholder]) {
  56                      display: inline-block;
  57                      background-color: var(--wp--preset--color--base-2);
  58                      padding: 0.375rem 0.875rem;
  59                      border-radius: var(--wp--preset--spacing--20);
  60                  }
  61  
  62                  .is-style-pill a:hover {
  63                      background-color: var(--wp--preset--color--contrast-3);
  64                  }',
  65              )
  66          );
  67          register_block_style(
  68              'core/list',
  69              array(
  70                  'name'         => 'checkmark-list',
  71                  'label'        => __( 'Checkmark', 'twentytwentyfour' ),
  72                  /*
  73                   * Styles for the custom checkmark list block style
  74                   * https://github.com/WordPress/gutenberg/issues/51480
  75                   */
  76                  'inline_style' => '
  77                  ul.is-style-checkmark-list {
  78                      list-style-type: "\2713";
  79                  }
  80  
  81                  ul.is-style-checkmark-list li {
  82                      padding-inline-start: 1ch;
  83                  }',
  84              )
  85          );
  86          register_block_style(
  87              'core/navigation-link',
  88              array(
  89                  'name'         => 'arrow-link',
  90                  'label'        => __( 'With arrow', 'twentytwentyfour' ),
  91                  /*
  92                   * Styles for the custom arrow nav link block style
  93                   */
  94                  'inline_style' => '
  95                  .is-style-arrow-link .wp-block-navigation-item__label:after {
  96                      content: "\2197";
  97                      padding-inline-start: 0.25rem;
  98                      vertical-align: middle;
  99                      text-decoration: none;
 100                      display: inline-block;
 101                  }',
 102              )
 103          );
 104          register_block_style(
 105              'core/heading',
 106              array(
 107                  'name'         => 'asterisk',
 108                  'label'        => __( 'With asterisk', 'twentytwentyfour' ),
 109                  'inline_style' => "
 110                  .is-style-asterisk:before {
 111                      content: '';
 112                      width: 1.5rem;
 113                      height: 3rem;
 114                      background: var(--wp--preset--color--contrast-2, currentColor);
 115                      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');
 116                      display: block;
 117                  }
 118  
 119                  /* Hide the asterisk if the heading has no content, to avoid using empty headings to display the asterisk only, which is an A11Y issue */
 120                  .is-style-asterisk:empty:before {
 121                      content: none;
 122                  }
 123  
 124                  .is-style-asterisk:-moz-only-whitespace:before {
 125                      content: none;
 126                  }
 127  
 128                  .is-style-asterisk.has-text-align-center:before {
 129                      margin: 0 auto;
 130                  }
 131  
 132                  .is-style-asterisk.has-text-align-right:before {
 133                      margin-left: auto;
 134                  }
 135  
 136                  .rtl .is-style-asterisk.has-text-align-left:before {
 137                      margin-right: auto;
 138                  }",
 139              )
 140          );
 141      }
 142  endif;
 143  
 144  add_action( 'init', 'twentytwentyfour_block_styles' );
 145  
 146  if ( ! function_exists( 'twentytwentyfour_block_stylesheets' ) ) :
 147      /**
 148       * Enqueues custom block stylesheets.
 149       *
 150       * @since Twenty Twenty-Four 1.0
 151       * @return void
 152       */
 153  	function twentytwentyfour_block_stylesheets() {
 154          /**
 155           * The wp_enqueue_block_style() function allows us to enqueue a stylesheet
 156           * for a specific block. These will only get loaded when the block is rendered
 157           * (both in the editor and on the front end), improving performance
 158           * and reducing the amount of data requested by visitors.
 159           *
 160           * See https://make.wordpress.org/core/2021/12/15/using-multiple-stylesheets-per-block/ for more info.
 161           */
 162          wp_enqueue_block_style(
 163              'core/button',
 164              array(
 165                  'handle' => 'twentytwentyfour-button-style-outline',
 166                  'src'    => get_parent_theme_file_uri( 'assets/css/button-outline.css' ),
 167                  'ver'    => wp_get_theme( get_template() )->get( 'Version' ),
 168                  'path'   => get_parent_theme_file_path( 'assets/css/button-outline.css' ),
 169              )
 170          );
 171      }
 172  endif;
 173  
 174  add_action( 'init', 'twentytwentyfour_block_stylesheets' );
 175  
 176  if ( ! function_exists( 'twentytwentyfour_pattern_categories' ) ) :
 177      /**
 178       * Registers pattern categories.
 179       *
 180       * @since Twenty Twenty-Four 1.0
 181       * @return void
 182       */
 183  	function twentytwentyfour_pattern_categories() {
 184  
 185          register_block_pattern_category(
 186              'twentytwentyfour_page',
 187              array(
 188                  'label'       => _x( 'Pages', 'Block pattern category', 'twentytwentyfour' ),
 189                  'description' => __( 'A collection of full page layouts.', 'twentytwentyfour' ),
 190              )
 191          );
 192      }
 193  endif;
 194  
 195  add_action( 'init', 'twentytwentyfour_pattern_categories' );