| version: '3.8' | |
| services: | |
| dynamodb-local: | |
| command: "-jar DynamoDBLocal.jar -sharedDb -dbPath ./data" | |
| image: "amazon/dynamodb-local:latest" | |
| container_name: dynamodb-local | |
| ports: | |
| - "8000:8000" | |
| volumes: | |
| - "./docker/dynamodb:/home/dynamodblocal/data" |
| wp.domReady(() => { | |
| const unsubscribe = wp.data.subscribe(() => { | |
| const select = wp.data.select('core/edit-post'); | |
| if (select) { | |
| const editorHasLoaded = select.areMetaBoxesInitialized(); | |
| if (editorHasLoaded) { | |
| //do stuff here | |
| unsubscribe(); | |
| } | |
| } |
Example URLs:
Super helpful section of docs: https://react.dev/reference/react/useEffect#fetching-data-with-effects
Create a React app with https://stackblitz.com/ or create-react-app
Make the app show a list of posts, do not worry about pagination
Show a loading message while loading.
| <html> | |
| <head> | |
| <title>Plain Text Editor</title> | |
| <script | |
| crossorigin | |
| src="https://unpkg.com/react@18/umd/react.production.min.js" | |
| ></script> | |
| <script | |
| crossorigin | |
| src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" |
| import React,{ useEffect, useState } from 'react'; | |
| import { | |
| BlockEditorProvider, | |
| BlockTools, | |
| BlockCanvas, | |
| } from '@wordpress/block-editor'; | |
| //import { registerCoreBlocks } from '@wordpress/block-library'; | |
| import {registerBlockType} from '@wordpress/blocks'; | |
| import * as blocks from '@wordpress/block-library'; |
| wp.data.subscribe(() => { | |
| //https://developer.wordpress.org/block-editor/reference-guides/data/data-core-editor/ | |
| const {isSavingNonPostEntityChanges,isSavingPost,isPublishingPost,isPostSavingLocked,isEditedPostSaveable} = wp.data.select('core/editor'); | |
| //call each function | |
| console.log(isSavingNonPostEntityChanges, isSavingNonPostEntityChanges()); | |
| console.log(isSavingPost,isSavingPost()); | |
| console.log(isPublishingPost,isPublishingPost()); | |
| console.log(isPostSavingLocked,isPostSavingLocked()); |
| [ | |
| { | |
| "clientId": "3f39eda6-f587-44b8-9a90-2744e1b601a5", | |
| "name": "core/heading", | |
| "isValid": true, | |
| "originalContent": "<h2 class=\"wp-block-heading\">What is Lorem Ipsum?</h2>", | |
| "validationIssues": [], | |
| "attributes": { | |
| "content": "What is Lorem Ipsum?", | |
| "level": 2, |
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title><%- title %></title> | |
| <%- injectScript %> | |
| </head> | |
| <body></body> |
| import{ Component, ErrorInfo, ReactNode } from 'react'; | |
| interface Props { | |
| children: ReactNode; | |
| renderError: ({message,onReset}:{ | |
| message:string, | |
| onReset:()=>void | |
| })=>ReactNode | |
| } |
