How to display HTML content without Gutenberg blocks in Wordpress? - wordpress

My developer has updated my Wordpress to the latest and with it comes Gutenberg. I'm not a fan and I see every one of my HTML paragraphs now looks like this:
<!-- wp:paragraph -->
<p>Hello world!</p>
<!-- /wp:paragraph -->
Needless to say, the <!-- wp:paragraph --> is confusing to me, especially because I write my content in HTML. It has the block tags around everything, including images. I don't want to deal with these.
I tried using this plugin to disable Gutenberg entirely: https://wordpress.org/plugins/classic-editor/ but the Gutenberg paragraph tags remain. How can I revert my HTML content back to how it was before this awful Gutenberg update?

Related

Custom Page Template utilizing Wordpress' Block Theme Editor

i've been messing around with Gutenbergs new Site Editor tookit and building a block based theme. One thing I cannot for the life of me figure out though is how to set up a custom page global theme using the block editors .html template files. I can't seem to find any documentation either. For reference, this is the PHP code you add at the top if doing it "the old fashioned way:
<?php
/**
* Template Name: Full Width Page
*
* #package WordPress
* #subpackage Twenty_Fourteen
* #since Twenty Fourteen 1.0
*/
This signifies to wordpress that this is a page attribute theme that can be chosen. In contrast, here is what I have for a example in the new block editor:
<!-- wp:cover {"url":"http:\/\/wppld.local\/wp-content\/uploads\/2021\/03\/bigstock-Panoramic-View-From-Cannon-Mou-195735793.jpg","id":18,"align":"full"} -->
<div class="wp-block-cover alignfull has-background-dim">
<img
class="wp-block-cover__image-background wp-image-18"
alt=""
src="http://wppld.local/wp-content/uploads/2021/03/bigstock-Panoramic-View-From-Cannon-Mou-195735793.jpg"
data-object-fit="cover"
/>
<div class="wp-block-cover__inner-container">
<!-- wp:paragraph {"align":"center","placeholder":"Write title\u2026","fontSize":"large"} -->
<p class="has-text-align-center has-large-font-size"></p>
<!-- /wp:paragraph -->
</div>
</div>
<!-- /wp:cover -->
<!-- wp:post-title /-->
<!-- wp:post-content /-->
<!-- wp:template-part {"slug":"footer","align":"full"} /-->
I appreciate any help!
Gutenberg momentum is slow to take off. Gutenberg is the answer for WordPress to Shopify. They felt threatened by it and decided to switch to visual editing and push hard on their main income avenue, WordPress.com. The main focus is towards providing a service able to compete with Shopify.
There is (hidden) documentation, in regards to future plans WordPress has. With recent changes, for example, did you know that soon the main standard for WordPress development will be Block-Based Design ? Soon being in the next 3/5-ish years of course.
Full site editing is an experimental feature and the workflow in this tutorial is likely to change.
It is still really early in development. It's the evolution WordPress is currently going for. Where you could supply a set of blocks to use straight from the gecko, upon choosing a page template or for the landing page too.
But to be honest that's it. Even tho Gutenberg was introduced, it has not yet found it's placed.

Set custom initial page in blogdown

Is it possible to set the initial page in blogdown? Instead of the default one that shows the posts I would like to have a custom one. I want to have my own index.html (the root one).
Thanks.
Assuming you are using Lithium - A simple responsive Hugo theme, one possible way to do this is the following.
1] Copy layouts/_default/list.html to a new layout file named layouts/_default/home.html
2] Edit layouts/_default/home.html so it contains this:
{{ partial "header.html" . }}
<main class="content" role="main">
<h1>
My heading
</h1>
<p>
My paragraph
</p>
</main>
{{ partial "footer.html" . }}
Your home page will now contain "My heading" and "My paragraph," along with the Lithium header and footer. If you do not want to use the Lithium header and/or footer, remove those partial calls from home.html.[*] There's a lot more that you can do with Hugo layout files, which you can learn about in my Hugo tutorial in the section 15. Explore the layouts directory and at gohugo.io's Category: templates.
I hope this is enough to get you started with Hugo layout files.
[*] If you remove the header partial, you need to put something like <!doctype html><title>a</title> at the top. More about this is in What's a valid HTML5 document? - Stack Overflow

Creating a post with guttenberg content using the WP-REST-API

I am using the wp rest api for adding posts to my site from another app. Therefore I use POST /wp-json/wp/v2/seminar where seminar is my custom post type. In the post data I set content to some text.
The Problem is that Wordpress creates a block with the tinyMce editor instead of using the default guttenberg paragraph block (see images below).
What is created:
Image of Tinymce
What I want to be created:
Image of paragraph editor
Does someone know a way to make wordpress creating the paragraph insted of the tinymce block?
Try to make content like this
<!-- wp:paragraph -->
<p>my content text</p>
<!-- /wp:paragraph -->

Remove content after <!--more--> tag

I'm trying to show at the category page only the content of the post that is before the <!--more--> tag. I'm using the latest Wordpress version.
In other words the structure will go like this
Content
<!--more-->
Content I want to be removed and only shown if the single post is displayed.
I've already got rid of the "Read More" link, and I've already tryed to use CSS and display:none; but none of those works fine
The code generated by wordpress is the following
<h2 class="entry-title">Post Name</h2>
<div id="chan" class="blanco">Content Shown</div>
<p><span id="more-50"></span>Post description.</p>
At the index.php I've managed to make it work since it shows the link and not the content itself, however in the page.php doesn't work.
Thank you very much in advance!
<?php the_content(); ?> will output the content, trimmed to just before the <!-- more --> tag, if the tag is used.
From the codex:
If the quicktag <!--more--> is used in a post to designate the "cut-off" point for the post to be excerpted, the_content() tag will only show the excerpt up to the <!--more--> quicktag point on non-single/non-permalink post pages.

Per widget on sidebar, output custom html with widget content

I'm new to WordPress and it's all complicated to me, but a client has asked I design a WordPress compatible theme for him from the given theme. I've got most of the bits and bobs done but I still don't understand how I'd get wordpress to output custom html in the way I wish... For example, I have this code here which is to be a "widget" on the sidebar, however I can't find out how I'd get wordpress to output a code similar to this so that it'd be compatible with the theme..
<div class="panelfive" id="panel3">
<h4>WIDGET NAME</h4>
<div id="panel2-body" class="panel_body">
<ul>
WIDGET CONTENT
</ul>
</div>
</div>
Usually themes will have a sidebar.php or similar, but it's not really necessary unless you want to make it modular. A wordpress theme is really just PHP, so you can throw that HTML in page.php and it will load anytime a page is loaded.
Check out a couple of references:
General reference for theme development--many pages and sub-pages: http://codex.wordpress.org/Theme_Development
A visual representation of what a wordpress theme looks like, and the related files: http://yoast.com/wordpress-theme-anatomy/

Resources