
badge class
badge クラスは、要素ブロックの対角線の長さから算出した四角形で要素をラップします。
badgeクラスとその連携クラスを使用する場合は、グループブロック内で使用してください。
alignleft alignrightクラスと併用する場合は、グループブロックを使わなくてもOKです。
paragraph badge class
hello world
badge mark-alert Combination class
mark-alert等テーマのカラークラス またはエディタのカラー設定で色指定ができます。
hello world
badge circle mark-notice Combination class
badgeクラスに、circleクラスを追加すると、まるで要素をラップします。
hello world
badge circle mark-info Combination class
hello world
badge クラスと要素にエディタのカスタムカラー設定を追加した例
hello world
paragraph badge contort + editor color setting
contort クラスは、円をゆがめて、それぞれを少し重ねて表示します。
paragraph badge exclusion
wp-block-image にbadgeクラスを追加した場合には、画像要素に変形が適用されます。
wp-block-image badge circle size1of5 Combination class

wp-block-image contort badge Combination class

wp-block-image badge square Combination class

wp-block-image badge awarding size1of5 Combination class

3
33
hello world