[FIXED] How to share node_modules and package.json files between two directories?

Issue

As I experiment with WordPress's new Gutenberg development methods, I noticed that I need to create individual block folders within the plugins directory. These are essentially the components that makeup the front-end and editor side of things.

I would like to understand two things:

1. How to install node_modules and package.json files so that commands are accepted when not in a specific block directory folder.

2. I would like to run certain builds with specific scripts, what are the proper commands to hand this procedure when outside of a block directory?

How do I setup my environment so that when I type in a command, it understand to compile no matter which plugin directory I am in?

Solution

The create-block package has scaffolding that allows you to create blocks and the package is undergoing heavy development right now that will allow you to have multiple blocks within one folder.

Answered By - Will

Answer Checked By - Mildred Charles (PHPFixing Admin)

Read More

[FIXED] How to define default style for InnerBlocks template for Gutenberg Block Editor (WordPress)

Issue

I am using gutenbergs' core block to make another block using InnerBlock. So, I want to change their default style like text align center.To start, I used officially supported way to create blocks Create-Guten-Block. My codes are as follows:

import {
    InnerBlocks, useBlockProps
} from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
    return (
        <div { ...useBlockProps() }>
            <InnerBlocks
                template={ [
                    [ 'core/columns', {},
                        [
                            [ 'core/column', {}, [
                                    [ 'core/paragraph', { content: '$200' } ],
                                ]
                            ],
                            [ 'core/column', {}, [
                                    [ 'core/button', { placeholder : 'Buy Now' } ],
                                ]
                            ],
                        ]
                    ],
                ] }
                templateLock="all"
            />
        </div>
    );
}

WordPress uses has-text-align-left class to align a text in the block. Is there any way to define default style inside the core/button's text-align to center inside the template.

Solution

Yes, the core/button block supports align and can be set in the block attribute align within the InnerBlocks template, eg:

...
    ['core/button', { placeholder: 'Buy Now', align: 'center' }],
...

The resulting HTML then has the built-in style aligncenter applied and the button is now center aligned:

<div class="wp-block-button aligncenter">
    <a class="wp-block-button__link">Buy Now</a>
</div>

Answered By - S.Walsh

Read More

[FIXED] How can I make a dropdown list control that fetches names of custom posts types?

Issue

How can I make a dropdown list control that fetches names of custom posts types? In my project I want to select a post type name and fetch it in drop down selector in my custom Gutenberg Block!.. How can I do this?

Solution

If creating a dropdown list (select) for the edit() function of a Gutenberg block, registered post types can be retrieved with getPostTypes() via useSelect() in JavaScript. An example of this is the dropdown in the Query Block to select a Post Type.

Below is a simplified example that uses a <SelectControl/> to display a list of all viewable post types, and enables a selected postType to be saved the blocks attributes.

block.json

{
    ...
    "attributes": {
        "postType": {
            "type": "string",
            "default": "post"
        }
    }
}

edit.js

import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { SelectControl } from '@wordpress/components';
import { useBlockProps } from '@wordpress/block-editor';


export default function Edit({ attributes, setAttributes }) {
    // postType defined in block.json
    const { postType } = attributes;

    // useSelect to retrieve all post types
    const postTypes = useSelect(
        (select) => select(coreStore).getPostTypes({ per_page: -1 }), []
    );

    // Options expects [{label: ..., value: ...}]
    var postTypeOptions = !Array.isArray(postTypes) ? postTypes : postTypes
        .filter(
            // Filter out internal WP post types eg: wp_block, wp_navigation, wp_template, wp_template_part..
            postType => postType.viewable == true)
        .map(
            // Format the options for display in the <SelectControl/>
            (postType) => ({
                label: postType.labels.singular_name,
                value: postType.slug, // the value saved as postType in attributes
            })
        );

    return (
        <div {...useBlockProps()}>
            <SelectControl
                label="Select a Post Type"
                value={postType}
                options={postTypeOptions}
                onChange={(value) => setAttributes({ postType: value })}
            />
        </div>
    );
}

The advantage of using JavaScript for the Editor instead of falling back to PHP is you can keep the UI consistent by using Gutenberg controls like <SelectControl/>.

The Settings Sidebar may be a good place to put your <SelectControl/> depending on your goal.

Answered By - S.Walsh

Read More

[FIXED] How to insert gutenberg block inside post_content when using wp_insert_post()?

Issue

I would like to generate a gutenberg block in php.

I'm currently developping a wordpress plugin that import videos from youtube and create a post for each video. I can insert the youtube video inside the post_content but when i edit the post with the gutenberg editor it doesn't display as a block.

I read most of the "Block Editor Handbook" here https://developer.wordpress.org/block-editor/ But i can't find anything except how to create custom block. I searched on google also, but everything i found was also about creating custom block. Yet i found that gutenberg blocks are stored inside post_content as a html comment, but the comment seems to be generated with js via gutenberg WYSIWYG editor.

I know that i could create a post with the blocks and copy the post_content from my database then use it as a "template" but i don't think it's a proper way.

Is there any documentation about using the blocks that come with wordpress (ie: embed, paragraphe) and generate the html comment wich is saved within post_content with php ? Is it even possible ?

Solution

When you manually add a YouTube block, click the "Code Editor" view in the Tools & Options menu (right side). In the Code Editor view you will see the HTML needed for the editor to correctly parse the block.

For example:

<!-- wp:core-embed/youtube {"url":"https://www.youtube.com/watch?v=VIDEOID","type":"video","providerNameSlug":"youtube","className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://www.youtube.com/watch?v=VIDEOID
</div></figure>
<!-- /wp:core-embed/youtube -->

Answered By - Tim Jensen

Read More