Cocoon のフィルターフックでビジュアルエディターをカスタマイズ

 add_filter( 'tinymce_style_formats', function( $style_formats ) {
  // 背景がグラデーションのボックス
  $style_formats[] = array(
    'title' => 'ボックス(グラデーション)',
    'items' => array(
      array(
        'title'   => '紫',
        'block'   => 'div',
        'classes' => 'purple-gradation gradation-box'
      ),
      array(
        'title'   => '黄',
        'block'   => 'div',
        'classes' => 'yellow-gradation gradation-box'
      )
    )
  );

  // 最初の 1 文字目が大きい
  $style_formats[] = array(
    'title' => '大きな1文字目',
    'items' => array(
      array(
        'title'   => 'オレンジ',
        'inline'  => 'span',
        'classes' => 'first-letter-orange first-letter'
      ),
      array(
        'title'   => '緑',
        'inline'  => 'span',
        'classes' => 'first-letter-green first-letter'
      )
    )
  );

  return $style_formats;
}); 

 /* 背景がグラデーションのボックス */
.gradation-box {
  margin: 40px 0;
  padding: 16px 24px;
}

.purple-gradation {
  background: linear-gradient(
    32deg,
    #6002ee,
    #8600ee,
    #a400ee,
    #be00ee,
    #d602ee
  );
  color: #fff;
}

.yellow-gradation {
  background: linear-gradient(
    32deg,
    #ffeb3b,
    #eff035,
    #ddf532,
    #c8fa34,
    #b1ff3b
  );
}

/* 最初の 1 文字目が大きい */
.first-letter {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  font-size: 34px;
  height: 56px;
  justify-content: center;
  margin-right: 4px;
  width: 56px;
}

.first-letter-orange {
  background: #ff8d00;
}

.first-letter-green {
  background: #90ee02;
} 

 add_filter( 'tinymce_init_array', function( $init_array ) {
  // フォーマットに div を追加、かつ h1 の見出しを削除
  $init_array['block_formats'] = '段落=p; グループ=div; 見出し2=h2; 見出し3=h3; 見出し4=h4; 見出し5=h5; 見出し6=h6; 整形済みテキスト=pre';
  return $init_array;
});