Support ATTR_HTML above paragraphs

Ref #113

ox-blackfriday.el

@@ -304,6 +304,44 @@ This function is adapted from `org-html--make-attribute-string'."
                            "\"" """ (org-html-encode-plain-text item))))
                (setcar ret (format "%s: %s; " key value))))))))
 
+;;;; Wrap with HTML attributes
+(defun org-blackfriday--div-wrap-maybe (elem contents)
+  "Wrap the CONTENTS with HTML div tags.
+
+The div wrapping is done only if HTML attributes are set for the
+ELEM Org element using #+ATTR_HTML.
+
+If #+ATTR_CSS is also used, and if a class is specified in
+#+ATTR_HTML, then an inline style is also inserted that applies
+the specified CSS to that class."
+  (let* ((elem-type (org-element-type elem))
+         (attr (let ((attr1 (org-export-read-attribute :attr_html elem)))
+                 (when (equal elem-type 'paragraph)
+                   ;; Remove "target" and "rel" attributes from the
+                   ;; list of a paragraph's HTML attributes as they
+                   ;; would be meant for links inside the paragraph
+                   ;; instead of the paragraph itself.
+                   (plist-put attr1 :target nil)
+                   (plist-put attr1 :rel nil))
+                 attr1))
+         (attr-str (org-html--make-attribute-string attr)))
+    (if (org-string-nw-p attr-str)
+        (let ((class (plist-get attr :class))
+              (style-str ""))
+          (when class
+            (let* ((css-props (org-export-read-attribute :attr_css elem))
+                   (css-props-str (org-blackfriday--make-css-property-string css-props)))
+              (when (org-string-nw-p css-props-str)
+                (setq style-str (format "<style>.%s { %s }</style>\n\n"
+                                        class css-props-str)))))
+
+          (concat style-str
+                  (format "<div %s>\n" attr-str)
+                  "  <div></div>\n\n"   ;See footnote 1
+                  contents
+                  "\n</div>"))
+      contents)))
+
 
 
 ;;; Transcode Functions
@@ -551,13 +589,10 @@ This function is adapted from `org-html-special-block'."
 	   (attr-str (if (org-string-nw-p attr-str)
                          (concat " " attr-str)
                        "")))
-      ;; The empty HTML element tags like "<div></div>" is a hack to
-      ;; get around a Blackfriday limitation.  Details:
-      ;; https://github.com/kaushalmodi/ox-hugo/issues/93.
       (if html5-fancy
-	  (format "<%s%s>\n<%s></%s>\n\n%s\n</%s>"
+	  (format "<%s%s>\n<%s></%s>\n\n%s\n</%s>" ;See footnote 1
                   block-type attr-str block-type block-type contents block-type)
-	(format "<div%s>\n<div></div>\n\n%s\n</div>"
+	(format "<div%s>\n<div></div>\n\n%s\n</div>" ;See footnote 1
                 attr-str contents)))))
 
 ;;;; Src Block
@@ -766,9 +801,6 @@ contextual information."
          (table-post "")
          (tbl (replace-regexp-in-string "\n\n" "\n" contents)))
 
-    ;; This is a nasty workaround till Hugo/Blackfriday support
-    ;; wrapping Markdown in HTML div's -
-    ;; https://github.com/kaushalmodi/ox-hugo/issues/93.
     (when (org-string-nw-p css-props-str)
       (setq table-pre (format "<style>.%s table { %s }</style>\n\n"
                               table-class-this css-props-str)))
@@ -777,7 +809,7 @@ contextual information."
               (org-string-nw-p css-props-str))
       (setq table-pre (concat table-pre
                               (format "<div class=\"ox-hugo-table %s\">\n" table-class)
-                              "<div></div>\n\n")))
+                              "<div></div>\n\n"))) ;See footnote 1
     (when (org-string-nw-p table-pre)
       (setq table-post (concat "\n"
                                "</div>\n")))
@@ -908,4 +940,13 @@ Return output file name."
 
 (provide 'ox-blackfriday)
 
+
+
+;;; Footnotes
+
+;;;; Footnote 1
+;; The empty HTML element tags like "<div></div>" is a hack to get
+;; around a Blackfriday limitation.  Details:
+;; https://github.com/kaushalmodi/ox-hugo/issues/93.
+
 ;;; ox-blackfriday.el ends here

ox-hugo.el

@@ -1484,6 +1484,24 @@ communication channel."
     ;; (message "[org-hugo-paragraph DBG] para: %s" contents)
     (setq ret (concat label
                       (org-md-paragraph paragraph contents info)))
+
+    ;; Wrap the paragraph with HTML div tag with user-specified
+    ;; attributes, unless the paragraph is a standalone image (or few
+    ;; other conditions as shown below).  These conditions are taken
+    ;; from `org-html-paragraph'.
+    (let* ((parent (org-export-get-parent paragraph))
+	   (parent-type (org-element-type parent)))
+      (unless (or
+               ;; First paragraph in an item has no tag if it is alone
+               ;; or followed, at most, by a sub-list.
+               (and (eq parent-type 'item)
+	            (not (org-export-get-previous-element paragraph info))
+	            (let ((followers (org-export-get-next-element paragraph info 2)))
+	              (and (not (cdr followers))
+		           (memq (org-element-type (car followers)) '(nil plain-list)))))
+               ;; Standalone image.
+               (org-html-standalone-image-p paragraph info))
+        (setq ret (org-blackfriday--div-wrap-maybe paragraph ret))))
     ret))
 
 ;;;; Source Blocks

test/site/content-org/all-posts.org

@@ -112,8 +112,10 @@ copied location inside =static=:
 :CUSTOM_ID: image-captions
 :END:
 Some text before image.
+
 #+CAPTION: A unicorn!
 [[/images/org-mode-unicorn-logo.png]]
+
 Some more text, after image.
 ** Image with Hugo =figure= shortcode parameters set using =ATTR_HTML=
 :PROPERTIES:
@@ -163,9 +165,14 @@ below image, caption is set using that:
 Below, the same caption is set using the =#+ATTR_HTML= method instead:
 
 Some text before image.
+
 #+ATTR_HTML: :caption A unicorn!
 [[/images/org-mode-unicorn-logo.png]]
-Some more text, after image.
+
+/Enter a new line after the image link so that it's in an "Org
+paragraph" that contains just that image. That tells Org that that
+=#+ATTR_HTML= attribute is associated *only* with that image, and not
+to the text that follows that image too./
 *** Setting image size
 **** Setting =:width= parameter
 The image [[https://www.w3schools.com/tags/att_img_width.asp][width]] can be specified in *pixels* using the =:width=
@@ -2699,6 +2706,24 @@ This is /some text/ wrapped in a =div= block with class =something=.
 | s | t | u |
 | v | w | x |
 #+END_bar
+* Paragraphs                                                      :paragraph:
+** Paragraphs with ATTR_HTML                         :attr___html:attr___css:
+:PROPERTIES:
+:EXPORT_FILE_NAME: paragraphs-with-attr-html
+:END:
+Regular text.
+
+#+ATTR_HTML: :class red-text
+#+ATTR_CSS: :color red
+Red text.
+
+Regular text.
+
+#+ATTR_HTML: :class green-text
+#+ATTR_CSS: :color green
+Green text.
+
+Regular text.
 * Org TODO keywords                                                    :todo:
 ** Post with a TODO heading
 :PROPERTIES:

test/site/content/posts/figure-shortcode-and-attr-html.md

@@ -39,14 +39,19 @@ below image, caption is set using that:
 Some text before image.
 
 {{<figure src="/images/org-mode-unicorn-logo.png" caption="A unicorn!">}}
+
 Some more text, after image.
 
 Below, the same caption is set using the `#+ATTR_HTML` method instead:
 
 Some text before image.
 
 {{<figure src="/images/org-mode-unicorn-logo.png" caption="A unicorn!">}}
-Some more text, after image.
+
+_Enter a new line after the image link so that it's in an "Org
+paragraph" that contains just that image. That tells Org that that
+`#+ATTR_HTML` attribute is associated **only** with that image, and not
+to the text that follows that image too._
 
 
 ## Setting image size {#setting-image-size}

test/site/content/posts/image-captions.md

@@ -8,4 +8,5 @@ draft = false
 Some text before image.
 
 {{<figure src="/images/org-mode-unicorn-logo.png" caption="A unicorn!">}}
+
 Some more text, after image.

test/site/content/posts/paragraphs-with-attr-html.md

@@ -0,0 +1,29 @@
++++
+title = "Paragraphs with ATTR_HTML"
+tags = ["paragraph", "attr_html", "attr_css"]
+draft = false
++++
+
+Regular text.
+
+<style>.red-text { color: red;  }</style>
+
+<div class="red-text">
+  <div></div>
+
+Red text.
+
+</div>
+
+Regular text.
+
+<style>.green-text { color: green;  }</style>
+
+<div class="green-text">
+  <div></div>
+
+Green text.
+
+</div>
+
+Regular text.