WP5.3で検証

フォーマット

プルクオート

引用ブロックは、他人の文章を挿入する場合に使う。
プルクオートブロックは、自分の文章の一部を目立たせる抜粋のような使い方。

デフォルト表示

引用分

引用元
<figure class="wp-block-pullquote is-style-default">
	<blockquote>
		<p>引用文</p>
		<cite>引用元</cite>
	</blockquote>
</figure>

ブロック設定パネル

色設定
高度な設定

スタイル

デフォルト.is-style-default
無地.is-style-solid-color

スタイル無地サンプル

無地の引用
<figure class="wp-block-pullquote is-style-solid-color">
	<blockquote>
		<p>スタイル無地サンプル</p>
		<cite>無地の引用</cite>
	</blockquote>
</figure>

メインカラー設定はボーダー
文字色は本文

引用元
<figure class="wp-block-pullquote" style="border-color:#ff6900">
	<blockquote class="has-text-color has-vivid-cyan-blue-color">
		<p>メインカラー設定はボーダー</p>
		<cite>引用元</cite>
	</blockquote>
</figure>

スタイル設定

標準スタイル

.wp-block-pullquote {
    padding: 3em 0;
    margin-left: 0;
    margin-right: 0;
    text-align:center
}

.wp-block-pullquote.alignleft, .wp-block-pullquote.alignright {
    max-width:305px
}

.wp-block-pullquote.alignleft p, .wp-block-pullquote.alignright p {
    font-size:20px
}

.wp-block-pullquote p {
    font-size: 28px;
    line-height:1.6
}

.wp-block-pullquote cite, .wp-block-pullquote footer {
    position:relative
}

.wp-block-pullquote .has-text-color a {
    color:inherit
}

.wp-block-pullquote:not(.is-style-solid-color) {
    background:none
}

.wp-block-pullquote.is-style-solid-color {
    border:none
}

.wp-block-pullquote.is-style-solid-color blockquote {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    max-width:60%
}

.wp-block-pullquote.is-style-solid-color blockquote p {
    margin-top: 0;
    margin-bottom: 0;
    font-size:32px
}

.wp-block-pullquote.is-style-solid-color blockquote cite {
    text-transform: none;
    font-style:normal
}

.wp-block-pullquote cite {
    color:inherit
}
.wp-block-pullquote {
    border-top: 4px solid #555d66;
    border-bottom: 4px solid #555d66;
    margin-bottom: 28px;
    color:#40464d
}

.wp-block-pullquote__citation, .wp-block-pullquote cite, .wp-block-pullquote footer {
    color: #40464d;
    text-transform: uppercase;
    font-size: 13px;
    font-style:normal
}

ブロック制御コメント

<!-- wp:pullquote -->
<!-- /wp:pullquote -->

<!-- wp:pullquote {"className":"is-style-solid-color"} -->
<!-- /wp:pullquote -->

<!-- wp:pullquote {"customMainColor":"#ff6900","textColor":"pale-cyan-blue"} -->
<!-- /wp:pullquote -->