2023-08-08 18:09:57 +00:00
|
|
|
<!--
|
|
|
|
|
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
|
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
|
|
|
-->
|
|
|
|
|
{{ define "head" -}}
|
Replace Gutenberg with GrapesJS for pages
I simply can not use Gutenberg without having it choking in its own
over-engineered architecture: using it inside a form, submits it when
clicking the button to change a paragraph’s text size; and using the
custom text size in pixels causes the paragraph component to fail.
The issue with paragraph’s custom text size is that block-editor’s
typography hook expects the font size to be a string, such as '12px' or
'1em', to call startsWith on it, but the paragraph sets an integer,
always assuming that the units are pixels. Integers do not have a
startsWith method.
Looking at the Gutenberg distributed with the current version of
WordPress, 6.3, seems that now paragraph has a selector for the units,
therefore never sets just the integer. That made me think that the
components used by the Isolated Block Editor are “mismatched”: maybe in
a previous version of block-editor it was always passed as an integer
too?
I downloaded the source code of the Isolated Block Editor and tried to
update @wordpress/block-library from version 8.14.0 to the current
version, 8.16.0, but fails with an error saying that 'core/paragraph' is
not registered, when, as far as i could check, it was. Seems that
something changed in @wordpress/blocks between version 12.14.0 and
12.16.0, so i tried to upgrade that module as well; it did not work
because @wordpress/data was not updated —do not remember the actual
error message—. Upgrading to @wordpress/data from 9.7.0 to 9.9.0 made
the registration of the 'isolated/editor' subregistry to be apparently
ignored, because the posterior select('isolated/editor') within a
withSelect hook returns undefined.
At this point, i gave up: it is obvious that the people that shit
JavaScript for Gutenberg do not care for semantic versioning, and there
are a lot of moving parts to fix just to be able to use a simple
paragraph block!
It seems, however, that there are not many open-source, block-based
_layout_ editors out there: mainly GrapesJS and Craft.JS. Craft.JS,
however, has no way to output HTML[0], requiring hacks such as using
React to generate the HTML and then pasted that shit onto the page;
totally useless for me.
I am not a fan of GrapesJS either: it seems that the “text block” is
a content-editable div, and semantic HTML can go fuck itself,
apparently. Typical webshit mentality. By strapping another huge
dependency like CKEditor, but only up to the already out-of-support
version 4, i can write headers, paragraphs and list. That’s
something, i guess.
[0]: https://github.com/prevwong/craft.js/issues/42
Part of #33.
2023-08-11 00:38:49 +00:00
|
|
|
<link rel="stylesheet" media="screen" href="/static/grapesjs@0.21.4.min.css">
|
|
|
|
|
<script src="/static/grapesjs@0.21.4.min.js"></script>
|
|
|
|
|
<script src="/static/grapesjs-plugin-ckeditor@1.0.1.min.js"></script>
|
|
|
|
|
<script src="/static/grapesjs-blocks-basic@1.0.2.min.js"></script>
|
|
|
|
|
<script src="/static/grapesjs-preset-webpage@1.0.3.min.js"></script>
|
2023-08-08 18:09:57 +00:00
|
|
|
{{- end }}
|
|
|
|
|
|
|
|
|
|
{{ define "title" -}}
|
|
|
|
|
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/page.pageForm*/ -}}
|
|
|
|
|
{{ if .Slug}}
|
|
|
|
|
{{( pgettext "Edit Page" "title" )}}
|
|
|
|
|
{{ else }}
|
|
|
|
|
{{( pgettext "New Page" "title" )}}
|
|
|
|
|
{{ end }}
|
|
|
|
|
{{- end }}
|
|
|
|
|
|
|
|
|
|
{{ define "content" -}}
|
|
|
|
|
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/page.pageForm*/ -}}
|
|
|
|
|
<form
|
|
|
|
|
{{ if .Slug }}
|
|
|
|
|
data-hx-put="/admin/pages/{{ .Slug }}"
|
|
|
|
|
{{ else }}
|
|
|
|
|
action="/admin/pages" method="post"
|
|
|
|
|
{{ end }}
|
|
|
|
|
>
|
|
|
|
|
<h2>
|
|
|
|
|
{{ if .Slug }}
|
|
|
|
|
{{( pgettext "Edit Page" "title" )}}
|
|
|
|
|
{{ else }}
|
|
|
|
|
{{( pgettext "New Page" "title" )}}
|
|
|
|
|
{{ end }}
|
|
|
|
|
</h2>
|
|
|
|
|
{{ CSRFInput }}
|
|
|
|
|
<fieldset>
|
|
|
|
|
{{ with .Title -}}
|
|
|
|
|
<label>
|
|
|
|
|
{{( pgettext "Title" "input")}}<br>
|
|
|
|
|
<input type="text" name="{{ .Name }}" value="{{ .Val }}"
|
|
|
|
|
required {{ template "error-attrs" . }}><br>
|
|
|
|
|
</label>
|
|
|
|
|
{{ template "error-message" . }}
|
|
|
|
|
{{- end }}
|
|
|
|
|
{{ with .Content -}}
|
|
|
|
|
<label>
|
|
|
|
|
{{( pgettext "Content" "input")}}<br>
|
|
|
|
|
<textarea class="html" name="{{ .Name }}" {{ template "error-attrs" . }}>{{ .Val }}</textarea><br>
|
|
|
|
|
{{ template "error-message" . }}
|
|
|
|
|
</label>
|
|
|
|
|
{{- end }}
|
|
|
|
|
</fieldset>
|
|
|
|
|
<footer>
|
|
|
|
|
<button type="submit">
|
|
|
|
|
{{ if .Slug }}
|
|
|
|
|
{{( pgettext "Update" "action" )}}
|
|
|
|
|
{{ else }}
|
|
|
|
|
{{( pgettext "Add" "action" )}}
|
|
|
|
|
{{ end }}
|
|
|
|
|
</button>
|
|
|
|
|
</footer>
|
|
|
|
|
</form>
|
|
|
|
|
{{- end }}
|