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