<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Development Archives - EckoThemes</title>
	<atom:link href="https://onyx-wp.ecko.me/tag/development/feed/" rel="self" type="application/rss+xml" />
	<link>https://onyx-wp.ecko.me/tag/development/</link>
	<description>Onyx WordPress Theme</description>
	<lastBuildDate>Fri, 17 Jan 2025 23:47:21 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://onyx-wp.ecko.me/wp-content/uploads/2025/01/favicon-50x50.png</url>
	<title>Development Archives - EckoThemes</title>
	<link>https://onyx-wp.ecko.me/tag/development/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Modern Web &#038; JavaScript Frontend Framework Essentials</title>
		<link>https://onyx-wp.ecko.me/javascript-essentials/</link>
					<comments>https://onyx-wp.ecko.me/javascript-essentials/#comments</comments>
		
		<dc:creator><![CDATA[Samantha Lane]]></dc:creator>
		<pubDate>Thu, 25 Apr 2024 18:19:44 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Frontend]]></category>
		<guid isPermaLink="false">http://koala-wp.ecko.me/?p=794</guid>

					<description><![CDATA[<p>It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. JavaScript (at least the strict subset asm.js) is also considered an &#8220;assembly language of the web&#8221; – a compile target of source-to-source [&#8230;]</p>
<p>The post <a href="https://onyx-wp.ecko.me/javascript-essentials/">Modern Web &#038; JavaScript Frontend Framework Essentials</a> appeared first on <a href="https://onyx-wp.ecko.me">EckoThemes</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>It is most commonly used as part of web browsers, whose implementations allow client-side scripts to interact with the user, control the browser, communicate asynchronously, and alter the document content that is displayed. JavaScript (at least the strict subset asm.js) is also considered an &#8220;assembly language of the web&#8221; – a compile target of source-to-source compilers – for making client side web applications, using other programming languages, supported by all the major browsers without plug-ins. It is also used in server-side network programming with runtime environments such as Node.js, game development and the creation of desktop and mobile applications.</p>



<span id="more-794"></span>



<p>JavaScript is a prototype-based scripting language with dynamic typing and first-class functions. This mix of features makes it a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles.</p>



<div class="wp-block-ecko-blocks-contrast alignwide" style="background-color:#1b1b1d;color:#ffffff"><div class="wp-block-ecko-blocks-contrast-content" multline="p"><p>Despite some naming, syntactic, and standard library similarities, JavaScript and Java are otherwise unrelated and have very different semantics. The syntax of JavaScript is actually derived from C, while the semantics and design are influenced by the Self and Scheme programming languages.</p></div></div>



<p>JavaScript is also used in environments that aren&#8217;t web-based, such as PDF documents, site-specific browsers, and desktop widgets. Newer and faster JavaScript virtual machines (VMs) and platforms built upon them have also increased the popularity of JavaScript for server-side web applications. On the client side, JavaScript has been traditionally implemented as an interpreted language, but more recent browsers perform just-in-time compilation.</p>
<p>The post <a href="https://onyx-wp.ecko.me/javascript-essentials/">Modern Web &#038; JavaScript Frontend Framework Essentials</a> appeared first on <a href="https://onyx-wp.ecko.me">EckoThemes</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://onyx-wp.ecko.me/javascript-essentials/feed/</wfw:commentRss>
			<slash:comments>2</slash:comments>
		
		
			</item>
		<item>
		<title>Getting Started with NodeJS: Simple HTTP Server</title>
		<link>https://onyx-wp.ecko.me/simple-http-server-in-nodejs/</link>
					<comments>https://onyx-wp.ecko.me/simple-http-server-in-nodejs/#comments</comments>
		
		<dc:creator><![CDATA[Brandon Hawkins]]></dc:creator>
		<pubDate>Wed, 02 Aug 2023 20:15:58 +0000</pubDate>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Web]]></category>
		<guid isPermaLink="false">http://wpdev.ecko.me/?p=62</guid>

					<description><![CDATA[<p>Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.</p>
<p>The post <a href="https://onyx-wp.ecko.me/simple-http-server-in-nodejs/">Getting Started with NodeJS: Simple HTTP Server</a> appeared first on <a href="https://onyx-wp.ecko.me">EckoThemes</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Node.js uses an event-driven, non-blocking model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices. This simple web server written in <a href="https://nodejs.org/en/about/" target="_blank" rel="noopener">Node</a> responds with “Hello World” for every request. To run the server, put the code into a file example.js and execute it with the node program from the command line.</p>



<span id="more-62"></span>



<pre class="wp-block-code eckosc_syntax eckosc_syntax_theme_dark wp-block-code__dark language-javascript" data-language="language-javascript" data-color-scheme="dark"><code>var http = require('http');
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello Worldn');
}).listen(1337, '127.0.0.1');
console.log('Server running at http://127.0.0.1:1337/');</code></pre>



<p>This is in contrast to today&#8217;s more common concurrency model where OS threads are employed. Thread-based networking is relatively inefficient and very difficult to use. Furthermore, users of Node are free from worries of dead-locking the process—there are no locks. Almost no function in Node directly performs I/O, so the process never blocks. Because nothing blocks, less-than-expert programmers are able to develop scalable systems.</p>



<p>Just because Node is designed without threads, doesn&#8217;t mean you cannot take advantage of multiple cores in your environment. You can spawn child processes that are easy to communicate with by using our <code>child_process.fork()</code> API. Built upon that same interface is the cluster module, which allows you to share sockets between processes to enable load balancing over your cores.</p>
<p>The post <a href="https://onyx-wp.ecko.me/simple-http-server-in-nodejs/">Getting Started with NodeJS: Simple HTTP Server</a> appeared first on <a href="https://onyx-wp.ecko.me">EckoThemes</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://onyx-wp.ecko.me/simple-http-server-in-nodejs/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Installing Nginx on Ubuntu 14.04 with Server Caching</title>
		<link>https://onyx-wp.ecko.me/installing-nginx-on-ubuntu-14-04/</link>
					<comments>https://onyx-wp.ecko.me/installing-nginx-on-ubuntu-14-04/#comments</comments>
		
		<dc:creator><![CDATA[Samantha Lane]]></dc:creator>
		<pubDate>Wed, 17 May 2023 05:47:54 +0000</pubDate>
				<category><![CDATA[Administration]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Nginx]]></category>
		<guid isPermaLink="false">http://kitewp.ecko.me/?p=319</guid>

					<description><![CDATA[<p>Nginx is one of the most popular web servers in the world and is responsible for hosting some of the largest and highest-traffic sites on the internet. It is more resource-friendly than Apache in most cases and can be used as a web server or a reverse proxy. Since this is our first interaction with the apt packaging system in this session, we should update our local package index before we begin so that we are using the most up-to-date information.</p>
<p>The post <a href="https://onyx-wp.ecko.me/installing-nginx-on-ubuntu-14-04/">Installing Nginx on Ubuntu 14.04 with Server Caching</a> appeared first on <a href="https://onyx-wp.ecko.me">EckoThemes</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>Before you begin this guide, you should have a regular, non-root user with sudo privileges configured on your server. You can learn how to configure a regular user account by following steps 1-4 in our initial server setup guide for Ubuntu 14.04.</p>



<span id="more-319"></span>



<h3 class="wp-block-heading">Step One: Install Nginx</h3>



<p>We can install Nginx easily because the Ubuntu team provides an Nginx package in its default repositories.&nbsp;Since this is our first interaction with the apt packaging system in this session, we should update our local package index before we begin so that we are using the most up-to-date information. Afterwards, we will install nginx:</p>



<pre class="wp-block-code eckosc_syntax eckosc_syntax_theme_dark wp-block-code__dark language-bash" data-language="language-bash" data-color-scheme="dark"><code>sudo apt-get update
sudo apt-get install nginx</code></pre>



<p>You will probably be prompted for your user&#8217;s password. Enter it to confirm that you wish to complete the installation. The appropriate software will be downloaded to your server and then automatically installed.</p>



<h3 class="wp-block-heading">Step Two: Check your Web Server</h3>



<p>You can access the default Nginx landing page to confirm that the software is running properly by visiting your server&#8217;s domain name or public IP address in your web browser.</p>



<p>If you do not have a spare domain name, or have no need for one, you can use your server&#8217;s public IP address. If you do not know your server&#8217;s IP address, you can get it a few different ways from the command line.</p>



<p>Continue reading this guide at <a href="https://www.digitalocean.com/community/tutorials/how-to-install-nginx-on-ubuntu-14-04-lts" target="_blank" rel="noopener">Digital Ocean</a>. This article has been used as an example of an&nbsp;Ecko&nbsp;WordPress theme. This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.</p>
<p>The post <a href="https://onyx-wp.ecko.me/installing-nginx-on-ubuntu-14-04/">Installing Nginx on Ubuntu 14.04 with Server Caching</a> appeared first on <a href="https://onyx-wp.ecko.me">EckoThemes</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://onyx-wp.ecko.me/installing-nginx-on-ubuntu-14-04/feed/</wfw:commentRss>
			<slash:comments>1</slash:comments>
		
		
			</item>
		<item>
		<title>Onyx Theme Gutenberg</title>
		<link>https://onyx-wp.ecko.me/gutenberg/</link>
					<comments>https://onyx-wp.ecko.me/gutenberg/#respond</comments>
		
		<dc:creator><![CDATA[Brandon Hawkins]]></dc:creator>
		<pubDate>Mon, 02 Jan 2023 04:53:13 +0000</pubDate>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Development]]></category>
		<category><![CDATA[Frontend]]></category>
		<guid isPermaLink="false">http://wpdev.ecko.me/?p=156</guid>

					<description><![CDATA[<p>Onyx comes included with a number of shortcodes to make accessing theme features easier when creating your blog posts, below is a list of available shortcodes. Further information on shortcodes and their usage can be found in the provided documentation.</p>
<p>The post <a href="https://onyx-wp.ecko.me/gutenberg/">Onyx Theme Gutenberg</a> appeared first on <a href="https://onyx-wp.ecko.me">EckoThemes</a>.</p>
]]></description>
										<content:encoded><![CDATA[
<p>As well as support for all default Gutenberg blocks, Onyx includes our &#8216;Ecko Blocks&#8217; plugin, which introduces a number of custom blocks to enhance your content &#8211; these blocks are easily accessed via&nbsp;the Gutenberg editor. Further information on blocks and their usage can be found in the provided theme documentation. Below is an example of these custom blocks, and a selection of default WordPress blocks with theme specific styling.</p>



<span id="more-156"></span>



<h2 class="wp-block-heading">Progress Bar</h2>



<p>The Progress Bar block is provided by the &#8216;Ecko Blocks&#8217; plugin. It can be used to show the current status of a task. Below is an example this block in use with various different configurations.</p>



<div class="wp-block-ecko-blocks-progress-bar wp-block-ecko-blocks-progress-bar__padded wp-block-ecko-blocks-progress-bar__animation wp-ecko-blocks-font-header" data-status="80"><div class="wp-block-ecko-blocks-progress-bar-bar" style="background-color:#ff6900"></div><div class="wp-block-ecko-blocks-progress-bar-inner"><div class="wp-block-ecko-blocks-progress-bar-title" style="color:#fff">Example Label</div><div class="wp-block-ecko-blocks-progress-bar-status">80%</div></div></div>



<div class="wp-block-ecko-blocks-progress-bar wp-block-ecko-blocks-progress-bar__padded wp-block-ecko-blocks-progress-bar__animation wp-ecko-blocks-font-header" data-status="55"><div class="wp-block-ecko-blocks-progress-bar-bar" style="background-color:#0693e3"></div><div class="wp-block-ecko-blocks-progress-bar-inner"><div class="wp-block-ecko-blocks-progress-bar-title" style="color:#fff">Example Label</div><div class="wp-block-ecko-blocks-progress-bar-status">55%</div></div></div>



<div class="wp-block-ecko-blocks-progress-bar wp-block-ecko-blocks-progress-bar__padded wp-block-ecko-blocks-progress-bar__rounded wp-block-ecko-blocks-progress-bar__animation wp-ecko-blocks-font-header" data-status="90"><div class="wp-block-ecko-blocks-progress-bar-bar" style="background-color:#00d084"></div><div class="wp-block-ecko-blocks-progress-bar-inner"><div class="wp-block-ecko-blocks-progress-bar-title" style="color:#fff">Example Label</div><div class="wp-block-ecko-blocks-progress-bar-status">90%</div></div></div>



<div class="wp-block-ecko-blocks-progress-bar wp-block-ecko-blocks-progress-bar__rounded wp-block-ecko-blocks-progress-bar__animation wp-ecko-blocks-font-header" data-status="61"><div class="wp-block-ecko-blocks-progress-bar-bar" style="background-color:#313131"></div><div class="wp-block-ecko-blocks-progress-bar-inner"><div class="wp-block-ecko-blocks-progress-bar-title" style="color:#eeeeee">Example Label</div><div class="wp-block-ecko-blocks-progress-bar-status">61%</div></div></div>



<div class="wp-block-ecko-blocks-progress-bar wp-block-ecko-blocks-progress-bar__animation wp-ecko-blocks-font-header" data-status="79"><div class="wp-block-ecko-blocks-progress-bar-bar" style="background-color:#624be9"></div><div class="wp-block-ecko-blocks-progress-bar-inner"><div class="wp-block-ecko-blocks-progress-bar-title" style="color:#fff">Example Label</div><div class="wp-block-ecko-blocks-progress-bar-status">79%</div></div></div>



<p>This block includes a number of customization options to adjust its appearance, content and current state. Any number of Progress Bar blocks can be added in series or as a single block.</p>



<h2 class="wp-block-heading">Accordion</h2>



<p>The Accordion block is provided by the &#8216;Ecko Blocks&#8217; plugin. It can be used to show or hide content sections via user click or mobile tap. Below is an example of this block in use.</p>



<div class="wp-block-ecko-blocks-accordion wp-ecko-blocks-font-header" data-closed="true"><div class="wp-block-ecko-blocks-accordion-header"><h3 class="wp-block-ecko-blocks-accordion-title">Example Title</h3><div class="wp-block-ecko-blocks-accordion-arrow"><svg class="svg-icon svg-icon-stroke" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"></path></svg></div></div><div class="wp-block-ecko-blocks-accordion-content"><p>This is an example of the Accordion block. This Accordion has been set to be &#8216;Closed&#8217; by default and requires user click or mobile tap to become visible.</p></div></div>



<div class="wp-block-ecko-blocks-accordion wp-ecko-blocks-font-header" data-closed="true"><div class="wp-block-ecko-blocks-accordion-header"><h3 class="wp-block-ecko-blocks-accordion-title">Example Title</h3><div class="wp-block-ecko-blocks-accordion-arrow"><svg class="svg-icon svg-icon-stroke" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"></path></svg></div></div><div class="wp-block-ecko-blocks-accordion-content"><p>This is an example of the Accordion block. This Accordion has been set to be &#8216;Closed&#8217; by default and requires user click or mobile tap to become visible.</p></div></div>



<div class="wp-block-ecko-blocks-accordion wp-ecko-blocks-font-header" data-closed="false"><div class="wp-block-ecko-blocks-accordion-header"><h3 class="wp-block-ecko-blocks-accordion-title">Example Title (Default Open)</h3><div class="wp-block-ecko-blocks-accordion-arrow"><svg class="svg-icon svg-icon-stroke" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"></path></svg></div></div><div class="wp-block-ecko-blocks-accordion-content"><p>This is an example of the Accordion block. This Accordion has been set to be &#8216;Open&#8217; by default and requires user click or mobile tap to be hidden.</p></div></div>



<p>This block includes customization options for the title&nbsp;and its default state &#8211; open or closed. Any number of Accordions blocks can be added in series or as a single block.</p>



<h2 class="wp-block-heading">Status Message</h2>



<p>The Status Message block is provided by the &#8216;Ecko Blocks&#8217; plugin. It can be used to display notifications or emphasise important content. Below is an example this block in use.</p>



<div class="wp-block-ecko-blocks-status wp-block-ecko-blocks-status__standard wp-ecko-blocks-font-header" style="background-color:#f0f4f9;border-color:#a4cbd9"><div class="wp-block-ecko-blocks-status-header"><h3 class="wp-block-ecko-blocks-status-title" style="color:#1a1a1b">Standard</h3></div><div class="wp-block-ecko-blocks-status-content" style="color:#484b52"><p>This is an example of the Status Message block. It can contain formatted text such as bold style and links. There is no limit to the content length, and multiple paragraphs can be used.</p></div></div>



<div class="wp-block-ecko-blocks-status wp-block-ecko-blocks-status__error wp-ecko-blocks-font-header" style="background-color:;border-color:"><div class="wp-block-ecko-blocks-status-header"><h3 class="wp-block-ecko-blocks-status-title" style="color:">Error</h3></div><div class="wp-block-ecko-blocks-status-content" style="color:#484b52"><p>This is an example of the Status Message block. It can contain formatted text such as bold style and links. There is no limit to the content length, and multiple paragraphs can be used.</p></div></div>



<div class="wp-block-ecko-blocks-status wp-block-ecko-blocks-status__success wp-ecko-blocks-font-header" style="background-color:;border-color:"><div class="wp-block-ecko-blocks-status-header"><h3 class="wp-block-ecko-blocks-status-title" style="color:">Success</h3></div><div class="wp-block-ecko-blocks-status-content" style="color:#484b52"><p>This is an example of the Status Message block. It can contain formatted text such as bold style and links. There is no limit to the content length, and multiple paragraphs can be used.</p></div></div>



<div class="wp-block-ecko-blocks-status wp-ecko-blocks-font-header" style="background-color:#313131;border-color:#000000"><div class="wp-block-ecko-blocks-status-header"><h3 class="wp-block-ecko-blocks-status-title" style="color:#eeeeee">Custom</h3></div><div class="wp-block-ecko-blocks-status-content" style="color:#eeeeee"><p>This is an example of the Status Message block. It can contain formatted text such as bold style and links. There is no limit to the content length, and multiple paragraphs can be used.</p></div></div>



<p>This block includes a number of customization options to adjust its appearance and content. Any number of Status Message blocks can be added in series or as a single block.</p>



<h2 class="wp-block-heading">Tabs</h2>



<p>The Tabs block is provided by the &#8216;Ecko Blocks&#8217; plugin. It can be used to organize content sections into named tabbed containers. Below is an example this block in use.</p>



<div class="wp-block-ecko-blocks-tabs wp-ecko-blocks-font-header"><div class="wp-block-ecko-blocks-tabs-header"><div class="wp-block-ecko-blocks-tabs-header-item" data-index="0"><h4 class="wp-block-ecko-blocks-tabs-title">First Tab</h4></div><div class="wp-block-ecko-blocks-tabs-header-item" data-index="1"><h4 class="wp-block-ecko-blocks-tabs-title">Second Tab</h4></div><div class="wp-block-ecko-blocks-tabs-header-item" data-index="2"><h4 class="wp-block-ecko-blocks-tabs-title">Third Tab</h4></div></div><div class="wp-block-ecko-blocks-tabs-content"><div class="wp-block-ecko-blocks-tabs-content-item" data-index="0"><p>This is the first tabs content and an example of the Tabs block in use. This content can include multiple paragraphs of <strong>formatted</strong> text, including links.</p></div><div class="wp-block-ecko-blocks-tabs-content-item" data-index="1"><p>This is the second tabs content and an example of the Tabs block in use. This content can include multiple paragraphs of <strong>formatted</strong> text, including links.</p></div><div class="wp-block-ecko-blocks-tabs-content-item" data-index="2"><p>This is the second tabs content and an example of the Tabs block in use. This content can include multiple paragraphs of <strong>formatted</strong> text, including links.</p><p>Here we have added an additional paragraph into the third tab content. A tab has no limit on the content length or number of paragraphs use.</p></div></div></div>



<p>This block includes customization options for the tab title&nbsp;and contents. Any number of Status Message blocks can be added in series or as a single block &#8211; multiple containers can also be used throughout the post or page.</p>



<h2 class="wp-block-heading">Caption</h2>



<p>A number of core Gutenberg block include the option for a caption to be added, which can be used to add textual context to the content. Below is an example of a caption added to an Image block.</p>



<figure class="wp-block-image size-large"><img fetchpriority="high" decoding="async" width="1024" height="683" src="https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-1024x683.jpg" alt="" class="wp-image-859" srcset="https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-1024x683.jpg 1024w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-300x200.jpg 300w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-768x512.jpg 768w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway.jpg 1680w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-1240x827.jpg 1240w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-860x573.jpg 860w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-680x453.jpg 680w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-500x333.jpg 500w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-400x267.jpg 400w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-250x167.jpg 250w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-200x133.jpg 200w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-150x100.jpg 150w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-100x67.jpg 100w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-76x51.jpg 76w, https://onyx-wp.ecko.me/wp-content/uploads/2015/04/Canadian-Highway-50x33.jpg 50w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Example Caption Text</figcaption></figure>



<p>Captions can include formatted text such as bold style and links. The number of captions that can be added is dependant on the block used, for example an Image block can have a single caption, where a Gallery block may have one caption per image added.</p>



<h2 class="wp-block-heading">Block &amp; Pull Quote</h2>



<p>The Quote block is a core Gutenberg block. It can be used to highlight a quote, and can also include a citation. Below is an example of how these quotes are styled within posts and pages.</p>



<blockquote class="wp-block-quote is-layout-flow wp-block-quote-is-layout-flow">
<p>I don’t believe you have to be better than everybody else. I believe you have to be better than you ever thought you could be.</p>
<cite>Ken Venturi</cite></blockquote>



<p>The following text is filler text for example purposes. Suspendisse euismod diam sit amet nisi faucibus fringilla. Integer fermentum arcu nec mi venenatis volutpat. Donec nec tristique justo. Phasellus iaculis eu metus at bibendum. Aliquam nec ipsum viverra, laoreet augue id, vehicula ipsum. Praesent iaculis pellentesque accumsan. Cras ac turpis accumsan, cursus velit et, eleifend erat. Phasellus mollis, risus non bibendum consequat, ante quam tincidunt magna, a scelerisque lacus tellus quis lorem.</p>



<figure class="wp-block-pullquote alignright"><blockquote><p>I don’t believe you have to be better than everybody else.</p><cite>Ken Venturi</cite></blockquote></figure>



<p>Suspendisse euismod diam sit amet nisi faucibus fringilla. Integer fermentum arcu nec mi venenatis volutpat. Donec nec tristique justo. Phasellus iaculis eu metus at bibendum. Aliquam nec ipsum viverra, laoreet augue id, vehicula ipsum. Praesent iaculis pellentesque accumsan. Cras ac turpis accumsan, cursus velit et, eleifend erat. Phasellus mollis, risus non bibendum consequat, ante quam tincidunt magna, a scelerisque lacus.</p>



<h2 class="wp-block-heading" id="mce_46">Alignment</h2>



<p>Gutenberg adds two additional alignment options, Wide and Full, for supported blocks. Below is an example Image block without any specified alignment, it will be limited in width the same as the post container, and therefore be inline with the paragraph text.</p>



<figure class="wp-block-image"><img decoding="async" src="https://hydra-wp.ecko.me/wp-content/uploads/2017/03/john-towner-188597.jpg" alt="" class="wp-image-123"/></figure>



<p>Below is an example of the Wide &amp; Full alignment. When either alignment is used the active block will extend to fill the main outer container, or if no outer container is present then entire width of the browser window will be used.</p>



<figure class="wp-block-image alignfull"><img decoding="async" src="https://hydra-wp.ecko.me/wp-content/uploads/2017/03/john-towner-188597.jpg" alt="" class="wp-image-123"/></figure>



<h2 class="wp-block-heading">Content Embeds</h2>



<p>In addition to the included blocks, Onyx fully supports the WordPress third-party embeds blocks, such as Twitter, Youtube, Vimeo, Facebook etc. More information on these embed blocks and their usage can be found within the <a rel="noreferrer noopener" href="https://codex.wordpress.org/Gutenberg#Blocks_in_Embeds_tab" target="_blank">WordPress Gutenberg documentation</a>.</p>
<p>The post <a href="https://onyx-wp.ecko.me/gutenberg/">Onyx Theme Gutenberg</a> appeared first on <a href="https://onyx-wp.ecko.me">EckoThemes</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://onyx-wp.ecko.me/gutenberg/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>

<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

Page Caching using Disk: Enhanced 

Served from: onyx-wp.ecko.me @ 2026-06-04 05:47:54 by W3 Total Cache
-->