WordPress shortcode / 221123 162750

# WordPress Shortcode Block

???


What is a #WordPress #Shortcode ?

* A WordPress shortcode is a WordPress-specific code
* that lets you do nifty things with very little effort.

* Shortcodes can embed files or create objects
* that would normally require lots of complicated, ugly code in just one line.



## How to create WordPress Shortcode ?

* Coding a new shortcode is easy.
* You can do it with just a few lines of code.

* https://developer.wordpress.org/reference/functions/add_shortcode/
* https://codex.wordpress.org/Shortcode_API

* Create plugin folder `my-plugin`
* /wp-content/plugins/my-plugin/
* Create a file named `index.php`
* /wp-content/plugins/my-plugin/index.php


### How to use WordPress Shortcode ?

* WordPress shortcodes can be used where users can write content.
* examples: posts, pages, widgets, text widgets...


#BLOCK #SHORTCODE

* In the WordPress editor, click on the `+` button
* Then click on the `Shortcode` button
* Then enter the shortcode name `[my_shortcode]`
* Save your post

### BLOCK: SHORTCODE (HACK)

* Strangely, the `Shortcode` block
* is a textarea
* where you can enter any HTML, CSS, JS code ?!

### CREATE YOUR OWN BLOCK

* YOU WANT YOUR OWN BLOCK ?

* Setup a local WordPress development environment
* ... and start coding with React !


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

* This will install your development environment
* and create a new block named `my-block`
* 4356 directories... 35438 files... 321Mo...
* ???


### NPM / REACT DEV TOOLS

* Build your block with React


* This will build the plugin code for your block


* https://developer.wordpress.org/block-editor/tutorials/block-tutorial/
* /writing-your-first-block-type/
* /creating-dynamic-blocks/



### PHP TEMPLATE: render.php

* The PHP template file
* where you can add your PHP code
* is `build/render.php`



### my-block is ready to use ?

* In the WordPress editor, click on the `+` button
* Then click on the `My Block` button
* You have a new block named `My Block`
* ?

* When saved, in the SQL database,
* the post_content field will contain the block annotation



### Customize the block name

* You can customize the block name
* `create-block/my-block`
* ... go back in the REACT dev environment
* in the file `src/block.json`

* write the name you want
* then re-build the plugin code
* ...



## THANKS FOR YOUR SUPPORT

???


## THANKS FOR YOUR SUPPORT

???


## THANKS FOR YOUR SUPPORT

???

???