19
const schema = {
content: {
type: 'array',
source: 'children',
selector: 'p',
default: [],
},
align: {
type: 'string',
},
dropCap: {
type: 'boolean',
default: false,
},
placeholder: {
type: 'string',
},
width: {
type: 'string',
},
textColor: {
type: 'string',
},
};
class ParagraphBlock extends paragraph.settings.edit {
constructor() {
super( ...arguments );
}
return [
textAlignmentEnabled && isSelected && (
value={ align }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
} }
/>
),
inspectorEnabled && isSelected && (
{ textSettingsEnabled && (
{ dropCapEnabled && (
label={ __( 'Drop Cap' ) }
checked={ !! dropCap }
onChange={ this.toggleDropCap }
/>
)}
)}
return className={ className ? className : undefined
}>{ content };
Define Schema Inspector View
Saved HTML
blockAutocompleter( { onReplace } ),
userAutocompleter(),
] }>
{ ( { isExpanded, listBoxId, activeId } ) => (
tagName="p"
className={ classnames( 'wp-block-paragraph', {
'has-background': backgroundColor,
'has-drop-cap': dropCap,
} ) }
style={ {
backgroundColor: backgroundColor,
color: textColor,
fontSize: fontSize ? fontSize + 'px' : undefined,
textAlign: align,
} }
value={ content }
onChange={ ( nextContent ) => {
setAttributes( {
content: nextContent,
} );
} }
/>
Editor View