Giter VIP home page Giter VIP logo

Comments (16)

janfeldmann avatar janfeldmann commented on June 3, 2024 4

Hey, I think I did it.
I will do create a pull request when I have some spare time.

Basically I registered a new field
register_rest_field(..., wp_graphql_gutenberg_preview, ...)
for the REST API and the meta data

Inside /src/blocks.js I added a isPreviewUpdateRequest function to check if the user hit the preview button. Inside I post the data to the REST API

wp.apiFetch({ path: /wp/v2/${restBase}/${post.id}, method: "PUT", data: { wp_graphql_gutenberg_preview: data } });

I access this data inside 'update_callback' from the newly register_rest_field from above and update the 'wp_graphql_gutenberg_preview' post meta data.

from wp-graphql-gutenberg.

mrclay avatar mrclay commented on June 3, 2024 2

@janfeldmann Any progress here? I'd welcome partial functionality to allow post previews to be able to display.

from wp-graphql-gutenberg.

pristas-peter avatar pristas-peter commented on June 3, 2024 2

Hi guys nevermind the conversation above. Fixed in 9bae117

I have rewritten the plugin and included support for revisions and also for live previews as you type (you need to be authenticated and have edit_posts capabality to be able to query) like example above:

{
  posts {
    edges {
      node {
        blocks {
          __typename
          ... on CoreParagraphBlock {
            attributes {
              ... on CoreParagraphBlockAttributes {
                content
              }
            }
          }
        }
        revisions {
          edges {
            node {
              databaseId
              blocks {
                ... on CoreParagraphBlock {
                  attributes {
                    ... on CoreParagraphBlockAttributes {
                      content
                    }
                  }
                }
              }
            }
          }
        }
        previewBlocks {
          __typename
          ... on CoreParagraphBlock {
            attributes {
              ... on CoreParagraphBlockAttributes {
                content
              }
            }
          }
        }
      }
    }
  }
}

Will be included in a new version (0.2.0) introducing some breaking changes. I am in a process of writting new docs. You can test it out from develop branch right now if you want.

from wp-graphql-gutenberg.

pristas-peter avatar pristas-peter commented on June 3, 2024 1

@lnesi @kingkero @gustavpursche @janfeldmann @mrclay

Hi @Splact, thanks for the PR, however i think it is a temporary solution and we should address this in a larger scale.

I was wondering, would you guys mind running this plugin rewritten in JS? What I mean you would have to host your own node application (next.js, heroku) or maybe even serverless function (netlify, aws, zeit now) which wp-graphql would proxy to? It would solve a lot of problems like revision, ability to query blocks without re-saving them and so?

from wp-graphql-gutenberg.

janfeldmann avatar janfeldmann commented on June 3, 2024

Any news on this? Would be great to have when building the previews.

from wp-graphql-gutenberg.

pristas-peter avatar pristas-peter commented on June 3, 2024

Hi guys, sorry I am busy with gatsby-wordpress-gutenberg however i will get back to this plugin after im done with that. However supporting revisions wont be an easy task, because of how gutenberg works, however if you are using gatsby the issue would be resolved in the latter plugin.

from wp-graphql-gutenberg.

janfeldmann avatar janfeldmann commented on June 3, 2024

Hey @pristas-peter

in which way will the issue be resolved by gatsby?

Greetings Jan

from wp-graphql-gutenberg.

pristas-peter avatar pristas-peter commented on June 3, 2024

I am writting a completely new native gatsby plugin which will work without this plugin. The development is done here: https://github.com/pristas-peter/gatsby-wordpress-gutenberg

from wp-graphql-gutenberg.

mrclay avatar mrclay commented on June 3, 2024

@pristas-peter Could you give a high level overview of the fix in case one of us could attempt it?

from wp-graphql-gutenberg.

pristas-peter avatar pristas-peter commented on June 3, 2024

Sure, you would need to query all revisions inside gutenberg (js) and parse all postContent with window.wp.blocks api. Then send it to php on post save (just how it is done now) and then register it with graphql

from wp-graphql-gutenberg.

janfeldmann avatar janfeldmann commented on June 3, 2024

@pristas-peter
As I understand it, you use the "update_callback" from the REST API to use the update_post_meta function.

This is not triggered, when I just hit the "Preview" button without saving the post right?

Do you know if I can use another hook here?
For example if the post autosaves are updated?

from wp-graphql-gutenberg.

pristas-peter avatar pristas-peter commented on June 3, 2024

Yes, fantastic, PR is welcomed.
If you want to complete this, theres on more feature needed in admin js, when the force update is taking place, because this will only work for newly saved posts.
Thanks

from wp-graphql-gutenberg.

Splact avatar Splact commented on June 3, 2024

Following @janfeldmann solution I created this pull request #26 .

Don't know if it's a solution valid to be merged since it's much cleaner having blocks data accessible directly from revision. Here instead we have a blocksPreview field (that contains the blocks data coming from the latest autosave) on the post object. Anyway this solved my needs, so I think it's worth sharing.

So when you need to query preview data, your query will be something like:

query ($wpId: Int!) {
  customPostExample: customPostExampleBy(customPostExampleId: $wpId) {
    # use good old `blocks` as fallback when no autosave has been fired yet
    blocks {
      name
      ... on AcfExampleBlock {
        acf {
          test
          test_2
        }
      }
      ... on CoreParagraphBlock {
        originalContent
      }
    }
    blocksPreview {
      name
      ... on AcfExampleBlock {
        acf {
          test
          test_2
        }
      }
      ... on CoreParagraphBlock {
        originalContent
      }
    }
    
    preview: revisions(first: 1, before: null) {
      nodes {
        title
        slug
        content
      }
    }
  }
}

from wp-graphql-gutenberg.

mrclay avatar mrclay commented on June 3, 2024

@pristas-peter What data would live in this separate app?

from wp-graphql-gutenberg.

pristas-peter avatar pristas-peter commented on June 3, 2024

None, it would act as a sort of provider, parser for wo-graphql

from wp-graphql-gutenberg.

pristas-peter avatar pristas-peter commented on June 3, 2024

Released in 0.2.0

from wp-graphql-gutenberg.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.