Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Single entry in lightbox #2136

Merged
merged 34 commits into from
Sep 25, 2024
Merged

Conversation

mrcasual
Copy link
Collaborator

@mrcasual mrcasual commented Sep 11, 2024

(work was initially done in #2055)

To enable:

  1. Add a "Link to Single Entry" field
  2. Open field settings
  3. Check the "Open in a lightbox?" checkbox
  4. Save the View

Big things to work on:

  • Allow for Next/Previous and Single Entry navigation options.
  • Remove the <— Go back link
  • Remove single entry widget header hooks add_action( 'gravityview/template/before', array( $this, 'render_widget_hooks' ) ); (started work here: class-gv-request-rest.php Request::is_entry())
  • When "open in lightbox" is enabled, disable "open in new window" option.
  • Make sure to embed Custom CSS and Custom JS output.
  • Enable galleries inside modal.
  • Prevent lightbox links from being indexed.
  • Edit Entry isn't working.
  • Add support for the CSS styles that are in Dashboard Views.

Questions form #197

  • How do we handle updating data? When closing the lightbox, if an entry has been edited, outdated values may be shown.
  • Will Inline Edit work inside this? 🤯
    • If enabled, should we disable Inline Edit?

To test:

  • Single Entry link
    • The link does not open in a lightbox when the corresponding field option is not checked.
    • When "Open in a lightbox?" option is checked, the link opens in a lightbox, allowing navigation left/right between entries.
    • Edit Entry link opens inside the Single Entry lightbox view.
  • Edit Entry link
    • The link does not open in a lightbox when the corresponding field option is not checked.
    • When "open in lightbox" is checked, the link opens in a lightbox, allowing navigation left/right between entries.
    • Updating the entry works.
      • After an update, "return to entry" opens the Single Entry layout inside the lightbox. If it has an Edit Entry link, it should open inside the lightbox.
    • Deleting the entry works.
      • After deletion, the page should refresh or, if configured in the View Editor under Delete Entry, URL redirection should work.
  • Permissions: only authorized users should be able to view, edit and delete entries.

💾 Build file (49301e3).

@mrcasual mrcasual force-pushed the feature/197-single-entry-in-lightbox-clean branch from 68b2734 to 42b9cbf Compare September 11, 2024 19:40
@mrcasual
Copy link
Collaborator Author

@Mwalek, please test and report any issues.

@mrcasual mrcasual force-pushed the feature/197-single-entry-in-lightbox-clean branch from 42b9cbf to ba542ad Compare September 11, 2024 23:33
@zackkatz
Copy link
Member

Woot! I'll test this today, @mrcasual.

@Mwalek can you please also test this branch for bugs and expected behavior?

@crbdev This will be worthy of writeups. It'd be great to release next week (or the week after if it needs more tweaks).

@Mwalek
Copy link

Mwalek commented Sep 12, 2024

@mrcasual @zackkatz I tested this in PHP versions 7.4 and 8.2, here are my results. Each issue is highlighted in the video below:

Loom Recording

1. PHP Warnings and Notices on Plugin Activation

Warnings shown during plugin activation.

  • Expected Behavior: The plugin should activate without any warnings or notices, ensuring a clean initialization process.
  • Actual Behavior: PHP warnings appear, indicating an attempt to read properties from a null object.
Warning: Attempt to read property "post_type" on null in .../class-gravityview-lightbox-entry.php on line 225
Warning: Attempt to read property "filter" on null in .../class-gravityview-lightbox-entry.php on line 225

2. Deprecation Warnings When Clicking "View Details" Link

Deprecation warnings when viewing a single entry.

  • Expected Behavior: Clicking "View Details" should open the single entry page without any deprecation warnings, ensuring compatibility with the latest PHP versions.
  • Actual Behavior: Deprecation warnings related to dynamic property creation are shown when opening the entry in PHP 8.2.
Deprecated: Creation of dynamic property GravityView_Lightbox_Entry_Request::$entry is deprecated in .../class-gravityview-lightbox-entry-request.php on line 15
Deprecated: Creation of dynamic property GravityView_Lightbox_Entry_Request::$view is deprecated in .../class-gravityview-lightbox-entry-request.php on line 16

3. Entire Site Loads Inside Popup When Editing Single Entry

Editing a single entry opens the entire site, including the admin bar, inside the popup.

  • Expected Behavior: Clicking "Edit Entry" should only load the entry-editing form within the popup, limiting navigation to editing that specific entry.
  • Actual Behavior: The entire site, including the wp-admin bar, loads inside the popup, allowing users to navigate the entire site (including wp-admin) within the popup.

4. Redirect or Refresh Happens Inside the Popup When Deleting an Entry

When deleting an entry, the redirect or refresh action takes place within the popup instead of across the entire page.

  • Expected Behavior: The page should refresh or redirect across the entire page (not inside the popup) after deleting an entry, based on the settings.
  • Actual Behavior: The refresh or redirect happens only within the popup, leaving the rest of the page unaffected.

5. Incorrect 'Edit Link Text' When 'Open in a Lightbox' is Enabled

The 'Link to Edit Entry' does not display the correct text when the 'open in a lightbox' option is enabled.

  • Expected Behavior: When 'open in a lightbox' is checked, the 'Link to Edit Entry' should display the custom 'Edit Link Text' as specified in the "Link to Edit Entry > Display" settings.
  • Actual Behavior: The 'Link to Edit Entry' does not show the correct custom 'Edit Link Text' when the 'open in a lightbox' option is selected, instead the text "View Details" is shown.

Issue Summary

  • PHP Warnings and Notices.
  • Deprecation Warnings when clicking "View Details" link.
  • Entire Site Loads in Popup when editing a single entry.
  • Redirect/Refresh Occurs in Popup when deleting an entry.
  • Incorrect 'Edit Link Text' when 'Open in a Lightbox' is enabled.

@mrcasual
Copy link
Collaborator Author

@Mwalek, please retest using the latest build (4a3c839) that fixes issues 1-2. For issues 3-5, update your site to use a plain permalink structure - that's what was causing the issue.

@Mwalek
Copy link

Mwalek commented Sep 12, 2024

Thanks @mrcasual, of the earlier issues, only issue 4 (Redirect/Refresh Occurs in Popup when deleting an entry) remains.

E.g: https://basecamp.try.gravitykit.com/view/lightbox-view-1/

I've also discovered a new issue in Mozilla Firefox.

In Firefox, the lightbox is too short when the "edit" link is clicked in the single entry popup.

Screenshot 2024-09-12 at 17-29-49 Lightbox View 1 – efficient-hare-254566 try gravitykit com

Actual:

  • Lightbox is scrollable but too short, making it hard to view content comfortably.

Expected:

  • Lightbox should adjust height to fit content without excessive scrolling.

Issue Summary:

  • Lightbox is too short in Firefox when clicking "edit" in the single entry popup.

@mrcasual
Copy link
Collaborator Author

mrcasual commented Sep 12, 2024

@Mwalek, please retest using 09ea1ef. Make sure that:

  • Edit Entry redirection options work
  • Delete Entry redirection options work
  • Lightbox is not opened inside itself regardless of the permalink structure
  • There are no Firefox issues

@Mwalek
Copy link

Mwalek commented Sep 13, 2024

@mrcasual many of the remaining issues are related to the "plain" permalink structure, see below.

Lightbox opens inside itself when Permalinks are set to "plain" and edit option is clicked

  • Actual: When Permalinks are set to "plain" and the edit option is clicked, the lightbox opens inside itself.
  • Expected: The lightbox should open properly without nesting within itself when editing an entry.

Redirect to external URL doesn't work when Permalinks are set to "plain"

  • Actual: Redirecting to an external URL fails, and the console displays the following error: "Refused to display 'https://www.google.ca/' in a frame because it set 'X-Frame-Options' to 'sameorigin'."
  • Expected: External URLs should open correctly without throwing an error when Permalinks are set to "plain."

"Redirect to multiple entries" does not work when editing with plain permalink structure

  • Actual: When editing with a plain permalink structure, the "Redirect to multiple entries" functionality instead redirects the user to a single entry within a popup.
  • Expected: The redirect should correctly take the user to the multiple entries view, not a single entry.

Post name permalink, Firefox: Popup initially short, grows when edit link is clicked

  • Actual: In Firefox, with post name permalinks, the popup starts off short and only expands when the edit link is clicked.
  • Expected: The popup should have an appropriate initial height, improving the user experience, and not appear short at first.

Lightbox is still short in Firefox if permalinks are "plain"

  • Actual: The lightbox remains short in Firefox when Permalinks are set to "plain."
  • Expected: The lightbox should open with the correct height, regardless of the permalink structure.

Issue Summary

  • Lightbox opens inside itself when Permalinks are set to "plain" and edit option is clicked.
  • Redirect to external URL doesn't work when Permalinks are set to "plain."
  • "Redirect to multiple entries" does not work when editing with plain permalink structure.
  • Post name permalink, Firefox: Popup initially short, grows when edit link is clicked.
  • Lightbox is still short in Firefox if permalinks are "plain."

@mrcasual
Copy link
Collaborator Author

@Mwalek, there's an issue on try for some reason. Please test locally (everything works 100% on my site) while I try to figure out why you're encountering all these issues.

@zackkatz
Copy link
Member

zackkatz commented Sep 13, 2024

@mrcasual here are a few items:

  • Any links that have "Link to single entry" should also have the option to open in a lightbox, not just the "Link to Single Entry Field". It took me a long while trying to figure out where the setting was for the First Name field. If it's confusing for me, it will be confusing for users.

  • Duplicate Entry link duplicates the entry inside the IFRAME. What should happen: it should close the lightbox when duplicating the entry. To reproduce: Add Duplicate Entry field, view Single Entry in lightbox, click Duplicate Entry. What you see: Multiple Entries page loading inside the lightbox.
  • Embed a Gravity Forms form inside a Single Entry layout using the Gravity Forms GravityView field. Set the form to use AJAX. Open the single entry in a lightbox, submit the form. The page loads recursively (See video: https://www.loom.com/share/a87da455bf97427094ef0d9203d439d2)
  • Embed a Gravity Forms form inside a Single Entry layout using the Gravity Forms GravityView field. Set the form to NOT use AJAX. Submit a form that has required fields, so should fail validation. What happens: it submits the form, but no errors are shown. What should happen: it should not even submit, since it has required fields. See video: https://www.loom.com/share/cf40519323404954b1f8ed9990168954
  • Entry Notes isn't working (JS error: ReferenceError: Can't find variable: GVNotes). To reproduce: Add an Entry Notes field in Single Entry, open the single entry in the lightbox. Enter a value in the notes field, submit the form. See the JS error.

@Mwalek
Copy link

Mwalek commented Sep 13, 2024

@mrcasual all the issues don't exist in local, except the one below:

Post name permalink, Firefox: Popup initially short, grows when edit link is clicked.

https://www.loom.com/share/295efe48a55a4282a204507b92624dbb?sid=8bd1fb01-fa70-4e74-8161-743b87033208

@mrcasual
Copy link
Collaborator Author

@Mwalek, good to hear that there aren't any issues. Please provide the Firefox version as well as the theme that you're using.

FF 130 and Twenty Twenty-Four:

CleanShot.2024-09-14.at.10.25.58.mp4

@mrcasual
Copy link
Collaborator Author

@Mwalek, 7dd608f should fix the nested lightbox issue on try. Please test.

@Mwalek
Copy link

Mwalek commented Sep 16, 2024

@mrcasual same as you.

Firefox: 130.0 (64-bit)

Theme: Twenty Twenty-Four

The video you shared has the same behavior as mine. The popup grows when the edit link is clicked. If this is intended, then there are no remaining issues.

@mrcasual
Copy link
Collaborator Author

@Mwalek, please test Zack's items + do another test of all features using different permalink structures. Once done, tick all action items from previous comments and, if there are still any issues, consolidate any outstanding items in a new comment.

@Mwalek
Copy link

Mwalek commented Sep 19, 2024

@mrcasual I tested all the issues again and nearly everything works as expected. The following problems could be observed though:

  1. HTML Text Displayed Instead of Rendered HTML Layout When Submitting Gravity Forms (GF)
    When submitting a Gravity Forms form, the HTML document's raw text is displayed instead of rendering as a visual layout. After clicking submit, the following error is observed in the browser console:
    Uncaught TypeError: Cannot read properties of undefined (reading 'top').

Item 3 from Zack's earlier comment has the steps to reproduce:

Embed a Gravity Forms form inside a Single Entry layout using the Gravity Forms GravityView field. Set the form to use AJAX. Open the single entry in a lightbox, submit the form.

Except, instead of the page loading recursively, raw HTML text is shown.

Screenshot 2024-09-19 at 1 50 03 PM
  1. "Display" Heading Overlapping Text in Entry Notes Field
    When editing the Entry Notes field on the View Edit screen, the heading "Display" appears on top of other text, causing overlap and readability issues. To reproduce: Add an Entry Notes field in Single Entry, open the field settings.
Screenshot 2024-09-19 at 2 12 41 PM

Other

  • Error in Entry Notes: "WordPress was unable to send the notification email"
    A warning appears in the entry notes stating:
    "WordPress was unable to send the notification email. Could not instantiate mail function."
    The cause of this warning is unclear, as it occurred without any specific action on the front end. To replicate, add the "Entry notes" field to the single entry tab and view the single entry in a lightbox on the front end.
    I know that this issue is most likely unique to my site, but could we implement something to prevent this warning from appearing inside the entry note content? Let me know if a separate issue should be created for this.
Screenshot 2024-09-19 at 2 16 02 PM

@mrcasual
Copy link
Collaborator Author

mrcasual commented Sep 19, 2024

@Mwalek,

I know that this issue is most likely unique to my site, but could we implement something to prevent this warning from appearing inside the entry note content? Let me know if a separate issue should be created for this.

This should be a separate issue to improve error handling.

Except, instead of the page loading recursively, raw HTML text is shown.

Have you tried testing locally? I can't reproduce it since this was addressed in 8c8302f, so I need to make sure it's not specific to the try site.

CleanShot 2024-09-19 at 09 16 29@2x

@Mwalek
Copy link

Mwalek commented Sep 19, 2024

@mrcasual thanks, I'll create a separate issue for the email notification error handling.

For the raw HTML issue, I was able to reproduce it locally as well:

https://www.loom.com/share/acaf65e3a856418e9b8af0ea8f7693ec

NB: Make sure you're using AJAX, it works when AJAX is not enabled.

@Mwalek
Copy link

Mwalek commented Sep 19, 2024

@mrcasual another issue is that the lightbox does not show up when the setting "Enable lightbox for images" is disabled:

https://www.loom.com/share/067f1a5320244c0e89d76329df3a53fe?sid=643b1b76-cc3c-47a2-8c53-f77962c08430

Instead of showing the content in a lightbox, the content opens in a new page with no other content. The lightbox should not be affected by the setting that is only meant for images

  • Lightbox missing when "Enable lightbox for images" is disabled

@mrcasual
Copy link
Collaborator Author

@Mwalek, please retest both issues from your recent comments with 49301e3.

@Mwalek
Copy link

Mwalek commented Sep 19, 2024

@mrcasual both issues are resolved! 👌

@mrcasual
Copy link
Collaborator Author

@Mwalek, great, thank you!

@zackkatz, do you want to give this PR another try? @rafaehlers and @crbdev, please test as well and report any issues and missing features.

@mrcasual mrcasual self-assigned this Sep 20, 2024
@crbdev
Copy link

crbdev commented Sep 20, 2024

Will do. I played around with it a bit and it seems great. @mrcasual are you okay if we demo this during our live call next Tuesday? Even if it's not released yet, it's fine.

@mrcasual
Copy link
Collaborator Author

@crbdev, I don't see why not. Make sure to test all scenarios to avoid any issues during the live call.

@zackkatz
Copy link
Member

@mrcasual

  • Add support "Open in lightbox" for Website field

@zackkatz
Copy link
Member

@mrcasual Error when embedding a Gravity Forms form in Single Entry.

It looks correct, but submitting the form fails with a JS error when clicking Submit:

TypeError: undefined is not an object (evaluating 'gform.submission.handleButtonClick')

@mrcasual
Copy link
Collaborator Author

mrcasual commented Sep 24, 2024

@mrcasual Error when embedding a Gravity Forms form in Single Entry.

It looks correct, but submitting the form fails with a JS error when clicking Submit:

TypeError: undefined is not an object (evaluating 'gform.submission.handleButtonClick')

@zackkatz, form submission should work fine (both @Mwalek and I tested it using the latest release versions of Chrome, FF and Safari). What's your browser and where can I see the error?

@zackkatz
Copy link
Member

@mrcasual I believe the issue was with a corrupted setup; I exported the form and was unable to reproduce.

@zackkatz zackkatz changed the title [WIP] Single entry in lightbox Single entry in lightbox Sep 25, 2024
includes/fields/class-gravityview-field.php Outdated Show resolved Hide resolved
@zackkatz
Copy link
Member

Works great, @mrcasual 👏

@mrcasual mrcasual merged commit 8ede5a5 into develop Sep 25, 2024
@mrcasual mrcasual deleted the feature/197-single-entry-in-lightbox-clean branch September 25, 2024 13:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants