enable wide/full Gutenberg alignment

Home Forums Polyclinic enable wide/full Gutenberg alignment

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #21469
    oakhillman
    Participant

    enable wide/full Gutenberg alignment

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Oliver,

    If you could provide the solution on how to enable the wide/full Gutenberg alignment, that would be awesome!

    Thanks,
    Mark

    #21470
    Oliver Juhas
    Keymaster

    Hi Mark,

    Could you please provide the URL to your website?

    Or if it’s not possible, could you please provide info about how you set up the theme site layout: is it boxed or full width?

    Please note that as the theme can be configured to many different layouts and as different post types can also be configured to different layouts, it is better to provide a specific solution (such as for full width pages in a full width site layout, which would be the simplest solution). Providing a full stack solution is out of scope of the support and will be introduced in future theme update instead.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21471
    Oliver Juhas
    Keymaster

    Actually, I went ahead and put together a code for both boxed and full width site layout. Please use this in a functions.php file of your child theme:

    
    add_action( 'after_setup_theme', function() {
    	if ( ! current_theme_supports( 'align-wide' ) ) {
    
    		// Initiate support for block editor wide/full alignment.
    		add_theme_support( 'align-wide' );
    
    		// Wrap full aligned elements in a helper div for boxed site layout compatibility.
    		add_filter( 'render_block', function( $block_content, $block ) {
    			if ( isset( $block['attrs']['align'] ) && 'full' === $block['attrs']['align'] ) {
    				$block_content = '<div class="align-wrap">' . $block_content . '</div>';
    			}
    			return $block_content;
    		}, 5, 2 );
    
    		// Add styles for full alignment.
    		add_action( 'wp_enqueue_scripts', function() {
    			wp_add_inline_style( 'polyclinic', '
    
    				body {
    					overflow-x: hidden;
    				}
    
    				.align-wrap {
    					width: 100vw;
    					margin-left: calc(50% - 50vw);
    					margin-bottom: 1.62em;
    					pointer-events: none;
    				}
    
    					.align-wrap:last-child {
    						margin-bottom: 0;
    					}
    
    					.align-wrap + .align-wrap,
    					.align-wrap .wp-block-columns {
    						margin-bottom: -1.62em;
    					}
    
    					@media (min-width: 42em) {
    						.site-layout-boxed,
    						.site-layout-boxed .align-wrap {
    							padding-left: 30px;
    							padding-right: 30px;
    						}
    					}
    
    				.alignfull {
    					width: 100%;
    					max-width: 100%;
    					margin: 0;
    					pointer-events: auto;
    				}
    
    					.site-layout-boxed .alignfull {
    						width: 1640px;
    						width: var(--layout_width_site);
    						margin-left: auto;
    						margin-right: auto;
    					}
    
    			' );
    		} );
    
    	}
    }, 100 );

    Best regards,

    Oliver Juhas
    WebMan Design

    #21472
    oakhillman
    Participant

    Oliver,

    Here’s the code that I added.

    add_action( 'after_setup_theme', function() {
    	if ( ! current_theme_supports( 'align-wide' ) ) {
    
    		// Initiate support for block editor wide/full alignment.
    		add_theme_support( 'align-wide' );
    
    		// Wrap full aligned elements in a helper div for boxed site layout compatibility.
    		add_filter( 'render_block', function( $block_content, $block ) {
    			if ( isset( $block['attrs']['align'] ) && 'full' === $block['attrs']['align'] ) {
    				$block_content = '<div class="align-wrap">' . $block_content . '</div>';
    			}
    			return $block_content;
    		}, 5, 2 );
    
    		// Add styles for full alignment.
    		add_action( 'wp_enqueue_scripts', function() {
    			wp_add_inline_style( 'polyclinic', '
    
    				body {
    					overflow-x: hidden;
    				}
    
    				.align-wrap {
    					width: 100vw;
    					margin-left: calc(50% - 50vw);
    					margin-bottom: 1.62em;
    					pointer-events: none;
    				}
    
    					.align-wrap:last-child {
    						margin-bottom: 0;
    					}
    
    					.align-wrap + .align-wrap,
    					.align-wrap .wp-block-columns {
    						margin-bottom: -1.62em;
    					}
    
    					@media (min-width: 42em) {
    						.site-layout-boxed,
    						.site-layout-boxed .align-wrap {
    							padding-left: 30px;
    							padding-right: 30px;
    						}
    					}				
    
    			' );
    		} );
    
    	}
    }, 100 );

    I’m using the Kadence Blocks again so omitted the following lines.

    				.alignfull {
    					width: 100%;
    					max-width: 100%;
    					margin: 0;
    					pointer-events: auto;
    				}
    
    					.site-layout-boxed .alignfull {
    						width: 1640px;
    						width: var(--layout_width_site);
    						margin-left: auto;
    						margin-right: auto;
    					}

    It doesn’t appear to work the same as when we added this functionality for Reykjavik. I’m not getting a full width when I select it for the Kadence section block. I added the website link that I’m working on. It’s a development site.

    Mark

    #21473
    Oliver Juhas
    Keymaster

    Hi Mark,

    But without the styles provided for the .alignfull class it actually does not do anything…

    I can see on your website the Kadence Blocks row is not full aligned (BTW, thanks for the link to affected page). Well, there is quite a mess around Gutenberg I must say, which is very frustrating… :(

    It seems the div.align-wrap I’ve provided in my code is not applied for the Kadence Blocks row. I can’t say why this happens, it would require more investigation. But as you are using full width site layout, the solution would be actually even simpler. This code should work better for your usecase:

    add_action( 'after_setup_theme', function() {
    	if ( ! current_theme_supports( 'align-wide' ) ) {
    
    		// Initiate support for block editor wide/full alignment.
    		add_theme_support( 'align-wide' );
    
    		// Add styles for full alignment.
    		add_action( 'wp_enqueue_scripts', function() {
    			wp_add_inline_style( 'polyclinic', '
    
    				body {
    					overflow-x: hidden;
    				}
    
    				.alignfull {
    					width: 100vw;
    					max-width: 100vw;
    					margin-left: calc(50% - 50vw);
    				}
    
    			' );
    		} );
    
    	}
    }, 100 );

    Best regards,

    Oliver Juhas
    WebMan Design

    #21474
    oakhillman
    Participant

    Used the new code and it works perfectly now. This may be another ticket, but how do I get rid of the white space above the image?

    #21475
    Oliver Juhas
    Keymaster

    Hi Mark,

    Apply this custom CSS:

    .compensate-content-padding-top {
    	margin-top: -2.6244rem;
    }
    
    	@media only screen and (min-width: 55em) {
    		.compensate-content-padding-top {
    			margin-top: -3.62rem;
    		}
    	}
    
    .compensate-content-padding-bottom {
    	margin-bottom: -2.6244rem;
    }
    
    	@media only screen and (min-width: 55em) {
    		.compensate-content-padding-bottom {
    			margin-bottom: -3.62rem;
    		}
    	}

    And then apply the compensate-content-padding-top or compensate-content-padding-bottom class on the appropriate block. (How to apply classes on blocks?)

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 5 months, 1 week ago by Oliver Juhas. Reason: Fixing the code
    #21476
    Oliver Juhas
    Keymaster

    how do I get rid of the white space above the image?

    To explain more, the space, the gap is actually a theme content area top and bottom padding. That’s why I’ve provided you with additional CSS classes for compensating for this padding.

    Applying the classes to a block will move the block accordingly. (I’ve fixed the styles I’ve provided in my previous reply as there was an error – sorry for that.)

    Best regards,

    Oliver Juhas
    WebMan Design

    #21478
    oakhillman
    Participant

    That works just fine now. And it’s working with the Kadence Row Layout block.

    Just so you know, I did purchase PolyClinic from Envato, so I think I get 6 months of support with that, right?

    Of course you did go above and beyond with this ticket, so I plan to do a donation when this project wraps up and the customer has paid me.

    Right now I’m a little cash poor, which is normal for summer.

    Mark

    #21479
    Oliver Juhas
    Keymaster

    Hi Mark,

    You get a (theme) lifetime support for any of my ThemeForest themes. There is actually no setting option on ThemeForest I can use to tell this. Either I provide the support or don’t. That’s the only option they allow for authors. The least I can do is to inform about this on ThemeForest theme pages/description, the rest is ThemeForest’s info and policy.

    Thank you for considering yet another donation. You’re right about summer, even theme sales dropped (info from backstage ;)).

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.