ボタンデザイン

  // ボタン：囲い線
  register_block_style(
    'core/button',
    array(
      'name' => 'border-button',
      'label' => 'ボーダー',
    )
  );

// ボタン：囲い線
.is-style-border-button .wp-block-button__link {
  color: var(--wp--preset--color--primary);

  border: {
    width: 2px;
    style: solid;
    color: var(--wp--preset--color--primary);
    radius: 15px;
  }

  background-color: var(--wp--preset--color--base);
}

  // ボタン：囲い線＋矢印
  register_block_style(
    'core/button',
    array(
      'name' => 'border-arrow-button',
      'label' => 'ボーダー矢印',
    )
  );

// ボタン：囲い線＋矢印
.is-style-border-arrow-button .wp-block-button__link {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--wp--preset--color--primary);

  border: {
    width: 2px;
    style: solid;
    color: var(--wp--preset--color--primary);
    radius: 15px;
  }

  background-color: var(--wp--preset--color--base);

  &::after {
    content: "";
    display: inline-block;
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;

    border: {
      top: {
        style: solid;
        width: 2px;
        color: var(--wp--preset--color--primary);
      }

      right: {
        style: solid;
        width: 2px;
        color: var(--wp--preset--color--primary);
      }
    }
  }
}