Minimal object containing this commit
Commit Diff
commit c00ceac0dfabf06fc0319400823ccbaa9b3ae6b6002b304fbf1020c8df44220c
Author: yihanwu1024 <yihanwu1024>
Date: Wed Nov 23 00:00:00 2022 +0000
create article describing how I hacked WordPress Gutenburg for benefit
diff --git a/3b92d92e8ee8159c58bebf8f3faadbbdf0fc103ae41de2bdfa164741552426be b/3b92d92e8ee8159c58bebf8f3faadbbdf0fc103ae41de2bdfa164741552426be
new file mode 100644
index 0000000..f900e42
--- /dev/null
+++ b/3b92d92e8ee8159c58bebf8f3faadbbdf0fc103ae41de2bdfa164741552426be
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<figure xmlns="http://docbook.org/ns/docbook" xml:id="3b92d92e8ee8159c58bebf8f3faadbbdf0fc103ae41de2bdfa164741552426be">
+<title>The editor only allows you to set a legitimate number, at least on the front end.</title>
+<mediaobject>
+<imageobject>
+<imagedata fileref="cde499b03d136c4968fac496d21f067f10d6d4ea5e5e1c72dda70a3568227023"/>
+</imageobject>
+</mediaobject>
+</figure>
diff --git a/65cdebbc5a685ba29129e1aea761d2aa69c863cd7b907fa28275d3e27060c92e b/65cdebbc5a685ba29129e1aea761d2aa69c863cd7b907fa28275d3e27060c92e
new file mode 100644
index 0000000..b1f05e9
--- /dev/null
+++ b/65cdebbc5a685ba29129e1aea761d2aa69c863cd7b907fa28275d3e27060c92e
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<section xmlns="http://docbook.org/ns/docbook" xmlns:xlink="http://www.w3.org/1999/xlink" xml:id="65cdebbc5a685ba29129e1aea761d2aa69c863cd7b907fa28275d3e27060c92e">
+<title>Hack a JSON in a PHP file</title>
+<para>Open <literal>templates/home.html</literal> or <literal>templates/index.html</literal>.
+Each by default contains a query loop we are interested in:</para>
+<programlisting><!-- wp:query {"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":true},"displayLayout":{"type":"flex","columns":3},"align":"wide","layout":{"type":"constrained"}} --></programlisting>
+<para>Note that the number of <literal>columns</literal>, <literal>3</literal>, is hardcoded in this theme template file.
+You can change it, but it just generates future pages with that fixed number, not the responsive columns we wanted.
+It is also extremely interesting to see such a customization JSON hardcoded in PHP.</para>
+<include xmlns="http://www.w3.org/2001/XInclude" href="3b92d92e8ee8159c58bebf8f3faadbbdf0fc103ae41de2bdfa164741552426be"/>
+<para>So I read <link xlink:href="https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/post-template/index.php">the source code of the page generator</link> (<link xlink:href="https://github.com/WordPress/gutenberg/blob/959c00f6eb78965bd1321443732242503a3db1c5/packages/block-library/src/post-template/index.php">snapshot</link>).
+Below line 65:</para>
+<programlisting>$classnames = ''; if ( isset( $block->context['displayLayout'] ) && isset( $block->context['query'] ) ) { if ( isset( $block->context['displayLayout']['type'] ) && 'flex' === $block->context['displayLayout']['type'] ) { $classnames = "is-flex-container columns-{$block->context['displayLayout']['columns']}"; } }</programlisting>
+<para>This code appends the value of <literal>columns</literal> to the string <literal>"columns-"</literal> to form a CSS class name.
+The CSS class itself is defined in a non-customizable CSS file in Gutenburg, served to the client directly, in order to manipulate the width of child elements.</para>
+<para>It is hilarious to see this code.
+Type checking is not the major point here, but that it concatenates CSS classes together so the client can render a <emphasis>fixed</emphasis> count of columns.
+For modern web applications, the server never decides any adaptive layout; that is the task of the browser.</para>
+<para>In order to apply our own style, we just need to change the <literal>columns</literal> value to <literal>"n"</literal> (a string!), and the resulting CSS class name becomes <literal>columns-n</literal>.
+Then we write a custom CSS file to apply desired styles to the target elements.</para>
+</section>
diff --git a/a0bcae7c61fb33f5113f2d94da78209bb82c183c1fe92dfe6d03fee5e1679360 b/a0bcae7c61fb33f5113f2d94da78209bb82c183c1fe92dfe6d03fee5e1679360
new file mode 100644
index 0000000..e6f3bec
--- /dev/null
+++ b/a0bcae7c61fb33f5113f2d94da78209bb82c183c1fe92dfe6d03fee5e1679360
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<section xmlns="http://docbook.org/ns/docbook" xmlns:xlink="http://www.w3.org/1999/xlink" xml:id="a0bcae7c61fb33f5113f2d94da78209bb82c183c1fe92dfe6d03fee5e1679360">
+<title>Custom CSS</title>
+<para>You need to add this globally via <literal>/wp-admin/customize.php</literal>.</para>
+<para>This defines specifically the <literal>columns-n</literal> class.</para>
+<programlisting>@media (min-width: 600px) { .wp-block-post-template.is-flex-container.columns-n>li { width: calc(50% - 0.625em); } } @media (min-width: 800px) { .wp-block-post-template.is-flex-container.columns-n>li { width: calc(33.33333% - 0.83333em); } }</programlisting>
+<para>No attribution is needed for this short snippet.</para>
+</section>
diff --git a/abed135dad2c999b54e2224b5aca0c9c4c414366b45bb025f9a085c73d5be78b b/abed135dad2c999b54e2224b5aca0c9c4c414366b45bb025f9a085c73d5be78b
new file mode 100644
index 0000000..134d329
--- /dev/null
+++ b/abed135dad2c999b54e2224b5aca0c9c4c414366b45bb025f9a085c73d5be78b
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<section xmlns="http://docbook.org/ns/docbook" xmlns:xlink="http://www.w3.org/1999/xlink" xml:id="abed135dad2c999b54e2224b5aca0c9c4c414366b45bb025f9a085c73d5be78b">
+<title>Extra</title>
+<para>I also implemented a CSS <literal>@media</literal> query-based dark theme that responds to the system color scheme.
+Gutenburg cannot do this by itself; there is no way to delegate a color scheme as the dark one.
+So I wrote my CSS again.</para>
+<para>Changes to the Gutenburg theme variable did not apply to the main menu, because the components specify yet another set of colors.
+It was ultimately overridden.</para>
+<para>The code, although trivial:</para>
+<programlisting>@media screen and (prefers-color-scheme: dark) { body { --wp--preset--color--base: #000000; --wp--preset--color--contrast: #ffffff; } } .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); }</programlisting>
+</section>
diff --git a/cde499b03d136c4968fac496d21f067f10d6d4ea5e5e1c72dda70a3568227023 b/cde499b03d136c4968fac496d21f067f10d6d4ea5e5e1c72dda70a3568227023
new file mode 100644
index 0000000..473a0f4
diff --git a/ebef1b425e9fa15c85b678539b9d0bf41b5ba1781ff95470172c30020167ce60 b/ebef1b425e9fa15c85b678539b9d0bf41b5ba1781ff95470172c30020167ce60
new file mode 100644
index 0000000..8fa2743
--- /dev/null
+++ b/ebef1b425e9fa15c85b678539b9d0bf41b5ba1781ff95470172c30020167ce60
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<article xmlns="http://docbook.org/ns/docbook" xml:id="ebef1b425e9fa15c85b678539b9d0bf41b5ba1781ff95470172c30020167ce60">
+<title>WprdPress Gutenburg Adaptive Column Layout</title>
+<subtitle>How This Site is Stylized</subtitle>
+<para>WordPress Gutenburg is in many ways a step backwards.
+For example, you now have to use a hack to implement adaptive column layout, as the framework exposes no way to use a <literal>@media</literal> query or even a custom CSS selector.
+This hack is also extremely funny and exposes some intriguing design in Gutenburg.</para>
+<para>All steps are based on the <literal>twentytwentythree</literal> theme, WordPress 6.1.</para>
+<include xmlns="http://www.w3.org/2001/XInclude" href="65cdebbc5a685ba29129e1aea761d2aa69c863cd7b907fa28275d3e27060c92e"/>
+<include xmlns="http://www.w3.org/2001/XInclude" href="a0bcae7c61fb33f5113f2d94da78209bb82c183c1fe92dfe6d03fee5e1679360"/>
+<include xmlns="http://www.w3.org/2001/XInclude" href="abed135dad2c999b54e2224b5aca0c9c4c414366b45bb025f9a085c73d5be78b"/>
+</article>