历经千辛万苦,我终于把WordPress回复可见的古腾堡区块写好了,本次区块的编写我们使用了「Cutsom Blocks」和上篇文章《WordPress判断文章是否被评论代码》的部分代码。
预览区块
<?php
$hide_tips = '<div class="content-hide-tips"><i class="fa fa-lock secret-icon"></i>
<div class="content-hide-wrap t-c">
<div class="fs12 hide-content">当前内容已被隐藏,您需要评论才能查看评论</div>
<p class="fs12"><a class="commentbtn" href="#respond"><button>去评论</button></a></p>
</div>
</div>';
$replied_font = "<div class = 'content-hide-tips'><span class='fs12 content-hide-text'>隐藏内容</span>
<div class = 'content-hide-wrap t-c'>";
$replied_back = '</div></div>';
echo $replied_font;
block_field( 'hide-content' );
echo $replied_back;
?>
区块CSS
.content-hide-tips {
padding: 50px 20px 40px 20px;
border: 1px dashed #ccc;
margin: 20px 0;
background-color: #fafafa;
position: relative;
}
.content-hide-tips .secret-icon {
position: absolute;
font-size: 30px;
right: 15px;
top: 10px;
font-style: normal;
color: #ccc;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-lock:before {
content: '\f023';
}
.t-c {
text-align: center;
}
.content-hide-tips div{
display: block;
}
.fs12 {
font-size: 12px;
}
.content .single-text p {
line-height: 180%;
margin: 20px 0;
}
.hide-content{
padding-bottom: 25px;
}
.content-hide-tips a {
color: #428bca;
text-decoration: none;
background: transparent;
font-size: 100%;
margin: 0;
padding: 0;
vertical-align: baseline;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
transition: all 0.2s ease;
cursor: pointer;
}
.content-hide-tips button {
display: inline-block;
padding: 8px 12px;
line-height: 1;
font-size: 13px;
color: #FFF;
border: 1px solid #4285F4;
font-weight: 400;
background-color: #4285F4;
border-radius: 2px;
position: relative;
cursor: pointer;
}
.content-hide-tips .content-hide-text {
position: absolute;
left: 20px;
top: 8px;
color: #90949C;
}
编辑区
体验效果
在本页面评论回复后体验效果
评论回复可见区块