wordpress-gutenberg | 易学教程

Wordpress Gutenberg block

阅读更多关于 Wordpress Gutenberg block

问题 I have a problem with a custom block which send me an error when I reload the edition page. I don't understand what the problem is. In regards of the error, actual and expected are the same. Here the error : Block validation: Block validation failed for namespace/nottomiss ({object}). Expected: <div class="wp-block-utopiales-nottomiss"><p>label test</p><p>label test</p></div> Actual: <div class="wp-block-utopiales-nottomiss"><p>label test</p><p>title test</p></div> Here my code : const {

How do I use a Font Awesome icon for a custom Gutenberg block?

阅读更多关于 How do I use a Font Awesome icon for a custom Gutenberg block?

问题 I am following a tutorial by Zac Gordon regarding how to use the SVG path for a custom icon of a Gutenberg block. I'm looking to use the Info Circle from Font Awesome. I have the following defined for the icon element but the icon space is empty: const iconEl = el('svg', { width: 20, height: 20 }, el('path', { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18

How I can add a custom control to a page?

阅读更多关于 How I can add a custom control to a page?

问题 I need to add a checkbox to the page editing form in Gutenberg without third-party plugins like ACF. I did some tutorials, including the one on the official Wordpress page, but it does not behave as I need to. I already have the addition to the sidebar (I replaced the checkbox with a toogle but it would be the same), the element does not work itself, if I click does not change its status, nor can I store the value when saving the page. Formerly I would have solved it with metabox, but it is

edit via function php the gallery in posts created with gutenberg

阅读更多关于 edit via function php the gallery in posts created with gutenberg

问题 I'm trying to modify the html output of the gallery that is provided by gutemberg via function php ... but I can't. How do you intercept and modify yourself? this is the original: <ul="wp-block-gallery columns-2 is-cropped"> <li class="blocks-gallery-item">....</li> <li class="blocks-gallery-item">....</li> </ul> and I would like to change it based on the number of columns to adapt it to my development framework ... <div class="grid-x"> <div class="box-50">...</div> <div class="box-50">...<

Q: Richtext editor with h1 title and p subtitle

阅读更多关于 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, 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

“Cannot read property 'getEditedPostAttribute' of undefined” for InnerBlocks in Gutenberg

阅读更多关于 “Cannot read property 'getEditedPostAttribute' of undefined” for InnerBlocks in Gutenberg

问题 I'm trying to implement a block component for the Gutenberg Editor in WordPress. There I want to use the InnerBlocks component which is also used for example for the columns component provided by Wordpress itself. When I try to start using the component, I always get the same error in the frontend: In the console I get the message: TypeError: Cannot read property 'getEditedPostAttribute' of undefined at script.build.js?ver=1:27811 at getNextMergeProps (script.build.js?ver=1:103469) at new

Gutenberg Block validation failed

阅读更多关于 Gutenberg Block validation failed

问题 I'm creating a custom Gutenberg block. It works fine on save and appears on the front end, but as soon I come back to it it reads. Block contains invalid or unexpected content When I go in to resolve the block, I get an extra figure inserted around my MediaUpload component. The console output shows the structure of block except with the text added in. I saw a similar issue where the HTML nodes of edit function didn't match up with save function HTML nodes. After seeing that, I doubled check

How do I use a Font Awesome icon for a custom Gutenberg block?

阅读更多关于 How do I use a Font Awesome icon for a custom Gutenberg block?

I am following a tutorial by Zac Gordon regarding how to use the SVG path for a custom icon of a Gutenberg block. I'm looking to use the Info Circle from Font Awesome . I have the following defined for the icon element but the icon space is empty: const iconEl = el('svg', { width: 20, height: 20 }, el('path', { d: "M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v

How to add new panel under “document” in Gutenberg

阅读更多关于 How to add new panel under “document” in Gutenberg

问题 I am trying to add a new component panel under document tab, like categories, featured image etc. 回答1: You can add this code to your function.php. This code create new tab and add text field to this tab. Text field save to database like custom field in post_meta table and you can output this like default WP post meta. 1. Create tab Настройки UTM . 2. Create custom text field utm_post_class 3. To output in website use $utm = get_post_meta( $post->ID, 'utm_post_class', true ); //Article UTM