Max width container - Version 1.1

Version Description

  • Content is properly centered on the page by modifying the CSS class name

=

Download this release

Release Info

Developer visualsuperhero
Plugin Icon 128x128 Max width container
Version 1.1
Comparing to
See all releases

Version 1.1

Files changed (4) hide show
  1. max-width-container.css +3 -0
  2. max-width-container.js +44 -0
  3. max-width-container.php +31 -0
  4. readme.txt +46 -0
max-width-container.css ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ .wp-block-max-width-container, .wp-block-gutenberg-blocks-max-width-container {
2
+ margin: 0 auto !important;
3
+ }
max-width-container.js ADDED
@@ -0,0 +1,44 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ wp.blocks.registerBlockType( 'gutenberg-blocks/max-width-container', {
2
+ title: 'Max width container',
3
+ category: 'layout',
4
+ attributes: {
5
+ container_width: {
6
+ type: 'number',
7
+ default: 1920
8
+ }
9
+ },
10
+ edit: function( props ) {
11
+ return (
12
+ wp.element.createElement( wp.element.Fragment, null,
13
+ wp.element.createElement( wp.editor.InspectorControls, null,
14
+ wp.element.createElement( wp.components.RangeControl,
15
+ {
16
+ label: 'Adjust the maximum width of the container',
17
+ min: 0,
18
+ max: 1920,
19
+ value: props.attributes.container_width,
20
+ onChange: function( value ){
21
+ props.setAttributes( { container_width: value } );
22
+ }
23
+ }
24
+ )
25
+ ),
26
+ wp.element.createElement( 'div', {
27
+ style: { maxWidth: props.attributes.container_width + 'px', borderTop: '10px solid lightgray' },
28
+ className: 'wp-block-max-width-container'
29
+ },
30
+ wp.element.createElement( wp.editor.InnerBlocks )
31
+ )
32
+ )
33
+ );
34
+ },
35
+ save: function( props ) {
36
+ return (
37
+ wp.element.createElement( 'div', {
38
+ style: { maxWidth: props.attributes.container_width + 'px' }
39
+ },
40
+ wp.element.createElement( wp.editor.InnerBlocks.Content )
41
+ )
42
+ )
43
+ }
44
+ });
max-width-container.php ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /*
3
+ * Plugin Name: Maximum width container
4
+ * Description: An adjustable maximum width container for Gutenberg
5
+ * Author: Webzotic
6
+ * Author URI: https://webzotic.com/
7
+ * Version: 1.1
8
+ * License: GPLv2 or later
9
+ */
10
+
11
+ if( !defined( 'ABSPATH' ) ) {
12
+ exit;
13
+ }
14
+ function max_width_container() {
15
+ wp_register_script(
16
+ 'max-width-container',
17
+ plugins_url( 'max-width-container.js?v=' . round( rand() ), __FILE__ ),
18
+ array( 'wp-blocks', 'wp-element' )
19
+ );
20
+ wp_register_style(
21
+ 'max-width-container',
22
+ plugins_url( 'max-width-container.css?v=' . round( rand() ), __FILE__ ),
23
+ array( 'wp-edit-blocks' )
24
+ );
25
+ register_block_type( 'gutenberg-blocks/width-container', array(
26
+ 'editor_script' => 'max-width-container',
27
+ 'editor_style' => 'max-width-container',
28
+ 'style' => 'max-width-container',
29
+ ));
30
+ }
31
+ add_action( 'init', 'max_width_container' );
readme.txt ADDED
@@ -0,0 +1,46 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === Max width container ===
2
+ Contributors: webzotic
3
+ Donate link: https://webzotic.com
4
+ Tags: gutenberg, width, maximum, adjustable
5
+ Requires at least: 5.0
6
+ Tested up to: 5.2
7
+ Stable tag: 1.1
8
+ Requires PHP: 5.2.4
9
+ License: GPLv2 or later
10
+ License URI: https://www.gnu.org/licenses/gpl-2.0.html
11
+
12
+ This plugin creates a new Gutenberg block, which allows you yo create a container with an adjustable maximun width, giving your perfect control over the layout.
13
+
14
+ == Description ==
15
+
16
+ Surely you know the feeling, when your text looks silly in a 100% width layout. "Max With Container" let's you set a max-width, making your text fit nicely within the design of your page. This plugin creates a new Gutenberg block in the layout category, which allows you yo create a container with an adjustable maximun width, giving your perfect control over the layout.
17
+
18
+ == Installation ==
19
+
20
+ 1. Upload the plugin files to the `/wp-content/plugins/plugin-name` directory, or install the plugin through the WordPress plugins screen directly.
21
+
22
+ == Frequently Asked Questions ==
23
+
24
+ = No questions yet =
25
+
26
+ == Screenshots ==
27
+
28
+ 1. Gutenberg editor
29
+
30
+ 2. Block controls
31
+
32
+ == Changelog ==
33
+
34
+ = 1.0.0 =
35
+ * Release
36
+
37
+ = 1.1 =
38
+ * Content is properly centered on the page by modifying the CSS class name
39
+
40
+ == Upgrade Notice ==
41
+
42
+ = 1.0.0 =
43
+ No updates yet
44
+
45
+ = 1.1 =
46
+ Content is properly centered on the page by modifying the CSS class name