gutenberg helper

gutenberg-helper.php

<?
/**
 * Getting Started
 * "Gutenberg" is a codename for a whole new paradigm in WordPress site building and publishing
 * Official repository https://github.com/WordPress/gutenberg 
 */

// Getting Started with editor UI
https://wordpress.org/support/article/wordpress-editor/

// Getting Started with dev.
https://developer.wordpress.org/block-editor/getting-started/

// Material design icons used for Blocks Design
https://fonts.google.com/icons?selected=Material+Icons

// Udemy course
https://www.udemy.com/share/101Cxa3@n9So-P556RRCFmixAKF2fGY8UUwMXMxAwYfZlcgYRHsgDioF9Dg0LAHVmFQeDQaf/



/**
 * Architecture
 */
// Key Concepts
https://developer.wordpress.org/block-editor/explanations/architecture/key-concepts/
// Blocks are an abstract unit for structuring and interacting with content. 

// The package.json file defines the JavaScript properties for your project. 
package.json


// Data Flow and Data Format
https://developer.wordpress.org/block-editor/explanations/architecture/data-flow/



/**
 * Create a Block Tutorial 
 * Blocks are the fundamental element of the WordPress block editor.
 */
// !!! Note: Block development uses ESNext syntax
https://developer.wordpress.org/block-editor/how-to-guides/javascript/esnext-js/

// Block API Reference
https://developer.wordpress.org/block-editor/reference-guides/block-api/



/**
 * Block dev bootstraps
 */

// Create skyfolder
https://developer.wordpress.org/block-editor/getting-started/quick-start-guide/
https://youtu.be/nrut8SfXA44

// Get started with create-block
https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-create-block/

// Another example with copyright-date-block
https://developer.wordpress.org/block-editor/getting-started/tutorial/

// Minimal Gutenberg Block
https://github.com/WordPress/block-development-examples/tree/trunk/plugins/minimal-block-no-build-e621a6

// Get started with wp-scripts, Enqueuing assets
https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/

// The block-development-example GitHub repository
https://github.com/WordPress/block-development-examples/tree/trunk/plugins/data-basics-59c8f8

// Get started with wp-scripts 
https://developer.wordpress.org/block-editor/getting-started/devenv/get-started-with-wp-scripts/



/**
 * Anatomy of a Block
 */
https://developer.wordpress.org/block-editor/getting-started/create-block/block-anatomy/


// attributes
https://developer.wordpress.org/block-editor/getting-started/create-block/attributes/

// @wordpress/create-block 
// Create Block is an officially supported tool for scaffolding WordPress plugins with blocks.
https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/
npx @wordpress/create-block block-name

// Package Reference, install packages.
https://developer.wordpress.org/block-editor/reference-guides/packages/
// Using the Packages via WordPress Global
// can be accessed using the wp global variable.
wp - global variable.


// after install commands, cli commands, console commands
$ npm start
	Starts the build for development.

$ npm run build
	Builds the code for production.

$ npm run format
	Formats files.

$ npm run lint:css
	Lints CSS files.

$ npm run lint:js
	Lints JavaScript files.

$ npm run plugin-zip
	Creates a zip file for a WordPress plugin.

$ npm run packages-update
	Updates WordPress packages to the latest version.


// Available Commands
npm i (install)
npm start
npm run build
npm run format
npm run lint:css
npm run lint:js
npm run plugin-zip
npm run packages-update

// some general terminal utils
pwd - show your current directory/path
cd 	- change dir
cp 	- copying files
mv 	- moving files

// npx commands
npx wp-scripts format
npx wp-scripts lint-js

// install boilerplate
https://developer.wordpress.org/block-editor/reference-guides/packages/packages-create-block/
npx @wordpress/create-block boilerplate


// Redux Helper console data, get information from Redux
wp.data
wp.data.select("core/edit-post")
wp.data.select("core/edit-post").isEditorSidebarOpened()
wp.data.select("core/blocks").getBlockTypes()
wp.data.select("core").getTaxonomies()
wp.data.select("core/editor") // all data about current page
wp.data.select("core/editor").getEditedPostContent() // html content


// Quick create the necessary block scaffolding
https://developer.wordpress.org/block-editor/getting-started/create-block/
https://www.npmjs.com/package/@wordpress/create-block


// Code Implementaion 
https://developer.wordpress.org/block-editor/getting-started/create-block/block-code/

// enqueue Needed Files
// This function checks the block.json file for js and css files,
function create_block_gutenpride_block_init() {
    register_block_type( __DIR__ );
}
add_action( 'init', 'create_block_gutenpride_block_init' );

// load dependencies from index.asset.php
return array(
	"dependencies" => array('wp-blocks'),
	"version" => "1.0.0"
);


// Wordpress ReactJS
https://developer.wordpress.org/block-editor/reference-guides/packages/packages-element/
@wordpress/element

// Steps to setup needed codes (like ideea if no boostrap files)
1. npm init in plugin folder
2. npm install @wordpress/scripts --save-dev
3. npm i @wordpress/blocks (for to have autocomplition and stuff like that)
4. npm install @wordpress/element --save (if need to use elements)
5. npx wp-scripts build (need to have @wordpress/scripts)
6. npx wp-scripts start (listen to changes)

// OPTIONAL: For IDE support (code completion and hints), you can install the
@wordpress/components

// another commands
npx wp-scripts format
npx wp-scripts lint
npm i @wordpress/block-editor (install block editor interface)

npm run build - for running once to create a “production” build
npm run start for creating a “development” build


// JavaScript Build Setup
https://developer.wordpress.org/block-editor/how-to-guides/javascript/js-build-setup/

// ESNext Syntax
https://developer.wordpress.org/block-editor/how-to-guides/javascript/esnext-js/



/**
 * theme.json
 */
https://developer.wordpress.org/block-editor/reference-guides/theme-json-reference/theme-json-living/



/**
 * WordPress Block dependencies
 */
// check how components will look like
https://wordpress.github.io/gutenberg/?path=/story/docs-introduction--page

// modularity
https://developer.wordpress.org/block-editor/explanations/architecture/modularity/

// usages
import { Button } from '@wordpress/components';
export default function MyButton() {
    return <Button>Click Me!</Button>;
}



/**
 * WordPress Block Components
 */
// RichText Component
https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/rich-text/README.md
import { __ } from '@wordpress/i18n';
import { useBlockProps, RichText } from '@wordpress/block-editor';
import './editor.scss';

export default function Edit() {
	return (
		<RichText
			{ ...useBlockProps() }
			placeholder={__("Your Text", "text-box")}
			tagName="h4"
			allowedFormats={[ 'core/bold' ]}
		/>
	);
}

// example of RichText component completed with data.
export default function Edit({attributes, setAttributes}) {
	const {text} = attributes;
	return (
		<RichText
			{ ...useBlockProps() }
			onChange={ (text) => setAttributes({text}) }
			value={text}
			placeholder={__("Your Text", "text-box")}
			tagName="h4"
			allowedFormats={[ 'core/bold' ]}
		/>
	);
}



/**
 * Customs work 
 */
// custom icon settings (without block.js)
registerBlockType('blocks-course/text-box', {
	icon: {
		src: "text-page",
		background: '#f03',
		foreground: '#fff',
	},
	edit: Edit,
	save,
});



/**
 * Start dev steps, create new block, new block creation
 */
https://kinsta.com/blog/gutenberg-blocks/
// Additional tools
npx @wordpress/create-block my-first-block (npx @wordpress/create-block [options] [slug])
cd my-first-block
npm start or npm run build


/**
 * Add support for Gutenberg editor in a theme functions.
 */
https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/
add_theme_support('align-wide');
add_theme_support( 'editor-styles' );

// adding front styles
function cre8_add_editor_styles() {
    add_theme_support( 'editor-styles' );

    // Enqueue editor styles.
    add_editor_style( 'assets/css/style-editor.css' );
}
//add_action( 'after_setup_theme', 'cre8_add_editor_styles' );



/*** Tricks ***/
// deactivate widgets with gutenberg design
function phi_theme_support() {
    remove_theme_support( 'widgets-block-editor' );
}
add_action( 'after_setup_theme', 'phi_theme_support' );



/**
 * use global wp object
 */
// Data Module Reference 
https://developer.wordpress.org/block-editor/reference-guides/data/

wp.data.select('core/editor').getEditedPostContent(); 
wp.blocks.createBlock
wp.blocks.unregisterBlockStyle
wp.blocks.children
wp.blocks.parse

// work with core blocks, work with UI
// get all block types
wp.data.select("core/blocks").getBlockTypes()

// get global datas, global stores
wp.data.select('core/editor') // information about current pages that is in edit mode
wp.data.select('core').getAuthors()
wp.data.select('core').getAuthors()[0].name



/**
 * Parse block content
 */

// In JS:
var blocks = wp.blocks.parse( postContent );
// In PHP:
$blocks = parse_blocks( $post_content );