The recommended way of using RichText Component inside save function is – <RichText.Content tagName=”p” style={ styles } className={ className ? className : undefined } value={ content } dir={ direction } /> See, how this core paragraph block is doing it. Instead of using normal HTML use RichText Content on text fields
It looks like styled components relies on react to provide the CSS. Since react is not loaded on the WordPress frontend you are not seeing any styles. You can define your CSS inline or enqueue a stylesheet with register_block_type. Check out this link for enqueueing: Applying Styles From a Stylesheet
Gutenberg work with Bootstrap Shortcodes plugin
I used this toggler to add a class to an element if checked. Maybe your goal is the same with a class for a larger font. I used it like this: checked: !!textSize, onChange: function(){ textSize ? props.setAttributes({ textSize: ” }) : props.setAttributes({ textSize: ‘ big’ }) } So textSize controls the checked status and … Read more
var el = wp.element.createElement var withSelect = wp.data.withSelect wp.blocks.registerBlockType(‘voucher/shortcode’, { title: ‘Voucher Shortcode’, icon: ‘smiley’, category: ‘common’, attributes: { category: { type: ‘string’, } }, edit: withSelect( function( select ) { var pages = select(‘core’).getEntityRecords(‘postType’, ‘voucher’, { per_page: -1 }); return { posts: pages }; } ) (function(props) { if ( ! props.posts ) { … Read more
The goodness of Open Source Softwares is that you can always look into the source code. You can find the source code of embed block of Gutenberg from here https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src/embed. It will be complex as it’s a combination of multiple embeds so be careful by studying it.
Block Filters are used to customize the class that wordpress already adds using following format wp-block-[plugin_name]-[block-name]. You can access that using this.props.className. You can also add the additional classes using Advanced Panel which is present on right sidebar. In the end you can use React.js component state to define custom classes (pseudo code is given … Read more
The wp.components library is intended for UI purposes, e.g. the publish button, the inserter modal, etc in the back end. They aren’t intended for frontend usage. Much in the same way you wouldn’t use WP Admin styles and HTML classes on UI intended for the frontend. For example the core/button block makes use of a … Read more
Images uploaded via Gutenberg image block are cropped
Gutenberg editor in WordPress 5.0.3 /wp-json/wp/v2/pages/4713/autosaves?_locale=user 500 (Internal Server Error)