[英]Q: Richtext editor with h1 title and p subtitle
Hi So i'm trying to make a richtext block where the First line will be a h1, and when u press enter u get to type a pharagraph, I tried using the multiline attribute with a value of "p" but that doesn't work, 嗨,所以我试图制作一个富文本块,其中第一行将为h1,当您按Enter键时输入法文,我尝试使用值为“ p”的multiline属性,但这不是工作,
I wonder if anyone can help me out. 我想知道是否有人可以帮助我。
This is my code so far. 到目前为止,这是我的代码。
/**
* Block dependencies
*/
import './style.scss';
/**
* Internal block libraries
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { RichText } = wp.editor;
/**
* Register block
*/
export default registerBlockType('my-plugin/header-2', {
title: __('h1 Title'),
description: __('h1 title'),
icon: 'heart',
category: 'common',
keywords: [
__('richtext-block'),
__('weconnect'),
__('h2')
],
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'h2',
},
},
edit: function ({ attributes, setAttributes, className, isSelected }) {
return (
<RichText
tagName="h2"
className={className}
value={attributes.content}
onChange={(content) => setAttributes({ content })}
placeholder={__('Enter text...', 'custom-block')}
keepPlaceholderOnFocus={true}
/>
);
},
save: function( { attributes } ) {
return (
<RichText.Content tagName="h2" value={ attributes.content } />
);
}
});
Your block is currently right for ONLY H2 tag. 您的区块目前仅适用于H2标签。 Nowhere in the code you have any code for "P" tag, hence it's not working.
在代码中无处没有“ P”标签的任何代码,因此它无法正常工作。 Try this code -
试试这个代码-
export default registerBlockType('my-plugin/header-2', {
title: __('h1 Title'),
description: __('h1 title'),
icon: 'heart',
category: 'common',
keywords: [
__('richtext-block'),
__('weconnect'),
__('h2')
],
attributes: {
content: {
type: 'array',
source: 'children',
selector: 'h2',
},
pcontent: {
type: 'array',
source: 'children',
selector: 'p',
},
},
edit: function ({ attributes, setAttributes, className, isSelected }) {
return (
<div className={className}>
<RichText
tagName="h2"
className={className}
value={attributes.content}
onChange={(content) => setAttributes({ content })}
placeholder={__('Enter text...', 'custom-block')}
keepPlaceholderOnFocus={true}
/>
<RichText
tagName="p"
className={className}
value={attributes.pcontent}
onChange={(pcontent) => setAttributes({ pcontent })}
placeholder={__('Enter p text...', 'custom-block')}
keepPlaceholderOnFocus={true}
/>
</div>
);
},
save: function( { attributes } ) {
return (
<div>
<RichText.Content tagName="h2" value={ attributes.content } />
<RichText.Content tagName="p" value={ attributes.pcontent } />
</div>
);
}
});
Changes I made - 我所做的更改-
Added "pcontent" attribute, every new html must needs to declare new attribute 添加了“ pcontent”属性,每个新的html都必须声明新属性
Added Another field for "P" content to leverage the text 为“ P”内容添加了另一个字段以利用文本
option on hover 悬停选项
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.