blocks

docs/host/WordPress-Block.md

@@ -0,0 +1,462 @@
+--- 
+toc_min_heading_level: 2
+toc_max_heading_level: 5
+---
+
+# WordPress Block Theme Migration
+
+**23/12/14** - Today I learned a decent approach to doing a multi-step migration from a static site to WordPress theme full site editing block theme. The notes I made along the way turned into this post so I figured I'd leave it here for posterity.
+
+## About
+
+The existing site was static because every website build should basically start that way in either a design file like Figma that can be converted in HTML and CSS. It's how I start all of my projects plus when published as static, they're secure, performant, and easy to maintain. I've noticed that half of the sites I have running under a content management system rarely if ever have updates or changes made to them. With the advent of online 'website builders', clients just assume that they need control so I give it to them. I've found that in order to make the mundane more fun, I usually like to challenge myself by learning something new in the process. Since I'm converting this particular site to WordPress and I know that the next phase of the Gutenberg editor is collaboration, I wanted to go ahead make this site entirely block based so that I'd be up to speed on doing it with larger projects.
+
+Notes on block theme migrations[^1]another[^2]and another[^3] and another[^4]
+
+### Aside
+
+Part of the motivation for publishing this documentation was because of a comment I ran across. Since there are already thousands of resources and opinions floating around, I had to mostly go directly to the source documention. And since I noticed that some of it wasn't completely up to date, I've been scanning the `#core-dev` chat and noticed this comment 👇🏼
+
+![](/img/block-theme_matt.png)
+<div style={{display: 'flex',  justifyContent:'left', alignItems:'left', fontSize:'small', marginBottom:'20px'}}>Screenshot from Slack ~ Matt Mullenweg (WordPress founder)</div>
+
+## Setup
+
+<table>
+<tr>
+<th>Static 👉🏼</th>
+<th>Hybrid 👉🏼</th>
+<th>Block ✨</th>
+</tr>
+<tr>
+<td>
+
+```sh
+┌── .config(s)
+├── css/
+│   ├── fonts/
+│   ├── lib.css
+│   ├── site.css
+│   ├── css.map
+│   └── site.scss
+├── docs/
+│   └── .pdf
+├── gulpfile.js
+├── img/
+├── index.html
+├── js/
+│   ├── lib(s).js
+│   ├── lib.js.map
+│   ├── scripts.js
+│   ├── site.js
+│   └── js.map
+├── node_modules/
+├── package.json
+├── robots.txt
+└── sitemap.xml
+```
+</td>
+<td>
+
+```sh
+┌── .configs(s)
+├── _static/
+├── css/
+│   ├── fonts/
+│   ├── lib(s).css
+│   ├── site.css
+│   ├── css.map
+│   └── site.scss
+├── docs/
+│   └── .pdf
+├── footer.php
+├── functions.php
+├── gulpfile.js 
+├── header.php
+├── inc/
+│   └── inc(s).php
+├── img/
+├── index.php
+├── js/
+│   ├── lib(s).js
+│   ├── lib.js.map
+│   ├── scripts.js
+│   ├── site.js
+│   └── js.map
+├── node_modules/
+├── package.json
+├── page(s).php
+├── screenshot.png
+└── style.css
+
+(root)
+┌── robots.txt
+└── sitemap.xml
+
+```
+
+</td>
+<td>
+
+```sh
+┌── .configs(s)
+├── _static/
+├── css/
+│   ├── fonts/
+│   ├── lib.css
+│   ├── site.css
+│   ├── css.map
+│   └── site.scss
+├── docs/
+│   └── .pdf
+├── functions.php
+├── gulpfile.js
+├── js/
+│   ├── editor.js
+│   ├── lib.js
+│   ├── lib.js.map
+│   ├── scripts.js
+│   ├── site.js
+│   └── js.map
+├── inc/
+│   └── inc(s).php
+├── img/
+├── index.php
+├── node_modules/
+├── package.json
+├── parts/
+│   ├── footer.html
+│   ├── header.html
+│   └── page.html
+├── patterns/
+│   ├── columns.php
+│   ├── query.php
+│   └── etc.php
+├── screenshot.png
+├── style-editor.css
+├── style.css
+├── templates/
+│   ├── 404.html
+│   ├── archive.html
+│   ├── page.html
+│   ├── search.html
+│   └── single.html
+└── theme.json
+
+(root)
+┌── robots.txt
+└── sitemap.xml
+
+```
+</td>
+</tr>
+</table>
+
+## Workflow
+
+**Static 👉🏼 Hybrid**
+
+1. Move all the static HTML files into a new directory `_static/`
+2. Leave all of other assets  
+  a. ( `docs/ images/` `taskrunner` `npm_modules` `css/scss/fonts/icons` `javascript` )
+3. Add blank `style.css` WordPress Main Stylesheet with header.
+4. Move WordPress core into the webserver root and install a local database.  
+  a. add a localhost domain  
+  b. load up the admin and edit the general/reading settings  
+5. Add `index.php`, `functions.php`, `header.php`, `footer.php`  
+  a. copy the existing HTML from the static index.html file parts  
+  b. load and test until no errors
+6. Test and Edit the taskrunner by reinstalling the NPM modules, rebuilding, and running.  
+  a. edit the taskrunner to suit  
+7. Recreate the static pages  
+  a. copy/paste content into the WordPress Editor  
+  b. add assets to the Media Library
+
+( * at this point I wouldn't worry about adding any custom page templates because you'll be rewriting them into `patterns/` and `parts/` )
+
+
+**Hybrid 👉🏼 Block**
+
+1. Create `templates/` directory and copy WordPress PHP pages into and change extension to .html  
+  a. `404.html`, `archive.html`, `page.html`, `search.html`, `single.html`  
+  b. Change HTML/PHP markup to WordPress block Markup e.g. -`<!-- wp:site-title {"level":0} /-->` - most difficult 🔥 part because you'll have to use a reference to hand write or use the block editor to create pages and then copy/paste from the Code Editor  
+  c. Add references to template parts e.g. - `<!-- wp:template-part {"slug":"header","tagName":"header"} /-->`
+3. Create `parts/` directory  
+  a. add `header.html` and `footer.html`  
+3. Add `theme.json` file  
+  a. style the block editor to match theme.
+4. Add `patterns/` directory  
+  a. identify any recurring or unique design patterns from the static site  
+  b. build them into PHP pattern files. 
+
+### Local
+
+#### Task Runner
+
+I always use task runners to make local development fast and consistent. It also gives me the ability to bundle, keep track of, and update third party dependencies by adding them to my `package.json` file. The core WordPress develop repo uses Grunt but I prefer Gulp and I can still match the default Webpack/babel presets for bundling.
+
+##### Browser-sync
+
+To save time, I configure browser-sync to not only save on code changes but also refresh on the WordPress editor actions in `functions.php`. ( * Note: `.ovid` is my localhost and I always prefix my `functions` with the project acronym and date )
+
+```php
+// CORS for port #
+function add_cors_http_header(){
+  header('Access-Control-Allow-Origin: https://gwp.ovid:333');
+  header('Access-Control-Allow-Credentials: true');
+  header('Access-Control-Allow-Headers: X-WP-Nonce', false );
+}
+add_action('init','add_cors_http_header');
+// refresh browsers on saves
+function gwp24_browsersync_save() {
+  $args = [
+    'blocking' => false,
+    'sslverify' => false
+  ];
+  $request = wp_remote_get('https://gwp.ovid:333/__browser_sync__?method=reload', $args);
+}
+add_action('rest_after_insert_page', 'gwp24_browsersync_save', 10, 3);
+add_action('rest_after_insert_post', 'gwp24_browsersync_save', 10, 3);
+add_action('customize_save_after', 'gwp24_browsersync_save', 10, 3);
+add_action('wp_update_nav_menu', 'gwp24_browsersync_save', 10, 3);
+add_action('updated_option', 'gwp24_browsersync_save', 10, 3);
+```
+
+##### Bundle
+
+Even though WordPress now has built in a pretty robust CSS framework to make the Gutenberg editor feature rich, I still often use other frameworks ( Bootstrap/Tailwind/Bulma/Foundation ) because either they are more customizable, have more features, or because the site has some prior dependency.
+
+:::info[Idea 💡]
+
+Dear WordPress Team,  
+I think we should include a .scss file to make the Gutenberg Block editor `:root` css variables more customizable alongside a decent reference.  And while we're at it, let's talk about customizing the Gutenberg editor experience as well starting with `@media (prefers-color-scheme: dark)` since the white is almost blinding.
+
+:::
+
+Bundle Bootstrap (generic) and icons into `gulpfile.js`: ( recommend only adding the parts you need )
+
+```js
+function copy(cb) {
+  gulp.src([
+    './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
+    './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js.map'
+  ]) 
+    .pipe(gulp.dest('./js/'));
+  gulp.src([
+    './node_modules/animate.css/animate.css',
+    './node_modules/bootstrap/dist/css/bootstrap.min.css',
+    './node_modules/bootstrap/dist/css/bootstrap.min.css.map',
+    './node_modules/bootstrap-icons/font/bootstrap-icons.css'
+  ])
+    .pipe(gulp.dest('./css/'));
+  gulp.src([
+    './node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff',
+    './node_modules/bootstrap-icons/font/fonts/bootstrap-icons.woff2',
+  ])
+    .pipe(gulp.dest('./css/fonts/'));
+  console.log("Copy assets 📦 ");
+  cb();
+}
+```
+
+##### Build
+
+```js
+// gulpfile.js
+function mixin() {
+  return gulp.src('./css/*.scss', { sourcemaps: true })
+    .pipe(sass().on('error',sass.logError))
+    .pipe(gulp.dest('./css/'))
+    .pipe(browserSync.stream());
+}
+function build(cb) {
+  gulp.src([
+    './css/styles.css',
+    './css/custom.css'
+  ])
+    .pipe(concat('site.css'))    
+    .pipe(gulp.dest('./css/'));
+  gulp.src([
+    './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js',
+    './js/scripts.js'
+  ])
+    .pipe(concat('site.js'))
+    .pipe(sourcemaps.init())
+    .pipe(sourcemaps.write('.'))
+    .pipe(webpack(require("./webpack.config.js")))
+    .pipe(gulp.dest('./js/'));
+  console.log("Assets built 🔧 ");
+  cb();
+}
+
+// webpack.config.js
+const path = require("path")
+module.exports = {
+  entry: {
+    main: "./js/site.js",
+  },
+  output: {
+    filename: "site.min.js",
+    path: path.resolve(__dirname, "js"),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: "babel-loader",
+        options: {
+          presets: ["@babel/preset-env"],
+        },
+      },
+    ],
+  },
+}
+```
+
+#### Enqueue
+
+I enqueue the assets into the site and editor
+
+```php
+add_action( 'wp_enqueue_scripts', 'gwp24_enqueue_assets' );
+function gwp24_enqueue_assets() {
+  wp_enqueue_script( 'site-js', get_template_directory_uri() . '/js/site.js' );
+  wp_enqueue_style( 'site-css', get_template_directory_uri() . '/css/site.css');
+}
+add_action( 'after_setup_theme', 'gwp24_add_editor_styles' );
+function gwp24_add_editor_styles() {
+  add_theme_support( 'editor-styles' );
+  add_editor_style([
+    'site.css'
+  ]);
+}
+add_action( 'enqueue_block_editor_assets', 'gwp24_block_assets' );
+function gwp24_block_assets() {
+  wp_enqueue_style(
+    'gwp24-css',
+    get_stylesheet_directory_uri() . '/style-editor.css',
+    array( 'wp-edit-blocks' ),
+    time()
+  );
+  wp_enqueue_script(
+        'myguten-script',
+        get_template_directory_uri() . '/js/editor.js'
+  );
+}
+```
+
+
+### Javascript
+
+#### Debugging
+
+:::warning[Hangups]
+
+The biggest issues I had with the migration was dealing with the complexity of the React errors from Gutenberg particularly when dealing with the block errors.
+
+:::
+
+### Remote
+
+#### Database
+
+I always keep two versions of the database alongside one another on my machine. 
+
+#### Version Control
+
+I don't use a build directory like I would with a other JavaScript apps and prefer to manually transfer files instead of leaving the `.git/`  directory on the server because this generally avoids permission errors.
+
+#### Exclude Files
+
+I configure my FTP client to exclude the following highlighted lines from the directory sync because they're not needed in production.
+
+```sh
+// highlight-next-line
+┌── .configs(s)
+// highlight-next-line
+├── _static/
+├── css/
+│   ├── fonts/
+// highlight-next-line
+│   ├── lib.css
+│   ├── site.css
+│   ├── site.map
+// highlight-next-line
+│   └── site.scss
+├── docs/
+│   └── .pdf
+├── functions.php
+// highlight-next-line
+├── gulpfile.js
+├── js/
+│   ├── editor.js
+// highlight-next-line
+│   ├── lib.js
+// highlight-next-line
+│   ├── lib.js.map
+// highlight-next-line
+│   ├── scripts.js
+│   ├── site.js
+│   └── site.js.map
+├── inc/
+├── img/
+├── index.php
+// highlight-next-line
+├── node_modules/
+// highlight-next-line
+├── package.json
+├── parts/
+├── patterns/
+// highlight-next-line
+├── webpack.config.js
+└── {etc...}
+```
+
+## Custom Tips
+
+**Disable Openverse and Remote Patterns**
+
+```php
+remove_theme_support( 'core-block-patterns' );
+add_filter( 'should_load_remote_block_patterns', 'gwp24_disable_remote_patterns' );
+function gwp24_disable_remote_patterns() {
+	return false;
+}
+
+add_filter(
+  'block_editor_settings_all',
+  function( $settings ) {
+    $settings['enableOpenverseMediaCategory'] = false;
+    return $settings;
+  },
+  10
+);
+```
+
+
+
+---
+#### Notes
+
+- https://css-tricks.com/wordpress-global-styles-reference-tables/
+- https://developer.wordpress.org/news/2023/12/a-walk-through-tutorial-on-using-create-block-theme-plugin/
+- https://perko.dev/blog/post/2022-02-21-understanding-how-gutenberg-saves-data
+- https://github.com/WordPress/gutenberg/issues/26544
+- https://developer.wordpress.org/themes/templates/template-hierarchy/#page-hierarchy
+- https://github.com/WordPress/wordpress-develop/
+
+
+#### References
+
+1. https://wordpress.org/about/roadmap/
+2. Figma - https://www.figma.com/file/AlYr03vh4dVimwYwQkTdf6/Twenty-Twenty-Four?type=design&node-id=119-543&mode=design
+3. Something else - 
+
+---
+
+[^1]: WordPress _Roadmap_ - https://wordpress.org/about/roadmap/
+[^1]: Automattic - _Introducing Twenty Twenty-Four_ - https://automattic.design/2023/11/22/introducing-twenty-twenty-four/
+[^2]: Bill Erickson - https://www.billerickson.net/hybrid-wordpress-theme-starter/
+[^3]: https://developer.wordpress.org/block-editor/explanations/architecture/styles/
+[^4]: https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/

docs/host/WordPress.md

@@ -1,10 +1,12 @@
 # WordPress
 
-## About 
+## About
+
 I've used WordPress for hundreds of projects and I think I owe a certain debt of gratitude. I started learning WordPress in the early days of the project. I keep a WordPress powered testing site up @ https://wp.davidwindham.com which contains my notes and code for WordPress projects.
 
-## Log 
+## Log
 
+- 23/12/10 - full site editing block theme [docs](wordpress-block) & [/posts/block-theme](/posts/block-theme)
 - 23/07/17 - fix Yoast errors from missing database table 'inclusive_language_score' -  https://wordpress.org/support/topic/inclusive-language-option/
 - 23/06/20 - migrate a couple sites previously using a theme with a custom editor and a lot of custom short codes to the block editor.
 
@@ -17,21 +19,20 @@ I've used WordPress for hundreds of projects and I think I owe a certain debt of
 
 ## Repos
 
-* [https://github.com/WordPress/wordpress-develop](https://github.com/WordPress/wordpress-develop)
+[https://github.com/WordPress/wordpress-develop](https://github.com/WordPress/wordpress-develop)
 
 ## Docs
 
-* Docs - [https://developer.wordpress.com/docs/](https://developer.wordpress.com/docs/)
-* Reference - [https://developer.wordpress.org/reference/](https://developer.wordpress.org/reference/)
-* Block Editor - [https://developer.wordpress.org/block-editor/](https://developer.wordpress.org/block-editor/)
-* API/Console - [https://developer.wordpress.com/docs/api/console/](https://developer.wordpress.com/docs/api/console/)
+- Docs - [https://developer.wordpress.com/docs/](https://developer.wordpress.com/docs/)
+- Reference - [https://developer.wordpress.org/reference/](https://developer.wordpress.org/reference/)
+- Block Editor - [https://developer.wordpress.org/block-editor/](https://developer.wordpress.org/block-editor/)
+- API/Console - [https://developer.wordpress.com/docs/api/console/](https://developer.wordpress.com/docs/api/console/)
 
+---
 
 ## Functions
 
-#####
-
-##### Determine the current Taxonomy and list it's children:
+###### Determine the current Taxonomy and list it's children:
 
 ```php
 <?php
@@ -55,7 +56,7 @@ if ( !empty( $term_children ) && !is_wp_error( $term_children ) ) { ?>
 <?php } ?>
 ```
 
-##### cleanup the head:
+###### cleanup the head:
 ```php
 <?php
 remove_action('wp_head', 'index_rel_link' );
@@ -95,7 +96,8 @@ add_action( 'init', 'disable_emojis' );
 
 ```
 
-##### add open graph meta to head:
+###### add open graph meta to head:
+
 ```php
 <?php
 
@@ -190,16 +192,16 @@ add_shortcode( 'video', 'dw_video_embed' );
 ```
 
 
-##### security tips:
+###### security tips:
 * [https://github.com/ethicalhack3r/wordpress_plugin_security_testing_cheat_sheet](https://github.com/ethicalhack3r/wordpress_plugin_security_testing_cheat_sheet)
 
-### WordPress Plugin Security Testing Cheat Sheet
+#### WordPress Plugin Security Testing Cheat Sheet
 
 This cheat sheet was compiled by [Dewhurst Security](https://dewhurstsecurity.com "Dewhurst Security") to record the knowledge gained when testing WordPress plugins for security issues for our clients. The security documentation provided by WordPress and found online for plugin security is sparse, outdated or unclear. This cheat sheet is intended for Penetration Testers who audit WordPress plugins or developers who wish to audit their own WordPress plugins.
 
 This is a living document, feedback in the form of Issues or Pull Requests is very much welcomed.
 
-#### Cross-Site Scripting (XSS)
+##### Cross-Site Scripting (XSS)
 
 Check if the following global PHP variables are echo'd to pages, or stored in the database and echo'd at a later time without first being sanitised or output encoded.
 
@@ -213,9 +215,9 @@ Check if the following global PHP variables are echo'd to pages, or stored in th
 
 _(Note: the list of sources above is not extensive nor complete)_
 
-#### Cross-Site Scripting (XSS) Tips
+##### Cross-Site Scripting (XSS) Tips
 
-##### Unsafe API functions
+###### Unsafe API functions
 
 The following functions can cause XSS if not secured as they use the PHP_SELF variable:
 
@@ -229,7 +231,7 @@ References:
 [https://developer.wordpress.org/reference/functions/add_query_arg/](https://developer.wordpress.org/reference/functions/add_query_arg/)
 [https://developer.wordpress.org/reference/functions/remove_query_arg/](https://developer.wordpress.org/reference/functions/remove_query_arg/)
 
-##### DISALLOW_UNFILTERED_HTML
+###### DISALLOW_UNFILTERED_HTML
 
 When doing dynamic testing for XSS the following setting in the wp-config.php file may reduce false positive results as it prevents administrative and editor users from being able to embed/execute JavaScript/HTML, which by default they are permitted to do.
 
@@ -237,7 +239,7 @@ When doing dynamic testing for XSS the following setting in the wp-config.php fi
 define( 'DISALLOW_UNFILTERED_HTML', true );
 ```
 
-### SQL Injection
+#### SQL Injection
 
 Unsafe API methods (require sanitising/escaping):
 
@@ -262,7 +264,7 @@ Note: Before WordPress 3.5 ```$wpdb->prepare``` could be used insecurely as you
 
 ```$wpdb->query( $wpdb->prepare( "INSERT INTO table (user, pass) VALUES ('$user', '$pass')" ) );```
 
-#### SQL Injection Tips
+##### SQL Injection Tips
 
 Unsafe escaping ('securing') API methods:
 
@@ -271,7 +273,7 @@ Unsafe escaping ('securing') API methods:
 - ```esc_like()``` same as above
 - ```like_escape()``` same as above
 
-#### Displaying/hiding SQL errors:
+##### Displaying/hiding SQL errors:
 
 ```
 <?php $wpdb->show_errors(); ?>
@@ -279,13 +281,13 @@ Unsafe escaping ('securing') API methods:
 <?php $wpdb->print_error(); ?>
 ```
 
-### File Download
+#### File Download
 
 - ```file()```
 - ```readfile()```
 - ```file_get_contents()```
 
-### File Inclusion
+#### File Inclusion
 
 - ```include()```
 - ```require()```
@@ -293,67 +295,67 @@ Unsafe escaping ('securing') API methods:
 - ```require_once()```
 - ```fread()```
 
-### File Manipulation
+#### File Manipulation
 
 - ```unlink()``` delete arbitrary files
 
-### File Upload
+#### File Upload
 
 - ```sanitize_file_name()``` can create valid PHP files, turns `test.(php)` into `test.php`
 
-### PHP Object Injection
+#### PHP Object Injection
 
 - ``` unserialize()``` any raw user input passed to this function is probably exploitable, if serialized() first, probably not vulnerable
 
-### PHP Object Injection Tips
+#### PHP Object Injection Tips
 
 Use this [simple Burp Suite extention](https://gist.github.com/ethicalhack3r/7c2618e5fffd564e2734e281c86a2c9b) along with the [PHP Object Injection WordPress Plugin](https://www.pluginvulnerabilities.com/2017/07/24/wordpress-plugin-for-use-in-testing-for-php-object-injection/) created by White Fir Design.
 
-### Command Execution
+#### Command Execution
 
 - ```system()```
 - ```exec()```
 - ```passthru()```
 - ```shell_exec()```
 
-### PHP Code Execution
+#### PHP Code Execution
 
 - ```eval()```
 - ```assert()```
 - ```preg_replace()``` dangerous "e" flag deprecated since PHP >= 5.5.0 and removed in PHP >= 7.0.0.
 
-### Authorization
+#### Authorization
 
 - ```is_admin()``` does not check if the user is authenticated as administrator, only checks if page displayed is in the admin section, can lead to auth bypass if misused.
 - ```is_user_admin()``` same as above
 - ```current_user_can()``` used for checking authorisation. This is what should be used to check authorisation.
 - ```add_action( 'wp_ajax_nopriv_``` permits non-authenticated users to use the AJAX function (https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)).
 
-### Open Redirect
+#### Open Redirect
 
 - ```wp_redirect()``` function can be used to redirect to user supplied URLs. If user input is not sanitised or validated this could lead to Open Redirect vulnerabilities.
 
-### Cross-Site Request Forgery (CSRF)
+#### Cross-Site Request Forgery (CSRF)
 
 - ```wp_nonce_field()``` adds CSRF token to forms
 - ```wp_nonce_url()``` adds CSRF token to URL
 - ```wp_verify_nonce()``` checks the CSRF token validity server side
 - ```check_admin_referer()``` checks the CSRF token validity server side and came from admin screen
 
-### SSL/TLS
+#### SSL/TLS
 
 - ```CURLOPT_SSL_VERIFYHOST``` if set to 0 then does not check name in host certificate
 - ```CURLOPT_SSL_VERIFYPEER``` if set to FALSE then does not check if the certificate (inc chain), is trusted. A Man-in-the-Middle (MitM) attacker could use a self-signed certificate.
 - Check if HTTP is used to communicate with backend servers or APIs. A grep for "http://" should be sufficient.
 
-### Priviledge Escalation
+#### Priviledge Escalation
 
 - ```update_option()``` if user input is sent unvalidated, it could allow an attacker to update arbitrary WordPress options.
 - ```do_action()``` if user input is sent unvalidated, it could allow an attacker to update arbitrary WordPress actions.
 
 See: https://www.wordfence.com/blog/2018/11/privilege-escalation-flaw-in-wp-gdpr-compliance-plugin-exploited-in-the-wild/
 
-### Automated Static Code Analysis
+#### Automated Static Code Analysis
 
 - ```WordPress-Coding-Standards``` contains some security rules.
 
@@ -365,7 +367,9 @@ Example:
 
 See: https://github.com/WordPress-Coding-Standards/WordPress-Coding-Standards
 
-##### Further reading/references:
+---
+
+## References
 
 1. [https://developer.wordpress.org/plugins/security/](https://developer.wordpress.org/plugins/security/)
 2. [https://make.wordpress.org/plugins/2013/11/24/how-to-fix-the-intentionally-vulnerable-plugin/](https://make.wordpress.org/plugins/2013/11/24/how-to-fix-the-intentionally-vulnerable-plugin/)

docs/index.md

@@ -7,6 +7,8 @@ slug: /
 
 I use this library of documents as a quick reference to find technical answers, links to other documentation, configurations, keyboard shortcuts, and any other random technical stuff I might forget.  It's my version of Hansel and Gretel's breadcrumbs.  And because I tend to add more than I remove, I'm leaving this reminder to do some trimming every now and then so that the docs will remain concise and relevant. Here's a markdown graph of these docs.
 
+**23/12/10** - I'm just going to remove 🗑️ old docs as I am no longer using them so I can keep the amount of documentation here slim ( inspired by the recent post @ [/subtractive-process](/posts/subtractive-process) ). I'm also adding one the yet to need or have references.
+
 ![docs-map](/img/docs.png)
 
 ---
@@ -32,8 +34,6 @@ I use this library of documents as a quick reference to find technical answers,
 
 ## TOC
 
-**23/12/10** - I'm just going to remove 🗑️ old docs as I am no longer using them so I can keep the amount of documentation here slim ( inspired by the recent post @ [/posts/subtractive-process](/posts/subtractive-process) ). I'm also adding one the yet to need or have references.
-
 ---
 
 ### Computers
@@ -95,6 +95,7 @@ Django
 | [PHP](lang/PHP)
 | [Python](lang/Python)
 | pip
+| R
 | [Ruby](lang/Ruby)
 | rbenv
 | [Rust](lang/Rust)

lists/index.md

@@ -7,26 +7,22 @@ toc_min_heading_level: 2
 
 # Lists
 
-#### awesome-windhamdavid [![](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome) 
+## About
 
-#### A list of lists for non-technical stuff.
+**A list of lists for non-technical stuff.**
 
-This page was originally published at [https://davidawindham.com/listing-lists/](https://davidawindham.com/listing-lists/). I've moved this old repo into this TIL project to simplify. It was inspired by the first awesome list that Sindre Sorhus created which you can read about on the original post. I'm using it as a place to keep some non-technical lists.
+**21/12/20** - This page was originally published at [https://davidawindham.com/listing-lists/](https://davidawindham.com/listing-lists/)<sub>1</sub>. I've moved this old repo into this TIL project to simplify. It was inspired by the first awesome list that Sindre Sorhus created which you can read about on the original post. I'm using it as a place to keep some non-technical lists.
 
-**23/12/08** - Reorganized the sidebar navigation to seperate out the most commonly edited lists so I could prioritize and get to them faster. 
+**23/12/08** - Reorganized the sidebar navigation to separate out the most commonly edited lists so I could prioritize and get to them faster.
 
-
-
-## TOC 
+## TOC
 
 [now](now/now.md)
 | [next](next.md)
 | [todo](todo)
 | [grocery](grocery.md)
 | [shopping](shopping.md)
-
-
-[art](art/art.md)
+// [art](art/art.md)
 | [concepts](concepts.md)
 | [design](design.md)
 | [feeds](feeds.md)
@@ -57,4 +53,12 @@ This page was originally published at [https://davidawindham.com/listing-lists/]
 - 23/05/12 - [Grocery](grocery) and [Shopping](shopping)
 - 22/11/16 - [Music](art/music#playlists), [Feeds](feeds), and [Tweets](tweets)
 - 22/07/18 - [Up next](next) as a replacement for bookmarks
-- 22/04/06 - [Words](words), [Quotes](quotes), [Concepts](concepts), and [Trivia](trivia)
+- 22/04/06 - [Words](words), [Quotes](quotes), [Concepts](concepts), and [Trivia](trivia)
+
+---
+
+## References
+
+1. _Listing Lists_ - https://davidawindham.com/listing-lists/
+2. Sindre Sorhus - _Awesome Lists_ - https://github.com/sindresorhus/awesome
+

notes/index.md

@@ -5,21 +5,6 @@ slug: /
 
 # Notes
 
-#### I wrote an essay about this page @ [https://davidawindham.com/a-second-brain/](https://davidawindham.com/a-second-brain/)
-
-### About
-
-I've separated the **technical** to [Docs](/docs/) and the **non-technical** to [Notes](index.md). As always, this Notes page started with me trying to solve something. It really bothers me for anything to take away my attention. In this case, I was trying to keep my Apple TV home screen clean so I don't have to see or surf through offers of other stuff to watch.  I curate an 'up next' list and I usually make notes that sync between my devices when someone mentions a movie or show. I usually handle this with 'quick Notes' that sync between devices. That mostly works, but the problem I'd like to have them all in one place so that I can archive and search what I've already watched much the same way I database my music listening habits. This will give me a simple searchable place to store it all without any complex APIs, databases, or whatnot. It's a work in progress :sweat_smile:.
-
-What is a personal knowledge manager? And How could I possibly organize these notes? Some folks refer to it as a Second Brain - https://maggieappleton.com/basb & https://aliabdaal.com/how-to-build-a-second-brain-271393/  
-
-I like to use Apple Notes and quick mental notes and I started using the [Obsidian](https://obsidian.md) markdown editor for looking at a pile of them on my computer. I noticed is that it's an easy way to map out some sense of order from a set of notes and documents.  The more I looked into it, I noticed that there is a whole subset of folks who are into **PKMs** ( **Personal Knowledge Management** ).  Evidently, I've been doing it for a while now since I'm accustomed to making my own documentation as I build software and websites.  As I was setting up my folder directories on a new computer ( [Ovid](/docs/computers/ovid) ), I noticed that it might be helpful to use the same approach to other aspects of my life so I created another set of documents here for the **non-technical** stuff.
-
-I generally use four lists of reminders to keep up with everything. Groceries, Short-Term, Mid-Term, and Long Term. I put everything on there and I can conveniently access and edit them from any device. For every project I build I keep a _notes.txt file containing all of the pertinent info.  I'm going to merge my old note into this site, so I have them all in one place. **Reminder**: try to match up my existing docs, notes, reminders, and start pages workflow.
-
-
-
-
 ## TOC
 
 [art](art/art.md)
@@ -29,19 +14,13 @@ I generally use four lists of reminders to keep up with everything. Groceries, S
 | [golf](golf.md)
 | [health](health.md)
 | [house](house/house.md)
-| [house/build](house/build.md)
 | [tennis](tennis.md)
 | [travel](travel.md)
 | [work](work/work.md)
 
-
-... It's pretty hard wrapping your head around creating a Table of Contents for a knowledge base incorporating everything except technology. I'm just going to start adding an outline of potential topics and link to the pages as they are created.
-
----
-
 ## Log
 
-- 23/11/05 - [art/studio](/notes/art/studio)
+- 23/11/05 - [house/studio](/notes/house/studio)
 - 23/10/20 - [house/build](/notes/house/build)
 - 23/08/25 - [tennis](/notes/tennis)
 - 23/08/19 - [house/build](/notes/house/build)
@@ -53,38 +32,52 @@ I generally use four lists of reminders to keep up with everything. Groceries, S
 - 23/05/14 - [tennis season](/notes/tennis)
 - 23/05/10 - [travel dates](/notes/travel)
 
+---
+
+## About
+
+I wrote an essay about this page @ [**davidawindham.com/a-second-brain/**](https://davidawindham.com/a-second-brain/)
+
+**22/05/07** - I've separated the **technical** to [Docs](/docs/) and the **non-technical** to [Notes](index.md). As always, this Notes page started with me trying to solve something. It really bothers me for anything to take away my attention. In this case, I was trying to keep my Apple TV home screen clean so I don't have to see or surf through offers of other stuff to watch.  I curate an 'up next' list and I usually make notes that sync between my devices when someone mentions a movie or show. I usually handle this with 'quick Notes' that sync between devices. That mostly works, but the problem I'd like to have them all in one place so that I can archive and search what I've already watched much the same way I database my music listening habits. This will give me a simple searchable place to store it all without any complex APIs, databases, or whatnot. It's a work in progress :sweat_smile:.
+
+What is a personal knowledge manager? And How could I possibly organize these notes? Some folks refer to it as a Second Brain - https://maggieappleton.com/basb & https://aliabdaal.com/how-to-build-a-second-brain-271393/  
+
+I like to use Apple Notes and quick mental notes and I started using the [Obsidian](https://obsidian.md) markdown editor for looking at a pile of them on my computer. I noticed is that it's an easy way to map out some sense of order from a set of notes and documents.  The more I looked into it, I noticed that there is a whole subset of folks who are into **PKMs** ( **Personal Knowledge Management** ).  Evidently, I've been doing it for a while now since I'm accustomed to making my own documentation as I build software and websites.  As I was setting up my folder directories on a new computer ( [Ovid](/docs/computers/ovid) ), I noticed that it might be helpful to use the same approach to other aspects of my life so I created another set of documents here for the **non-technical** stuff.
+
+I generally use four lists of reminders to keep up with everything. Groceries, Short-Term, Mid-Term, and Long Term. I put everything on there and I can conveniently access and edit them from any device. For every project I build I keep a _notes.txt file containing all of the pertinent info.  I'm going to merge my old note into this site, so I have them all in one place. **Reminder**: try to match up my existing docs, notes, reminders, and start pages workflow. ... It's pretty hard wrapping your head around creating a Table of Contents for a knowledge base incorporating everything except technology. I'm just going to start adding an outline of potential topics and link to the pages as they are created.
+
+---
+
 ## References
-https://en.wikipedia.org/wiki/Ontology_(information_science)>  
-https://en.wikipedia.org/wiki/Information_architecture  
-https://en.wikipedia.org/wiki/Knowledge_engineering  
-https://en.wikipedia.org/wiki/Knowledge_management  
-https://en.wikipedia.org/wiki/Knowledge_retrieval  
-https://en.wikipedia.org/wiki/Information_retrieval  
-https://en.wikipedia.org/wiki/Idea_networking  
-https://en.wikipedia.org/wiki/Metacognition  
-https://en.wikipedia.org/wiki/Semantic_network  
-https://en.wikipedia.org/wiki/Knowledge_representation_and_reasoning  
-https://en.wikipedia.org/wiki/Mind_map  
-https://en.wikipedia.org/wiki/Hierarchy  
-https://en.wikipedia.org/wiki/Concept_map  
-https://en.wikipedia.org/wiki/Group_concept_mapping  
-https://en.wikipedia.org/wiki/Modeling_language  
-https://en.wikipedia.org/wiki/Hypertext  
-https://en.wikipedia.org/wiki/HTML  
-https://en.wikipedia.org/wiki/Hyperlink  
-https://en.wikipedia.org/wiki/Metadata  
-https://en.wikipedia.org/wiki/Semantic_Web  
-https://en.wikipedia.org/wiki/Web_Ontology_Language  
-https://en.wikipedia.org/wiki/Resource_Description_Framework  
-https://en.wikipedia.org/wiki/RDF_Schema  
-https://en.wikipedia.org/wiki/Simple_Knowledge_Organization_System  
-https://en.wikipedia.org/wiki/Semantically-Interlinked_Online_Communities  
-https://en.wikipedia.org/wiki/JSON-LD  
-https://en.wikipedia.org/wiki/Personal_knowledge_management  
-https://en.wikipedia.org/wiki/Personal_wiki  
-https://en.wikipedia.org/wiki/Personal_information_manager  
-https://en.wikipedia.org/wiki/Personal_knowledge_base  
-https://en.wikipedia.org/wiki/Personal_digital_assistant  
-https://en.wikipedia.org/wiki/Google_Knowledge_Graph  
-https://en.wikipedia.org/wiki/Graph_drawing  
-https://markmap.js.org/ 
+- Ontology - https://en.wikipedia.org/wiki/Ontology_(information_science)  
+- Personal knowledge management - https://en.wikipedia.org/wiki/Personal_knowledge_management  
+- Personal wiki - https://en.wikipedia.org/wiki/Personal_wiki  
+- Personal information manager - https://en.wikipedia.org/wiki/Personal_information_manager  
+- Personal knowledge base - https://en.wikipedia.org/wiki/Personal_knowledge_base  
+- Personal digital assistant - https://en.wikipedia.org/wiki/Personal_digital_assistant  
+- Knowledge engineering - https://en.wikipedia.org/wiki/Knowledge_engineering  
+- Knowledge management - https://en.wikipedia.org/wiki/Knowledge_management  
+- Knowledge retrieval - https://en.wikipedia.org/wiki/Knowledge_retrieval  
+- Knowledge representation - https://en.wikipedia.org/wiki/- Knowledge_representation_and_reasoning  
+- Information retrieval - https://en.wikipedia.org/wiki/Information_retrieval  
+- Information architecture - https://en.wikipedia.org/wiki/Information_architecture 
+- Semantic - integration - https://en.wikipedia.org/wiki/Semantic_integration
+- Idea networking - https://en.wikipedia.org/wiki/Idea_networking  
+- Metacognition - https://en.wikipedia.org/wiki/Metacognition  
+- Semantic network - https://en.wikipedia.org/wiki/Semantic_network  
+- Mind map - https://en.wikipedia.org/wiki/Mind_map  
+- Concept map - https://en.wikipedia.org/wiki/Concept_map  
+- Group concept mapping - https://en.wikipedia.org/wiki/Group_concept_mapping  
+- Graph drawing - https://en.wikipedia.org/wiki/Graph_drawing
+- Modeling_language - https://en.wikipedia.org/wiki/Modeling_language  
+- Hypertext  - https://en.wikipedia.org/wiki/Hypertext  
+- Hyperlink - https://en.wikipedia.org/wiki/Hyperlink
+- Metadata - https://en.wikipedia.org/wiki/Metadata  
+- Semantic Web - https://en.wikipedia.org/wiki/Semantic_Web  
+- Web Ontology Language - https://en.wikipedia.org/wiki/Web_Ontology_Language  
+- Resource Description Framework - https://en.wikipedia.org/wiki/Resource_Description_Framework  
+- RDF_Schema - https://en.wikipedia.org/wiki/RDF_Schema  
+- Simple Knowledge Organization System - https://en.wikipedia.org/wiki/Simple_Knowledge_Organization_System  
+- Semantically-Interlinked Online Communities - https://en.wikipedia.org/wiki/Semantically-Interlinked_Online_Communities  
+- JSON LD - https://en.wikipedia.org/wiki/JSON-LD
+- Linked data - https://en.wikipedia.org/wiki/Linked_data

posts/2023-12-21-posts.md

@@ -1,7 +1,7 @@
 ---
-title: Hybrid Block Theme
-slug: hybrid-block
-description: Today I Learned
+title: Block Theme Migration
+slug: block-theme-migration
+description: Today I learned a decent approach to doing a multi-step migration from a static site to classic WordPress theme to a hybrid theme to a full site editing block theme.
 <!--- authors:
   - name: David Windham
     title: Something Else
@@ -10,52 +10,81 @@ description: Today I Learned
 tags: []
 keywords: [WordPress, Gutenberg]
 image: https://davidawindham.com/wp-content/themes/daw/img/opengraph_image.jpg
-hide_table_of_contents: true
+hide_table_of_contents: false
 draft: true
 ---
 
-Today I finalized a decent approach to doing a multi-step migration from a static site to classic WordPress theme to a hybrid theme to a full site editing block theme. 
+Today I learned a decent approach to doing a multi-step migration from a static site to classic WordPress theme to a hybrid theme to a full site editing block theme.
 
 <!--truncate-->
 
-The notes I made along the way turned into this post so I figured I'd share for anyone interested in doing something similar. 
+The notes I made along the way turned into this post so I figured I'd share for anyone interested in doing something similar. The existing site was static because I like them. They're performant and easy to maintain. I've noticed that half of the sites I have running under a content management system rarely if ever have updates or changes made to them. In that regard, I think it's just about control. 
 
-#### Static
+## Setup
 
-The site was static because I like them. They're performant and easy to maintain. I've noticed that half of the sites I have running under a content management system rarely if ever have updates made to them.
+<table>
+<tr>
+<th>Static 👉🏼</th>
+<th>Hybrid 👉🏼</th>
+<th>Block ✨</th>
+</tr>
+<tr>
+<td>
 
 ```sh
-┌── .configs
+┌── .config(s)
 ├── css/
-│   ├── fonts/icons/
-│   ├── library.css
-│   ├── css.scss
+│   ├── fonts/
+│   ├── lib.css
 │   ├── site.css
-│   └── site.css.map
+│   ├── css.map
+│   └── site.scss
 ├── docs/
 │   └── .pdf
+├── gulpfile.js
+├── img/
+├── index.html
 ├── js/
-│   ├── library.js
-│   ├── library.js.map
+│   ├── lib.js
+│   ├── lib.js.map
 │   ├── scripts.js
 │   ├── site.js
-│   └── site.js.map
-├── img/
-├── index.html
-├── gulpfile.js
+│   └── js.map
 ├── package.json
 ├── robots.txt
 └── sitemap.xml
-
 ```
+</td>
+<td>
 
+```sh
+┌── .configs(s)
+├── css/
+│   ├── fonts/
+├── docs/
+├── gulpfile.js 
+├── inc/
+├── img/
+├── index.php
+├── js/
+│   ├── lib.js
+│   ├── lib.js.map
+│   ├── scripts.js
+│   ├── site.js
+│   └── js.map
+├── package.json
+├── page(s).php
+├── robots.txt
+├── sitemap.xml
+└── style.css
 
-#### Hybrid
+```
 
-The hybrid site has
+</td>
+<td>
 
 ```sh
-┌── .configs
+┌── .configs(s)
 ├── css/
 │   ├── fonts/
 ├── docs/
@@ -64,14 +93,21 @@ The hybrid site has
 ├── index.html
 ├── gulpfile.js
 ├── package.json
+├── parts/
+│   ├── footer.html
+│   ├── header.html
+│   └── page.html
+├── patterns/
 ├── robots.txt
 ├── sitemap.xml
 └── style.css
 
 ```
+</td>
+</tr>
+</table>
 
-
-#### Block with Full Site Editing
+### Full Site Editing
 
 
 Notes on block theme migrations[^1]another[^2]and another[^3] and another[^4]
@@ -79,7 +115,7 @@ Notes on block theme migrations[^1]another[^2]and another[^3] and another[^4]
 
 ---
 
-#### Aside
+## Aside
 
 Because there are already thousand of mostly shite resources floating around, I had to mostly go directly to the source documention. And since I noticed that some of it wasn't completely up to date, I've been scanning the `#core-dev` chat and noticed this comment: 
 

sidebars.js

@@ -129,7 +129,22 @@ module.exports = {
         'host/Shaarli',
         'host/Siege-sproxy',
         'host/Webmin',
-        'host/WordPress',
+        {
+          type:'category',
+          label:'WordPress',
+          collapsible: true,
+          link: {      
+            type:'doc',
+            id:'host/WordPress',
+          },
+          items: [
+            {
+              type:'doc',
+              id: 'host/WordPress-Block',
+              label: ' Block Theme',
+            }
+          ]
+        },
         'host/Zammad',
       ],
     },

sidebarsnotes.js

@@ -30,10 +30,6 @@ module.exports = {
             'art/education/design',
             'art/education/media',
           ],
-        },
-        {
-          type:'doc',
-          id:'art/studio',
         }
       ],
     },
@@ -79,6 +75,7 @@ module.exports = {
       },
       items: [
         'house/build',
+        'house/studio'
       ]
     },
     {