royboy789 / gutenberg-object-plugin Goto Github PK

Hey,

Love this project, honestly can't believe it wasn't built into gutenberg from the beginning.

I seem to be having a problem where I dont get all the content for a block, e.g. for a media/text block I only get the media, not the text. I haven't tested all the blocks yet but yeah is this expected behaviour?

https://github.com/WordPress/gutenberg/tree/master/editor/components/inner-blocks

Update the return object to include block data from nested n^n inner-blocks

e.g.

{
    "is_gutes": true,
    "post_id": 8,
    "data": [{
            "uid": "28f8b2b6-e374-4b97-a3dc-f2542a2126af",
            "name": "parent-block",
            "data": {
                "background": "tan"
            },
            "inner_blocks": [
                {
                    "uuid": "",
                    "name":"child-block",
                    "data": {}
                    "inner_blocks": [
                        "uuid": "",
                        "name": "grand-child-block",
                        "data" : {}
                    ]
                }
            ]
        },
        {
            "uid": "71e2b633-caf6-463a-a53c-eda78d5f5790",
            "name": "parent-block",
            "data": {
                "background": "light-tan"
            }
        }
    ]
}

This:

class GutenbergObjectPlugin {
	use Singleton;
	public function __construct() {
		Scripts::init();
		Database::init();
		API::init();
		Hooks::init();
	}
}
$GutesArraySave = GutenbergObjectPlugin::init();

Is nigh impossible to write unit tests for.

Instead, eliminate the singletons by doing something like this:

$scripts = new Scripts();
$database = new Database();
$api = new API();
$hooks = new Hooks(); 
$GutesArraySave = new GutenbergObjectPlugin( $scripts, $database, $api, $hooks );
$GutesArraySave->init();

This way the classes are fully testable, and rely on dependency injection to gain access to things, rather than reaching out magically across the program like a goto statement, with hidden global state and mytery sauce semantics.

Additionally, this provides structure to the program, and an object graph. E.g. we can now swap out the Database object for a different object with the same interface, or reuse that object. Possibilities!

Hi,
I am doing a data migration from drupal to wordpress. And there is some data that is already stored in WordPress as Gutenberg blocks.
What is the best way to save these posts into plugin's new table. When I do wp_update_post(), it doesn't insert any record in wp_gutes_arrays.

• PHP 5.3 is required, possibly 5.4 but nothing is mentioned in the requirements section
• The package type is project not wordpress-plugin and the composer installers package is missing from the requirements. Installing via a standard WP composer setup is not possible

List Pulled from Gutenberg Library

• Audio
• Button
• Categories
• Code
• Columns
• Cover Image
• Embed
• Freeform
• Gallery
• Heading
• HTML
• Image
• Latest Posts
• List
• More
• Nextpage
• Paragraph
• Preformatted
• Pullquote
• Quote
• Separator
• Shortcode
• Subhead
• Table
• Text Columns
• Verse
• Video

If I make a change in the Wordpress ios app, the changes are reflected in the generic Gutenberg "content" block but are not reflected in your snazzy new 'editor_blocks'. If I save from the web app it does update correctly though.

use wp_json_encode instead to help with inconsistencies

Is there a way to output the correct field names of ACF generated blocks?

Example:

{
    "clientId": "689c35b4-7e5c-40be-9bbc-62567d2f52fd",
    "name": "acf/persona-data",
    "isValid": true,
    "originalContent": "",
    "attributes": {
        "id": "block_5c765be24819b",
        "data": {
            "field_5c76577121aa0": {
                "5c765be34819c": {
                    "field_5c75805f71339": "2016",
                    "field_5c7580697133a": "text"
                },
                "5c765c27e768c": {
                    "field_5c75805f71339": "2017",
                    "field_5c7580697133a": "test"
                },
                "5c765c2ee768d": {
                    "field_5c75805f71339": "2016",
                    "field_5c7580697133a": "test"
                }
            }
        },
        "name": "acf/persona-data",
        "align": "",
        "mode": "preview",
        "bid": "1fe0d"
    },
    "innerBlocks": []
}

I'm expecting the data to be formatted as:

"data": {
    "persona_data": {
        "year": "2016",
        "description": "text"
    }
}

Got any ideas?

It seems important to get the rendered content in addition to the block data:

{
  name: "core/paragraph",
  data: ...,
  content: ...,
  dropcap: ...,
  rendered: '<html>'
}

This would allow for custom rendered blocks and WYSIWYG content to be mixed together.

The goal is to be able to retrieve data from a single block using 2 params

• Post ID
• Block ID

Unsure of best method to go about this, as id's generate in Gutenberg are refreshed on every session (as last checked), so will need a static ID for each block (must work with any block)

I tried installing both the composer version and the ZIP version.

As soon as I enable the plugin, I go to edit a Gutenberg post (add a heading, text or image) and when I click the Update button, I get...

Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    at CoreHeading.hookCallback (gutenberg-db.build.js?ver=1:3823)
    at Object.<anonymous> (index.js?ver=1535603880:1)
    at Function.cleanData (gutenberg-db.build.js?ver=1:1365)
    at SaveBlock.saveCallback (gutenberg-db.build.js?ver=1:1323)
    at index.js?ver=1535603880:1
    at Array.forEach (<anonymous>)
    at index.js?ver=1535603880:1
    at Object.d [as dispatch] (index.js?ver=1535603880:1)
    at dispatch (<anonymous>:1:38223)
    at lodash.min.59550321.js:49

When trying to utilize the Media & Text core block only the media (image) related data appears in the json response. It appears the block uses a nested Paragraph block that isnt getting returned as part of the "data" object.

The autoloader is only present if composer install is ran directly in the plugin folder. If the plugin is pulled in as a dependency then the autoloader and vendor folder will be located elsewhere leading to a fatal error

Instead, only load vendor/autoload.php if it exists

Hello!

When I use the new route /wp-json/wp/v2/posts/<id>/blocks I'm getting the error
<br /> <b>Notice</b>: Trying to get property 'gutes_array' of non-object in <b>/var/www/html/wp-content/plugins/gutenberg-object-plugin/src/Helpers.php</b> on line <b>15</b><br /> null

And when I use the older route /wp-json/gutes-db/v1/<id> i just get false in the data property.

I'm working with lazyblocks and i'm seeing the following:

 "editor_blocks": [{
     "uid": "418ea290-1045-4800-a03f-8aac3902de0a",
     "name": "lazyblock/hero-section",
     "data": {
         "image_left": "%7B%22alt%22:%22%22,%22title%22:%22mee%22,%22caption%22:%22%22,%22id%22:31,%22link%22:%22https://next.thechemistrygroup.com/hello-world/mee/%22,%22url%22:%22https://next.thechemistrygroup.com/app/uploads/2019/03/mee.jpg%22%7D",
         "image_right": "%7B%22alt%22:%22%22,%22title%22:%22mee%22,%22caption%22:%22%22,%22id%22:31,%22link%22:%22https://next.thechemistrygroup.com/hello-world/mee/%22,%22url%22:%22https://next.thechemistrygroup.com/app/uploads/2019/03/mee.jpg%22%7D",
         "heading": "Testingk",
         "sub_heading": "this is a test",
         "button_text": "Linky",
         "button_link": "https://google.com",
         "lazyblock": {
             "slug": "lazyblock/hero-section"
         },
         "className": "",
         "align": "",
         "anchor": "",
         "blockId": "Z2iMi8t",
         "blockUniqueClass": "lazyblock-hero-section-Z2iMi8t",
         "bid": "1c7eb"
     }
 }]

As you can see image_left and image_right are url encoded rather than an object. Perhaps there needs to be some additional formatting added to deal with this type of thing

Thanks!

Suggestion from Kevin H.

• When object data in DB is saved, that should sync with the normal / default Gutenberg data
• The data should sync both ways

@royboy789
By default the plugin will not cache any API results. There are instances where this might be of good use when one or more users ask for the same data multiple times. We could reduce server load by caching some of the results the API returns.

Wordpress also has a build-in caching mechanism which workes around the Transient API

Prehaps the plugin could be extended with a feature that will cache the result of an API request when an request has been called for an X amount of time in an X amount of seconds. Or a user would be able to define his own threshold.

When using oEmbed-enabled links, WordPress automatically converts the URL to its oEmbed entity - paste the URL of a YouTube video or of an Instagram post and the editor turns it into the embedded entity (so long as it's from a whitelisted source). It's a great editor experience but not easy to support with a headless renderer.

Currently, the information available about an embedded block like that is something like this:

Via Gutes-DB endpoint:

{
    "clientId": "de662839-2d40-4cb6-8aea-6dd582edf3da",
    "name": "core-embed\/instagram",
    "isValid": true,
    "attributes": {
        "url": "https:\/\/www.instagram.com\/p\/BmYak-1AOL4\/",
        "allowResponsive": true,
        "type": "rich",
        "providerNameSlug": "instagram",
        "className": ""
    },
    "innerBlocks": []
},

WP Raw Database

<!-- wp:core-embed/instagram {"url":"https://www.instagram.com/p/BmYak-1AOL4/","type":"rich","providerNameSlug":"instagram","className":""} -->
<figure class="wp-block-embed-instagram wp-block-embed is-type-rich is-provider-instagram"><div class="wp-block-embed__wrapper">
https://www.instagram.com/p/BmYak-1AOL4/
</div></figure>
<!-- /wp:core-embed/instagram -->

WP REST API via /wp-json/wp/v2/pages/{id}

<figure class=\"wp-block-embed-instagram wp-block-embed is-type-rich is-provider-instagram\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"instagram-media\" data-instgrm-captioned data-instgrm-permalink=\"https:\/\/www.instagram.com\/p\/BmYak-1AOL4\/\" data-instgrm-version=\"12\" style=\" background:#
..... Lots of HTML/JS code
<\/p><\/div><\/blockquote><script async src=\"\/\/www.instagram.com\/embed.js\"><\/script>\n<\/div><\/figure>

Suggested Enhancement

For many block types, Gute-DB returns an originalContent field. This isn't provided for core-embed/{provider} blocks, and even if it were, the markup example above under "WP Raw Database" isn't immediately useful. A more useful value to include, perhaps in a renderedContent field would be the HTML produced by WP after rendering the embed.

This would prevent each front end consumer from having to create a rendering handler for all 2 dozen+ oEmbed providers whitelisted by WordPress - a consuming FE would simply need to handle all core/embed blocks by rendering the provided HTML.

If the originalContent is available, the string can be converted to the rendered embed code in two ways:

1. Apply the_content filters like apply_filters( 'the_content', html_entity_decode( $originalContentString));
2. Call the WP_Embed class directly

$embed = new WP_Embed();
$renderable = $embed->autoembed( html_entity_decode( $originalContentString ) );

I'm happy to contribute a filter to do the embed parsing to the API response, but have had some trouble tracking down why embed blocks dont have the originalContent available after going through the CleanFilter when saving.

I tried to Network Activate this plugin and it threw an error. Is this not compatible with Multi Sites?

Thank you

Plugin could not be activated because it triggered a fatal error.

Fatal error: Uncaught Error: Class 'GutesObjectPlugin\Scripts' not found in /home/.../wp-content/plugins/gutenberg-object-plugin-2.0.0/GutesObjectPlugin.php:52 Stack trace: #0 /home/.../wp-admin/includes/plugin.php(2141): include() #1 /home/.../wp-admin/plugins.php(175): plugin_sandbox_scrape('gutenberg-objec...') #2 {main} thrown in /home/.../wp-content/plugins/gutenberg-object-plugin-2.0.0/GutesObjectPlugin.php on line 52

Add Support for WDS Blocks

• Hero
• Call To Action
• Recent Posts Grid
• Multi-select, Related Posts Grid
• Two Column Layout
• Github Gist
• Users Grid

Why haven't you registered this plugin with Packagist‽ (╯°□°)╯︵ ┻━┻

Hi,

This plugin has been a massive help. One thing I've noticed is that when viewing the output of a preview it is different to that of a standard post:

Preview

{
  "editor_blocks": [
    {
      "attrs": {...},
      "blockName": "core/paragraph",
      "innerBlocks": [],
      "innerHTML": "<p>just an example</p>"
    }
  ]
}

Standard

{
  "editor_blocks": [
    {
      "name": "core/paragraph",
      "data": {
        "content": "This is a test",
        "dropCap": false
      }
    }
  ]
}

I've taken a stab at it but I can't seem to get it to work, do you have any pointers?

I'm running the latest version from the master branch, WP 4.9.8 and Gutenberg 4.1.1.

Thanks!

I'm unable to activate the plugin. I get the following error:
Fatal error: Uncaught Error: Class 'ReactQuiz\QuizCPT' not found in C:\xampp\htdocs\react-gutenberg\wp-content\plugins\gutenberg-react-quiz-master\ReactQuizPlugin.php on line 138

Hi, it would be helpful to see example output in the documentation.

Trying to determine if I can render an entire Gatsby site using the plugin.