gppt-disable-auto-height: Added new snippet
#1171
Conversation
WalkthroughAdds a new PHP snippet that disables Swiper autoHeight for a specific Gravity Forms form in Gravity Perks Page Transitions, modifies script arguments, hooks into form pre-render and preview to inject CSS, and defines a helper to output CSS making slides auto-height and stretched. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant WP as WordPress
participant GF as Gravity Forms
participant GPPT as GP Page Transitions
participant Snip as Snippet (gppt-disable-auto-height)
User->>WP: Request form page / preview
WP->>GF: Pre-render form
GF-->>Snip: do_action('gform_pre_render', form)
Snip->>WP: Echo CSS via disable_auto_height_styles()
Note right of Snip: Injects slide height/stretch CSS
WP->>GPPT: Enqueue GPPT scripts
GPPT-->>Snip: filter gppt_script_args
Snip->>GPPT: Set autoHeight=false for target form
GPPT->>User: Render form with page transitions and custom CSS
Note over GPPT,User: Slides use tallest slide height behavior
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
| function disable_auto_height_styles() { | ||
| ?> | ||
| <style> | ||
| .gppt-has-page-transitions .swiper-slide { | ||
| height: auto; | ||
| align-self: stretch; | ||
| } | ||
| </style> | ||
| <?php |
There was a problem hiding this comment.
Scope the injected CSS to the intended form
As written, the CSS targets .gppt-has-page-transitions .swiper-slide globally, so every Page Transitions form on the site loses auto-height—even those that shouldn’t. Please scope the styles to the selected form ID before outputting them.
-function disable_auto_height_styles() {
+function disable_auto_height_styles() {
+ global $target_form_id;
+
+ if ( empty( $target_form_id ) ) {
+ return;
+ }
?>
<style>
- .gppt-has-page-transitions .swiper-slide {
+ #gform_wrapper_<?php echo absint( $target_form_id ); ?>.gppt-has-page-transitions .swiper-slide {
height: auto;
align-self: stretch;
}
</style>
<?php
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function disable_auto_height_styles() { | |
| ?> | |
| <style> | |
| .gppt-has-page-transitions .swiper-slide { | |
| height: auto; | |
| align-self: stretch; | |
| } | |
| </style> | |
| <?php | |
| function disable_auto_height_styles() { | |
| global $target_form_id; | |
| if ( empty( $target_form_id ) ) { | |
| return; | |
| } | |
| ?> | |
| <style> | |
| #gform_wrapper_<?php echo absint( $target_form_id ); ?>.gppt-has-page-transitions .swiper-slide { | |
| height: auto; | |
| align-self: stretch; | |
| } | |
| </style> | |
| <?php | |
| } |
🤖 Prompt for AI Agents
In gp-page-transitions/gppt-disable-auto-height around lines 27–35, the injected
CSS is applied globally to all Page Transitions forms; scope it to the selected
form by prefixing the existing selector with a specific form identifier (e.g.
the form wrapper ID or a form-specific class). Update the function to
obtain/accept the selected form ID (ensure it is integer-casted/validated) and
output the CSS with the selector prefixed like "#gform_wrapper-<ID>
.gppt-has-page-transitions .swiper-slide" (or ".gppt-form-<ID> ..." depending on
your markup), and only echo the style block when a valid form ID exists.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
gp-page-transitions/gppt-disable-auto-height.php (1)
27-35: Namespace the helper to avoid collisions
disable_auto_height_styles()is a generic global function name and can easily collide with other snippets/themes/plugins. Please prefix it (for example,gppt_disable_auto_height_styles()) and update the two references above to match.-add_action( 'gform_pre_render_{$target_form_id}', function( $form ) { - add_action( 'wp_footer', 'disable_auto_height_styles' ); +add_action( "gform_pre_render_{$target_form_id}", function( $form ) { + add_action( 'wp_footer', 'gppt_disable_auto_height_styles' ); return $form; }); add_action( 'gform_preview_footer', function( $form_id ) use ( $target_form_id ) { if ( $form_id == $target_form_id ) { - disable_auto_height_styles(); + gppt_disable_auto_height_styles(); } }); -function disable_auto_height_styles() { +function gppt_disable_auto_height_styles() {
| add_filter( "gform_pre_render_{$target_form_id}", function( $form ) { | ||
| add_action( 'wp_head', 'disable_auto_height_styles' ); | ||
| return $form; | ||
| }); |
There was a problem hiding this comment.
Fix timing: wp_head hook is registered after wp_head fires
On a normal front-end render the gform_pre_render_* filter runs while the form markup is being output—long after wp_head has already fired. Registering the callback at this point means the CSS never prints for live forms (only previews, where you call the function directly). Please hook into something that executes after the filter but before the closing body tag—wp_footer is a safe choice for inline styles, or alternatively output the <style> block immediately from this callback.
Applying the following change will ensure the styles execute on the same request:
-add_filter( "gform_pre_render_{$target_form_id}", function( $form ) {
- add_action( 'wp_head', 'disable_auto_height_styles' );
+add_filter( "gform_pre_render_{$target_form_id}", function( $form ) {
+ add_action( 'wp_footer', 'disable_auto_height_styles' );
return $form;
});📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| add_filter( "gform_pre_render_{$target_form_id}", function( $form ) { | |
| add_action( 'wp_head', 'disable_auto_height_styles' ); | |
| return $form; | |
| }); | |
| add_filter( "gform_pre_render_{$target_form_id}", function( $form ) { | |
| add_action( 'wp_footer', 'disable_auto_height_styles' ); | |
| return $form; | |
| }); |
🤖 Prompt for AI Agents
In gp-page-transitions/gppt-disable-auto-height.php around lines 16 to 19, the
code attaches disable_auto_height_styles() to wp_head during gform_pre_render
which runs after wp_head has already fired on normal front-end renders; change
the registration so the styles are emitted during the same request by either (A)
hooking disable_auto_height_styles() to wp_footer instead of wp_head (register
the action inside the gform_pre_render callback using 'wp_footer'), or (B)
outputting the required <style> block directly from the gform_pre_render
callback and returning the form immediately—pick one approach and remove the
late wp_head registration so the CSS is present for live forms.
2 participants
Context
⛑️ Ticket(s): https://secure.helpscout.net/conversation/3081415206/89552?viewId=3808239
Summary
Added new snippet to allow the user to disable Swiper's autoHeight while also forces all slides to match the height of the tallest slide.
See Samuel's Loom on the issue this snippet tries to solve: https://www.loom.com/share/10c67a332c4c4aa6b21eca7f133e0590