eddev 0.2.28 → 0.2.31

package/build/get-webpack-config.js

@@ -130,6 +130,7 @@ function getWebpackConfig(opts) {
                     ALIAS["@components"] = path_1.default.join(opts.baseDirectory, "components");
                     ALIAS["@views"] = path_1.default.join(opts.baseDirectory, "views");
                     ALIAS["@hooks"] = path_1.default.join(opts.baseDirectory, "hooks");
+                    ALIAS["@lib"] = path_1.default.join(opts.baseDirectory, "lib");
                     ALIAS["@queries"] = path_1.default.join(opts.baseDirectory, "hooks/queries");
                     ALIAS["@utils"] = path_1.default.join(opts.baseDirectory, "utils");
                     RULES.push({

package/gravityforms/useGravityForm.js

@@ -122,14 +122,24 @@ function useGravityForm(opts) {
 }
 exports.useGravityForm = useGravityForm;
 function prepareValuesPayload(form, state, data) {
-    for (var _i = 0, _a = form.fields; _i < _a.length; _i++) {
-        var field = _a[_i];
+    var _loop_1 = function (field) {
         var value = state.values[field.id];
         var key = "input_" + field.id;
         if (field.type === "consent") {
             key += "_1";
         }
-        data[key] = value;
+        if (field.type === "checkbox") {
+            field.choices.forEach(function (choice, i) {
+                data["".concat(key, ".").concat(i + 1)] = (value === null || value === void 0 ? void 0 : value.includes(choice.value)) ? choice.value : null;
+            });
+        }
+        else {
+            data[key] = value;
+        }
+    };
+    for (var _i = 0, _a = form.fields; _i < _a.length; _i++) {
+        var field = _a[_i];
+        _loop_1(field);
     }
     return data;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eddev",
-  "version": "0.2.28",
+  "version": "0.2.31",
   "main": "./index.js",
   "license": "MIT",
   "bin": {
@@ -21,14 +21,15 @@
     "@types/loadable__component": "^5.13.4",
     "@types/node": "^16.7.10",
     "@types/react": "^17.0.36",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.0.6",
     "@types/react-inspector": "^4.0.2",
     "@types/rimraf": "^3.0.2",
     "@types/url-parse": "^1.4.4",
     "@types/webpack-dev-server": "^3.11.2",
     "csstype": "^3.0.9",
     "next": "^12.1.6",
-    "react-html-props": "^1.0.32"
+    "react-html-props": "^1.0.32",
+    "react-use": "^17.4.0"
   },
   "dependencies": {
     "@babel/core": "^7.15.5",
@@ -89,9 +90,9 @@
     "to-icon": "^1.1.4",
     "typescript": "4.5.5",
     "url-parse": "^1.5.3",
-    "webpack": "^5.52.0",
+    "webpack": "5.74.0",
     "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-dev-server": "^3.11.2",
+    "webpack-dev-server": "3.11.3",
     "webpack-hot-middleware": "^2.25.0",
     "webpack-virtual-modules": "^0.4.3",
     "zod": "^3.11.6",

package/serverless-template/tsconfig.json

@@ -21,6 +21,7 @@
       "@components/*": ["components/*"],
       "@views/*": ["views/*"],
       "@hooks/*": ["hooks/*"],
+      "@lib/*": ["lib/*"],
       "@utils/*": ["utils/*"],
       "@queries/*": ["hooks/queries/*"],
       "@theme": ["theme.css.tsx"],

package/style/createStitches.js

@@ -274,12 +274,13 @@ function parseResponsiveObject(breakpoints, object) {
 }
 exports.parseResponsiveObject = parseResponsiveObject;
 function getResponsiveObjectStyles(breakpoints, object, varName, unit) {
-    var _a, _b;
-    var _c;
+    var _a, _b, _c;
+    var _d;
     if (unit === void 0) { unit = "px"; }
     // Prescale object
     object = __assign({}, object);
     var parsed = parseResponsiveObject(breakpoints, object);
+    console.log("PARSED", parsed);
     var globals = {};
     for (var _i = 0, parsed_1 = parsed; _i < parsed_1.length; _i++) {
         var atom = parsed_1[_i];
@@ -294,8 +295,14 @@ function getResponsiveObjectStyles(breakpoints, object, varName, unit) {
                 _b[varName] = atom.concreteValue + unit,
                 _b);
         }
+        else if (atom.defined) {
+            globals["@" + atom.breakpoint] = (_c = {},
+                _c[varName] = atom.value,
+                _c);
+        }
     }
-    return [globals, (_c = globals["@initial"]) === null || _c === void 0 ? void 0 : _c[varName]];
+    console.log("GLOBALS", globals);
+    return [globals, (_d = globals["@initial"]) === null || _d === void 0 ? void 0 : _d[varName]];
 }
 exports.getResponsiveObjectStyles = getResponsiveObjectStyles;
 // parseResponsiveTokens({'@initial': blah, '@desktop': blah}, breakpoints, )

package/docs_old/README.md

@@ -1,33 +0,0 @@
-# Website
-
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
-
-### Installation
-
-```
-$ yarn
-```
-
-### Local Development
-
-```
-$ yarn start
-```
-
-This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
-
-### Build
-
-```
-$ yarn build
-```
-
-This command generates static content into the `build` directory and can be served using any static contents hosting service.
-
-### Deployment
-
-```
-$ GIT_USER=<Your GitHub username> USE_SSH=true yarn deploy
-```
-
-If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.

package/docs_old/babel.config.js

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
-};

package/docs_old/blog/2019-05-28-first-blog-post.md

@@ -1,12 +0,0 @@
----
-slug: first-blog-post
-title: First Blog Post
-authors:
-  name: Gao Wei
-  title: Docusaurus Core Team
-  url: https://github.com/wgao19
-  image_url: https://github.com/wgao19.png
-tags: [hola, docusaurus]
----
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

package/docs_old/blog/2019-05-29-long-blog-post.md

@@ -1,44 +0,0 @@
----
-slug: long-blog-post
-title: Long Blog Post
-authors: endi
-tags: [hello, docusaurus]
----
-
-This is the summary of a very long blog post,
-
-Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
-
-<!--truncate-->
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet

package/docs_old/blog/2021-08-01-mdx-blog-post.mdx

@@ -1,20 +0,0 @@
----
-slug: mdx-blog-post
-title: MDX Blog Post
-authors: [slorber]
-tags: [docusaurus]
----
-
-Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
-
-:::tip
-
-Use the power of React to create interactive blog posts.
-
-```js
-<button onClick={() => alert('button clicked!')}>Click me!</button>
-```
-
-<button onClick={() => alert('button clicked!')}>Click me!</button>
-
-:::

package/docs_old/blog/2021-08-26-welcome/index.md

@@ -1,25 +0,0 @@
----
-slug: welcome
-title: Welcome
-authors: [slorber, yangshun]
-tags: [facebook, hello, docusaurus]
----
-
-[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
-
-Simply add Markdown files (or folders) to the `blog` directory.
-
-Regular blog authors can be added to `authors.yml`.
-
-The blog post date can be extracted from filenames, such as:
-
-- `2019-05-30-welcome.md`
-- `2019-05-30-welcome/index.md`
-
-A blog post folder can be convenient to co-locate blog post images:
-
-![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
-
-The blog supports tags as well!
-
-**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.

package/docs_old/blog/authors.yml

@@ -1,17 +0,0 @@
-endi:
-  name: Endilie Yacop Sucipto
-  title: Maintainer of Docusaurus
-  url: https://github.com/endiliey
-  image_url: https://github.com/endiliey.png
-
-yangshun:
-  name: Yangshun Tay
-  title: Front End Engineer @ Facebook
-  url: https://github.com/yangshun
-  image_url: https://github.com/yangshun.png
-
-slorber:
-  name: Sébastien Lorber
-  title: Docusaurus maintainer
-  url: https://sebastienlorber.com
-  image_url: https://github.com/slorber.png

package/docs_old/docs/graphql/1.graphql-overview.md

@@ -1,62 +0,0 @@
-# GraphQL Overview
-
-GraphQL allows us to query data from WordPress, without resorting to writing too much PHP code.
-
-In short, GraphQL allows for the creation of a 'schema', which is a definition of the data available on the server, and 'queries' which actually query that schema. We use the [WPGraphQL](https://www.wpgraphql.com/) WordPress plugin, installed via composer, to provide an automatically generated schema — so all we need to worry about is writing 'queries'.
-
-Our `eddev-php` library provides additional schema generation, mainly for Gutenberg blocks.
-
-The WPGraphQL docs are a great place to learn about GraphQL and how WPGraphQL works:
-
-- [Intro to GraphQL](https://www.wpgraphql.com/docs/intro-to-graphql/)
-- [Interacting with WPGraphQL](https://www.wpgraphql.com/docs/interacting-with-wpgraphql/)
-
-## GraphiQL IDE
-
-The GraphiQL IDE built into WPGraphQL provides a window into the schema.
-
-The IDE also allows you to construct and execute queries, by selecting fields on the left. You can copy/paste between the IDE and your `.graphql` files.
-
-![GraphQL IDE](./img/graphql-ide.png)
-
-## GraphQL Files
-
-There are a few locations where `.graphql` query files can be placed within your project's codebase.
-
-### Global Data
-
-You can use `/views/_app.graphql` to declare global data used by your application, and access it from any view/block/component using the `useAppData` hook.
-
-[Read More →](/docs/views/app-view)
-
-### Views
-
-'Views' work just like regular WordPress templates. Instead of `single.php`, you can create a `views/single.tsx` file. Alongside your `.tsx` file, you can create a `.graphql` file with the same name as the `.tsx` file. These queries are automatically executed when the relevant page is accessed.
-
-[Read More →](/docs/views/queries)
-
-### Blocks
-
-Just like views, blocks can have a paired `.graphql` file, which is executed automatically for each block.
-
-[Read More →](/docs/gutenberg/block-graphql)
-
-## Query Hooks
-
-Sometimes you need to be able to run queries _dynamically_ in the browser, rather than as part of a 'view' or 'block'. This is particularly useful for things like searching and filtering.
-
-You can place `.graphql` files in `queries/*.graphql`, and hooks will be automatically generated for you to use within your app.
-
-[Read More →](/docs/graphql/query-hooks)
-
-### Fragments
-
-Fragments must be stored within `/queries/fragments/*.graphql`
-
-[GraphQL Fragments](https://graphql.org/learn/queries/#fragments) allow us to write query fragments, which can be reused in multiple files.
-
-- [Learn more about GraphQL Fragments](https://graphql.org/learn/queries/#fragments)
-
-## TypeScript Generation
-
-TBA

package/docs_old/docs/graphql/2.query-hooks.md

@@ -1,238 +0,0 @@
-# Query Hooks
-
-Sometimes you might need to perform queries at runtime, rather than as part of views or blocks. This is particularly useful for things like searching and filtering.
-
-To do so, you can create `.graphql` files inside the `queries/` folder.
-
-React Hooks are automatically generated, based on the name of the query.
-
-### Naming Conventions
-
-For conventions sake, all `queries/*.graphql` files (except for `queries/fragments/*.graphql`) should be start with `use` (eg. `queries/UseLatestPosts.graphql`). Our dev tooling will actually complain if this isn't the case!
-
-Similarly, the name of your query file and query operation name should also match! Again, you'll get a nice error message if they don't asking you to rename either the operation name, or the file name.
-
-For example:
-
-```graphql title="queries/UseLatestPosts.graphql"
-query UseLatestPosts {
-  posts(first: 10) {
-    nodes {
-      id
-      title(format: RENDERED)
-    }
-  }
-}
-```
-
-### Using your hook
-
-Generated hooks are stored in `hooks/queries.ts`, and can be imported from there using the name of the query file.
-
-```tsx
-import { useLatestPosts } from "@hooks/queries"
-import { PostTile } from "@components/PostTile"
-
-export function LatestPosts() {
-  const results = useLatestPosts()
-
-  if (results.loading) {
-    return <p>Loading...</p>
-  }
-
-  if (results.errors) {
-    return <p>Error!</p>
-  }
-
-  return (
-    <div>
-      {results.data?.posts?.nodes?.map((post) => (
-        <PostTile key={post.id} post={post} />
-      ))}
-    </div>
-  )
-}
-```
-
-Easy as!
-
-### Types of hooks
-
-There are **three** types of hooks which are automatically generated.
-
-#### Regular hooks
-
-The `useLatestPosts` example above is a regular hook. The hook will return an object with the following properties:
-
-- `loading` (boolean) — whether the query is currently loading
-- `errors` (array of error objects) — an array of errors, or `undefined` if there are none. The errors may either be HTTP errors, or GraphQL errors.
-- `data` (object) — the data returned by the query, which should be statically typed already based on your GraphQL schema and query.
-- `refresh` (function) — a function you can call to re-run the query.
-
-#### Infinite hooks
-
-Infinite hooks are a special kind of hook which we've invented, which support infinite loading patterns, such as infinite scrolling and 'load more' buttons.
-
-Any query which has `Infinite` in the name (eg. `UseInfinitePosts`) will be automatically generated as an infinite hook. These hooks have a `loadMore` function, and make use of the `nodes` and `pageInfo` fields provided by WPGraphQL, and use 'cursor based' pagination.
-
-There are a few special requirements for infinite hooks, but we've configured the `dev` tooling to warn you if you're not following these conventions (on top of the usual naming convention requirements)
-
-- The query name must contain the word 'Infinite' (eg. `UseInfinitePosts`)
-- There must be a `$limit: Int` variable defined on the query, with a default value. This is the number of items to load per page.
-- There must be a `$cursor: String` variable defined on the query, with no default value. This is used for controlling pagination.
-- The `$cursor` variable must be used in the `after` field of the query.
-- The `$limit` variable must be used in the `first` field of the query.
-- Your query must select `nodes`
-- Your query must select the `endCursor` and `hasNextPage` fields from the `pageInfo` object
-
-Here's an example query which fits all of those requirements (it's pretty simple!):
-
-```graphql title="queries/UseInfinitePosts.graphql"
-query UseInfinitePosts($limit: Int = 2, $cursor: String) {
-  posts(first: $limit, after: $cursor) {
-    nodes {
-      title(format: RENDERED)
-    }
-    pageInfo {
-      endCursor
-      hasNextPage
-    }
-  }
-}
-```
-
-The return value of the hook will be an object with the following properties:
-
-- `loading` (boolean) — whether the hook is performing it's _first_ load
-- `loadingMore` (boolean) — whether the hook is loading additional entries, in response to `loadMore()`
-- `errors` (array of error objects) — an array of errors, or `undefined` if there are none. The errors may either be HTTP errors, or GraphQL errors.
-- `items` (array of objects) — an array of items, which are the result of the query, automatically extracted from the `nodes` field present in the query
-- `hasMore` (boolean) — whether or not there are more items which can be loaded
-- `loadMore` (function) — function which can be called to load more items.
-- `refresh` (function) — clears out all items, and re-runs the query.
-
-In essense, you can use `.items` to grab the current items, and `.loadMore()` to load more items when a button is clicked, or an `IntersectionObserver` intersects.
-
-Heres' an example component which uses the query above:
-
-```tsx title="components/LatestPosts.tsx"
-import { useInfinitePosts } from "@hooks/queries"
-
-function InfiniteExample() {
-  const posts = useInfinitePosts()
-
-  if (posts.loading) {
-    // The initial load is in progress, show some loading indicator
-    return <div>Loading...</div>
-  }
-
-  return (
-    <div>
-      {/* The list of items, which will grow as more items are loaded */}
-      <ul>
-        {posts.items?.map((item, key) => {
-          return <li key={key}>{item.title}</li>
-        })}
-      </ul>
-      {/* A 'Load more' button, which is disabled and shows 'Loading...' when more items are loading */}
-      {posts.hasMore && (
-        <button disabled={posts.loadingMore} onClick={() => posts.loadMore()}>
-          {posts.loadingMore ? "Loading..." : "Load more"}
-        </button>
-      )}
-    </div>
-  )
-}
-```
-
-It looks something like this:
-
-![Mutation Example](./img/infinite-example.gif)
-
-#### Mutation hooks
-
-Mutation hooks are hooks generated when your operation uses `mutation` in instead of `query`. Mutations are used in GraphQL when the query has some kind of side effect, such as creating a new comment, or submitting a form. Unlike `query` operations, mutations are never cached on the server.
-
-Mutation hooks return an object with the following properties:
-
-- `submitting` (boolean) — whether the mutation is currently running
-- `submitted` (boolean) — whether or not the last mutation which was submitted completed successfully
-- `errors` (array of error objects) — an array of errors, or `undefined` if there are none. The errors may either be HTTP errors, or GraphQL errors.
-- `data` (object) — the result of the last submitted mutation, if it was successful.
-- `submit(args)` (function) — the function which you must trigger to actually run the mutation. Pass in required parameters as an object.
-
-An example mutation operation looks like this:
-
-```graphql title="queries/UseCreateComment.graphql"
-mutation UseSubmitComment($input: CreateCommentInput!) {
-  createComment(input: $input) {
-    success
-  }
-}
-```
-
-Unlike query hooks, the query won't run automatically when using the hook — rather, it needs to be triggered manually using an event or an effect using the `submit` method, provided by the hook.
-
-```tsx title="components/CreateComment.tsx"
-import { useSubmitComment } from "@hooks/queries"
-import { useState } from "react"
-
-type Props = {
-  postID: number
-}
-
-export function CreateComment(props: Props) {
-  const [message, setMessage] = useState("")
-  const [authorName, setAuthorName] = useState("")
-  const comment = useSubmitComment()
-
-  return (
-    <form
-      onSubmit={(e) => {
-        e.preventDefault()
-        comment.submit({
-          input: {
-            commentOn: props.postID,
-            content: message,
-            approved: null,
-            author: authorName,
-            authorEmail: null,
-            authorUrl: null,
-            clientMutationId: null,
-            date: null,
-            parent: null,
-            type: null,
-          },
-        })
-      }}
-    >
-      {comment.errors && <div>ERROR: {comment.errors[0].message}</div>}
-      {comment.submitted && <div>Thanks for your comment!</div>}
-      <input
-        placeholder="Enter your name"
-        type="text"
-        value={authorName}
-        onChange={(e) => setAuthorName(e.currentTarget.value)}
-      />
-      <textarea placeholder="Enter your comment" value={message} onChange={(e) => setMessage(e.currentTarget.value)} />
-      <button disabled={comment.submitting} type="submit">
-        Submit comment
-      </button>
-    </form>
-  )
-}
-```
-
-It looks something like this:
-
-![Mutation Example](./img/mutation-example.gif)
-
-## Does this use the GraphQL endpoint?
-
-Nope it doesn't! It uses the WP-JSON REST endpoint, and the query file is loaded from the theme folder and executed by the server.
-
-For example, if you've got a GraphQL file called `queries/UseLatestPosts.graphql` in your theme folder, you'll can actually see it in action by accessing `http://my-site.local/wp-json/ed/v1/query/usePosts?params={%22limit%22:1}`, noting that variables are JSON encoded into the URL — this can be great for debugging GraphQL schema extensions. Use Chrome's Network tab to see the request and responses in action.
-
-The reason for this is so that the query results can be cached by Flywheel or CloudFlare, and also keeps our `/graphql` hidden from hackers who might want to DDoS the site, or otherwise attempt to scrape data directly from us. The result is that only the data we chose to make public is publicly accessible.
-
-Mutations also follow this pattern, however they use POST requests, so that data will never accidentally be cached.

package/docs_old/docs/graphql/3.extending-wpgraphql.md

@@ -1,3 +0,0 @@
-# Extending the GraphQL Schema
-
-This needs writing, sorry!

package/docs_old/docs/graphql/_category_.json

@@ -1,4 +0,0 @@
-{
-  "label": "❄️ GraphQL",
-  "position": 5
-}

package/docs_old/docs/gutenberg/1.overview.md

@@ -1,25 +0,0 @@
-# Blocks Overview
-
-Blocks are primarily defined in a `.tsx` file inside the `blocks/` folder. Blocks should be organised within subfolders, depending on their purpose and context.
-
-For example:
-
-- `blocks/layout/section.tsx`
-- `blocks/projects/single-project-tile.tsx`
-- `blocks/content/button-row.tsx`
-
-## ACF Fields
-
-ACF fields can be attached to any block type. Use ACF fields for complex data.
-
-ACF fields are passed **directly** to blocks — rather the ACF fields must be selected using GraphQL files. This may seem like a bunch of work, but it actually gives us the opportunity to pull the exact data we need — for example, we can pull metadata for posts directly from 'Post Object' fields. It also allows us to have great TypeScript support for all ACF fields attached to a block, automatically.
-
-[Read more →](./block-acf)
-
-## GraphQL
-
-Each block can have a single `.graphql` file sitting alongside the `.tsx` file (eg. `/blocks/sections/newsletter.tsx` and `/blocks/sections/newsletter.graphql`)
-
-The GraphQL file can query any data from the CMS, as well as any ACF fields attached to the block.
-
-[Read more →](./block-graphql)

package/docs_old/docs/gutenberg/2.block-definition.md

@@ -1,37 +0,0 @@
-# Defining a Block
-
-Create a new block file, for example `blocks/layout/section.tsx`
-
-Copy and paste the code below, making sure to:
-
-- Replace the `TITLE` and `DESCRIPTION`
-- Replace `NAME` with the filename of your block (eg. `layouts/section`)
-- Run `yarn generate`, so that TypeScript knows what prop types to expect for your new block, and will also validate the name.
-
-```tsx title="/blocks/layouts/section.tsx"
-/**
- * Title: TITLE
- * Description: DESCRIPTION
- * Category: common
- * Icon: book-alt
- * Keywords: post
- * Types: page, post
- * Mode: preview
- * Supports multiple: true
- * Tags: root
- * Child tags: none
- */
-import { defineBlock } from "eddev/blocks"
-
-export default defineBlock("NAME", (props) => {
-  return <div>Hello!</div>
-})
-```
-
-:::tip
-Make sure `yarn dev` is running! It'll auto-generate TypeScript types for block when you create it, and it'll continue to update those types if you're using a GraphQL for your block (which you probably are).
-:::
-
-:::warning
-If you get a red squiggly next to the block name in the `defineBlock`, it means you're either not running `yarn dev`, or you may be using the wrong name for the current file.
-:::