Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Docs: Fundamentals of Block Development - File structure of a block #56551

Merged
merged 6 commits into from
Nov 28, 2023
Merged

Docs: Fundamentals of Block Development - File structure of a block #56551

merged 6 commits into from
Nov 28, 2023

Conversation

juanmaguitar
Copy link
Contributor

@juanmaguitar juanmaguitar commented Nov 27, 2023 •
edited
Loading

Note

I opened this new PR to avoid some unwanted commits I got on the original one #56316 when trying to get that branch rebased from trunk

Add documentation for file structure of a block
This PR closes the issue #55437

@juanmaguitar juanmaguitar mentioned this pull request Nov 27, 2023
Closed
@juanmaguitar juanmaguitar added [Type] Developer Documentation Documentation for developers Developer Experience Ideas about improving block and theme developer experience labels Nov 27, 2023
@juanmaguitar
Copy link
Contributor Author

juanmaguitar commented Nov 27, 2023 •
edited
Loading

@fabiankaegy as you approved #56316, can you have a look at this PR and approve it if everything remains OK?
Pinging also @carolinan as you were part of the review of #56316

I'll merge it once I get the proper approvals without adding it to the sidebar.
I'll add the pages available for the "Fundamentals of Block Development" to the sidebar (add them to the manifesto) with a PR for #56282 once a few of the pages described on #56282 have been merged

ryanwelcher
ryanwelcher approved these changes Nov 27, 2023
View reviewed changes
Copy link
Contributor

@ryanwelcher ryanwelcher left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left a couple of notes that are probably not critical so feel free to merge if you disagree.

docs/getting-started/fundamentals-block-development/file-structure-of-a-block.md Outdated Show resolved Hide resolved
docs/getting-started/fundamentals-block-development/file-structure-of-a-block.md

### `save.js`

The `save.js` is similar to the `edit.js` file in that it exports a single React component. This component generates the static HTML markup that gets saved to the Database.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

save is a standard JavaScript function. It can be created as a component but under the hood only the render method is called as a JS function. Looking at scaffolded files, you'll notice that save is lowercase and React components are written in uppercase.

This may be pedantic but it's worth mentioning.

ndiego
ndiego reviewed Nov 27, 2023
View reviewed changes
docs/getting-started/fundamentals-block-development/file-structure-of-a-block.md Outdated
@@ -0,0 +1,88 @@
# File structure of a block

The most common way to register a custom block is via a JSON file that contains all of the metadata of the block.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This line feels out of place. I am not sure how it directly relates to the file structure. 🤔

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You're right. It's not clear the value of this message here.
I'll remove it.

@juanmaguitar juanmaguitar merged commit df2427f into trunk Nov 28, 2023
51 checks passed
@juanmaguitar juanmaguitar deleted the fundamentals-block-development/file-structure-of-a-block-2 branch November 28, 2023 06:41
@github-actions github-actions bot added this to the Gutenberg 17.2 milestone Nov 28, 2023
This was referenced Nov 28, 2023
Merged
Closed
derekblank pushed a commit that referenced this pull request Dec 7, 2023
@juanmaguitar @ryanwelcher @derekblank
Docs: Fundamentals of Block Development - File structure of a block (#…
7a0cb70 
…56551)

* Add file structure documentation for custom blocks

* Update docs/getting-started/fundamentals-block-development/file-structure-of-a-block.md

Co-authored-by: Ryan Welcher <[email protected]>

* Removed not clear sentence

---------

Co-authored-by: Ryan Welcher <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ndiego ndiego ndiego left review comments

@ryanwelcher ryanwelcher ryanwelcher approved these changes

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

Assignees
No one assigned
Labels
Developer Experience Ideas about improving block and theme developer experience [Type] Developer Documentation Documentation for developers
Projects
None yet
Milestone
Gutenberg 17.2
Development

Successfully merging this pull request may close these issues.
3 participants
@juanmaguitar @ryanwelcher @ndiego