When activating the AMP plugin on an existing theme, the baseline experience is as if JavaScript is disabled in the browser. This is the case because custom JS is not allowed in AMP and the plugin does a very good job removing <script> tags. Many themes and plugins provide fallbacks for cases where JavaScript is not available, and in such cases, enabling the plugin without any further actions will still result in posts/pages well served in AMP. In other cases, however, there is no fallback provided and allowing the plugin to remove a given component of the content (i.e. a <script> tag) can result in a loss of visual or functional parity. In such cases, the goal of the plugin is to provide all the information and guidance for the developer to be able to restore visual and functional parity to their sites while maintaining full AMP compatibility.
Thus, the approach for enabling AMP theme support and making the theme AMP compatible while retaining visual and functional parity, consists of progressively enhancing the theme to restore the functionality and visual parity that may have been lost by the plugin transcoding actions. This progressive enhancement process usually involves:
- The use of modern CSS selectors (e.g. :focus-within)
- The use of AMP components (e.g. amp-carousel and amp-position-observer)
- The implementation of interactivity via AMP scripting with amp-bind
By using these building blocks, it is possible to achieve full visual and functional parity and have a theme that is fully AMP compatible. Some commonly encountered solutions are the following: